Block reference

A block is the smallest layout unit in the builder. Each block has a type and a set of configurable properties. You add, remove, reorder, and configure blocks per screen to build your app's layout without writing code.

What is a block

Every screen in your app renders a list of blocks from top to bottom. The block type determines what component renders, and the block properties determine what it shows and how it behaves. Two screens can use the same block type independently configured.

Blocks are screen-scoped. A HeroBanner belongs to the Home screen layout; it is not a global component you place anywhere. This keeps layouts predictable and prevents accidental cross-screen side effects.

Home blocks

The Home screen has the most editorial flexibility. These three blocks can appear in any order and can each appear at most once.

HeroBanner

A full-width image with an overlaid headline and an optional call-to-action button. The image fills the top of the screen. Tapping the CTA button navigates to any collection or product you link it to.

• image - URL of the background image
• headline - Primary text overlaid on the image
• subheadline - Optional secondary line below the headline
• ctaLabel - Button text (leave empty to hide the button)
• ctaTarget - Collection handle or product handle to navigate to
• overlayOpacity - Dark overlay strength (0 to 1) for text legibility

FeaturedCollections

A horizontally scrollable row of collection tiles. Each tile shows the collection image and name. Tapping navigates to that collection.

• title - Section heading shown above the row
• collectionHandles - Ordered list of Shopify collection handles to display
• tileAspectRatio - Square or portrait (4:5) tile shape

ProductGrid

A grid of product cards sourced from one collection. Used to surface best-sellers, new arrivals, or any curated set.

• title - Section heading
• collectionHandle - Which Shopify collection to pull from
• limit - How many products to show (max 20)
• columns - 2-column or 3-column grid

Collection blocks

The Collection screen has one block. It occupies the full screen and is always present.

CollectionGrid

The main product listing for a collection. Renders all products in the active collection with filter and sort controls at the top.

• columns - 2-column or 3-column grid
• showFilter - Show or hide the filter button
• showSort - Show or hide the sort selector
• cardStyle - Standard (image + title + price) or compact (image only with price badge)

Product blocks

The Product screen is the most block-rich. VariantPicker and AddToCartButton (or StickyAddToCart) are required for the screen to function correctly. All others are optional.

ProductImageCarousel

Full-width swipeable image carousel showing all product images. Pinch-to-zoom is enabled by default.

• showThumbnails - Show thumbnail strip below the main image
• aspectRatio - Square (1:1), portrait (4:5), or fit original ratio

ProductInfo

Displays the product title, current price (with sale price if applicable), and review count. Always visible; most stores keep it immediately below the carousel.

• showReviewCount - Show or hide the star rating and review count
• showVendor - Show or hide the brand/vendor name

VariantPicker

Renders all variant options (size, color, material, etc.) as selectable swatches or dropdown lists. The picker is required for products with variants.

• colorStyle - Swatch circles or labeled buttons for color options
• sizeStyle - Grid buttons or a dropdown for size options

AddToCartButton

A full-width primary button that adds the selected variant to the cart. Required unless StickyAddToCart is used instead.

• label - Button text (default: "Add to cart")
• showQuantitySelector - Show inline quantity +/- controls

StickyAddToCart

A floating bar that sticks to the bottom of the screen as the user scrolls. Contains the product title, price, and an add-to-cart button. Use this instead of AddToCartButton if you want the action always visible.

• label - Button text
• showPrice - Show price in the sticky bar

ProductDescription

Renders the product description field from Shopify. Supports rich text (bold, lists, links) as formatted by Shopify.

• collapsible - Collapse long descriptions behind a "Read more" toggle

RelatedProducts

A horizontal scroll row of products from the same collection. Appolar picks the products automatically based on the active collection.

• title - Section heading (default: "You might also like")
• limit - How many related products to show (max 10)

Cart blocks

Both cart blocks are required and always present. Their order is fixed (line items above the summary) to keep the checkout path unambiguous.

CartLineItems

Lists all items currently in the cart with their image, title, variant, quantity controls, and a remove button.

• showProductImage - Show or hide the thumbnail next to each item

CartSummary

Shows the cart subtotal, a note about taxes and shipping calculated at checkout, and the Checkout button. The Checkout button hands off to the Shopify-hosted checkout flow.

• checkoutLabel - Checkout button text (default: "Checkout")
• showTaxNote - Show or hide the taxes and shipping note

Account blocks

Both account blocks are always present. Order between them is configurable; most stores put AccountProfile above OrderHistory.

AccountProfile

Displays the signed-in customer's name and email with a sign-out option. Shows a sign-in prompt when the user is logged out.

• showAvatar - Show or hide the avatar placeholder

OrderHistory

A paginated list of the customer's past orders with status, date, and total. Tapping an order opens a detail view. Empty state is shown automatically for new customers.

• pageSize - Number of orders per page (default 10, max 20)

All blocks at a glance