Product Main
The primary product detail section. It renders the product image gallery in the
left column and a fully block-driven form column on the right. The form column
uses content_for 'blocks' so every element — title, price, variant options,
add-to-cart button, trust badges, accordions — is a composable theme block that
can be reordered in the customizer.
Variant state is managed through an Alpine store (productVariant) that
initializes immediately on page load and reinitializes on HTMX content swaps for
linked variant navigation. The form column is sticky on desktop with dynamic top
offset calculation — if the column is taller than the viewport, the offset
adjusts so the entire column can be scrolled through while remaining pinned.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| Section ID | Optional anchor for jump links. Defaults to main-product if left blank. |
| Padding top / bottom (mobile) | Default 32px each. |
| Padding top / bottom (tablet) | Default 48px each. |
| Padding top / bottom (desktop) | Default 64px each. |
The section itself is intentionally minimal on settings — all product content configuration happens through blocks.
Blocks
Section titled “Blocks”All blocks are repeatable and reorderable. The section accepts:
- Product Title — the product name with optional alternate title from metafield.
- Title — a generic title block, useful for custom headings.
- Richtext — freeform rich text content.
- Product Price — price display with compare-at pricing and variant reactivity.
- Product Variant Options — variant selector pills/swatches, synced with the Alpine store.
- Product Form Submit — the add-to-cart button and quantity selector.
- Product Stock Message — low stock / out of stock messaging.
- Product Trust Badges — icon rows for shipping, warranty, etc.
- Product Compatibility — “works with” product cards.
- Bundle Checkbox — metaobject-driven bundle offer cards.
- Promo Selector — promotional free gift selector.
- Accordion — expandable content panels for descriptions, specs, etc.
- @app — third-party app blocks (e.g. reviews, size guides).
Where it’s used
Section titled “Where it’s used”All product templates — product (default/flagship), product.parts, and
product.mid-tier. Each template composes a different set of blocks for its
product type.
- Block order is the form order. Whatever sequence you set in the customizer is exactly what the customer sees. Put price before variants if you want the price visible before they make a selection.
- The form column is sticky, not fixed. It pins to the viewport while scrolling the gallery, but if the column is taller than the screen it adjusts dynamically so nothing gets clipped. This is handled automatically — no settings to configure.
- HTMX swaps reinitialize the variant store. If you’re using linked variant navigation (separate URLs per variant), the Alpine store re-runs on every swap so price, availability, and gallery all update correctly.
- Don’t duplicate blocks. Adding two Product Price blocks renders two price displays. Each block type should appear once unless you have a specific reason.
- App blocks slot in anywhere. Drag @app blocks between other blocks to position third-party widgets (reviews, size guides) exactly where they belong in the purchase flow.