Each block type listed here can be added to the corresponding screen from Builder > Screens > [Screen name] > Add block. Required blocks (marked ●) cannot be removed; they are structural to the screen. Optional blocks (marked ○) can be added, removed, and reordered freely.
Note. Block types are screen-specific. The picker only shows block types that are valid for the screen you are currently editing. See Per-screen layouts for how the editor works.
Home screen blocks
The Home screen is fully block-based. All blocks are optional — there are no required blocks on Home. A Home screen with no blocks shows a blank screen, so you will typically want at least one block configured.
| Block type | Req. | Description | Key options |
|---|---|---|---|
hero | ○ | Full-width banner image with headline, subtext, and CTA button | Image, headline, body, CTA label, CTA destination (collection or product URL) |
image-slider | ○ | Auto-advancing crossfade or swipe carousel of banner images | Images (up to 6), transition style (fade or slide), interval (3–8 seconds) |
collection-row | ○ | Horizontal scrolling row of collection thumbnails | Collection IDs to show, row title, “See all” link toggle |
product-grid | ○ | Grid of products from a chosen collection or tag | Collection or tag to pull from, number of products (4–12), grid columns (2 or 3), section title |
tabs | ○ | Tab bar where each tab shows a product list or collection | Tab labels, each tab's content (products by tag or a collection) |
featured-section | ○ | Editorial-style section: large image on one side, product list on the other | Image, section title, products to feature (up to 4) |
banner-strip | ○ | Full-width thin banner with text and optional link | Text, link destination, background color override |
Product detail blocks
The Product Detail Page (PDP) has four required blocks that cannot be removed. They form the core of the purchase flow. Optional blocks can be placed anywhere in the stack relative to the required ones.
| Block type | Req. | Description | Key options |
|---|---|---|---|
gallery | ● | Product image gallery with pinch-to-zoom | Cannot be removed |
variant-picker | ● | Color, size, material, and other Shopify variant selectors | Cannot be removed |
price-display | ● | Price, compare-at price, and sale badge | Cannot be removed |
add-to-cart | ● | Add to cart and wishlist buttons | Cannot be removed |
description | ○ | Rich text product description from Shopify | Show/hide; position within the block stack |
reviews | ○ | WebView injection of the store's existing review app widget | Show/hide |
related-products | ○ | Horizontal row of related products below the main product | Number to show (4–8), sourced from same collection or manually curated |
Collection screen options
The Collection screen does not use a free-form block stack. Instead it exposes a fixed set of layout and behavior options. These apply globally to all collection screens in the app.
| Option | Values | Default |
|---|---|---|
| Layout | Grid (2 col), Grid (3 col), List | Grid (2 col) |
| Filters visible | On / Off | On |
| Sort default | Featured, Newest, Price low–high, Price high–low, Best selling | Featured |
| “Load more” style | Infinite scroll, Pagination | Infinite scroll |
Filters are driven by the metafields and product options defined in your Shopify store. Appolar reads them automatically; there is no separate filter configuration step. If a collection has no filterable options, the filter bar is hidden regardless of the “Filters visible” setting.