Per-screen layouts

Every user-facing screen in your app renders a stack of blocks defined in your config. You control which blocks appear, what order they are in, and what each one shows, all from the builder with no code.

How layouts work

Each screen in your app is driven by a blocks array stored in your config under config.layouts.<screenName>. When a screen renders, it reads this array top to bottom and draws each block in sequence.

Moving a block up or down in the builder changes its position in the array. Hiding a block sets a visible: false flag without removing it from the config, so you can re-enable it later without reconfiguring it. Every block also has its own set of properties for content, size, and behavior.

The five screens

Home

The first screen users see after opening the app. It has the most editorial freedom of any screen, supporting hero banners, collection showcases, and product grids in any combination and order. Use it to surface promotions, seasonal campaigns, and best-sellers without rebuilding anything.

Collection

Displayed when a user taps a collection. It renders all products in that collection through a grid block with filter and sort controls. The layout is simpler than Home by design, the focus is on the catalog, not editorial content.

Product

The product detail page. It must always include the variant picker and an add to cart action. Beyond those required elements, you can show or hide the product description, related products, and a sticky floating add-to-cart bar. Block order matters here: the image carousel should stay at the top, but everything below it is adjustable.

Cart

Shows the current cart contents and the path to checkout. The two blocks available, CartLineItems and CartSummary, are both required for the screen to function. You can configure display options within each block, but the screen itself is intentionally minimal to keep the checkout path clear.

Account

Shown when a user taps the account tab. Displays profile information and order history. Customers must be logged in to see order data; Appolar handles the guest state automatically and prompts sign-in when needed.

Editing layouts in the builder

Open any screen in the builder sidebar and you will see a vertical list of its current blocks. Three operations are available:

Which blocks go where

Blocks are assigned to specific screens. An editorial block like HeroBanner only makes sense on Home. A product-specific block like VariantPicker only makes sense on the Product screen. The builder filters the available block list per screen so you only see valid options.

Default layouts

If you have not customized a screen, it falls back to a built-in default layout shipping with the Appolar engine. Every screen has one. The defaults are sensible starting points: the Product screen default includes all blocks in a logical order, the Home screen default has a hero, featured collections, and a best-seller grid.

Once you save a custom layout for a screen, the default for that screen is no longer used. The screens you have not touched continue to use their defaults, so you can customize incrementally rather than all at once.