The blocks system
Every configurable screen renders a list of blocks. A block is a self-contained section of UI: a hero banner, a product row, a collection grid. The blocks on a screen are ordered, and the rendered screen shows them in that order from top to bottom. You add, remove, and reorder blocks in the builder; the live preview reflects each change immediately.
Each block has a type (which determines what component renders) and a set of configuration options specific to that type. A collection-row block, for example, lets you choose which collection it displays and whether to show a “See all” link. A hero block lets you choose the image, headline, subtext, and CTA label.
Note. Some block types are marked required (●) and cannot be removed from a screen. They are structurally necessary for the screen to function. All other blocks (○) are fully optional. See the Block reference for the complete list.
Which screens are configurable
Not every screen in the app has a block-based layout. Navigation, checkout, and the cart drawer are fixed UI. The screens below accept custom block layouts.
| Screen | What you can configure |
|---|---|
| Home | Full block list: hero, collection rows, product grids, banners, image sliders, tabs |
| Product detail | Block order for description, variant pickers, related products, and reviews |
| Collection | Grid vs. list layout, filter visibility, default sort order |
| Account | Shortcuts order, quick-action tile visibility |
Editing a layout
Go to Builder > Screens and select the screen you want to edit. The center canvas shows the current block stack. The right panel shows configuration options for whichever block is selected. Click any block in the canvas to select it and open its options.
Adding a block
Click the + Add block button at the bottom of the block list, or hover between two existing blocks and click the + that appears inline. A picker shows all block types available for the current screen. Select one and it appears at the bottom of the list (or between the two blocks if you used the inline +). Drag it to the position you want.
Each block type only appears in the picker when it is valid for the screen you're editing. Product detail blocks, for example, won't appear when editing the Home screen.
Removing and reordering blocks
Hover a block in the canvas and click the trash icon to remove it. Required blocks do not show a trash icon. Drag the grip handle (⠿) on the left edge of any block to reorder it.
Changes to block order and removal take effect in the live preview immediately and do not require a rebuild.
When changes need a rebuild
Most layout changes are config changes that go live without a rebuild: adding blocks, reordering blocks, changing block content like headlines and images, updating color tokens. A rebuild is only required when you change app-level metadata that is baked into the binary:
| Change type | Rebuild required? |
|---|---|
| Block add, remove, reorder | No |
| Block content (image, headline, CTA) | No |
| Color tokens | No |
| Font family | Yes |
| App name or bundle ID | Yes |
| App icon or splash screen | Yes |
The builder shows a Rebuild requiredindicator next to any setting that falls into the rebuild category. You can keep making changes and trigger the rebuild when you're ready, rather than rebuilding after each individual setting change.