Storefront & themesUpdated 2026-06-01
Blocks reference
The available block types for the page and layout builders and their properties.
Blocks are the building blocks of your storefront pages. Each block has a type and a set of editable properties rendered in the properties panel.
Available block types
| Field | Type | Description |
|---|---|---|
| hero | section | A large headline + subtext + CTA, typically at the top of the home page. |
| productGrid | section | A grid of products, optionally filtered by collection or category. Supports search and sort controls. |
| featuredProducts | section | A curated selection of products shown as cards. |
| text | content | A rich text block with headings, paragraphs, and lists. |
| image | content | A single image with optional caption and link. |
| button | content | A call-to-action button with label, link, and style. |
| newsletter | content | An email signup form block for list building. |
| spacer | structural | Vertical spacing between blocks. |
Block data model
Every block on a page is stored as { id, type, props }. The props object contains the block's editable fields. Blocks can be nested inside container blocks to create complex layouts. The BlockRenderer component renders each block type on the storefront.
Custom blocks
The block system is extensible. New block types are registered in the component catalog and rendered by the BlockRenderer. The field input component (block-field-input) auto-generates the right editor for each prop type.
Related