Product & Collection
Product page
The product page is block-based — reorder blocks in the editor.
| Block | Notes |
|---|---|
| Title | Product title with optional vendor line |
| Price | Compare-at (sale) pricing, plus per-unit price where set, plus a tax note |
| Variant picker | Colour options render as swatches; others as dropdowns. The gallery follows the selected variant |
| Buy buttons | Add to cart plus a dynamic “Buy it now” accelerated checkout button |
| Key facts | Short bulleted list, best driven by the custom.key_facts metafield |
| Specifications | Name/value table driven by custom.specs per product |
| Description | The product description |
| Collapsible rows | Expandable sections (How to use, Shipping…). Each can pull content from a per-product metafield |
| Metafield block | Render any product metafield (for example Ingredients) |
| Pickup availability | Shows local-pickup status when enabled on a location |
Gallery & sticky buy bar
The image gallery has thumbnails, a zoom lightbox, and variant-linked switching. A sticky add-to-cart bar appears as the main buy button scrolls away and tucks itself away above the footer.
Video & 3D media
Add media in the product’s Media area in admin. Supported types:
| Type | Behaviour |
|---|---|
| Image | Main gallery — thumbnails, zoom, variant switching |
| Video (hosted) | Native player with controls |
| External video | YouTube / Vimeo embed |
| 3D model | Interactive .glb / .usdz a shopper can rotate |
Video and 3D media render below the image gallery, keeping the primary image experience fast.
Colour swatches
Swatches appear on product cards, in collection filters, and on the product page. Citera resolves a colour’s swatch in this order:
1 · Native Shopify swatches (recommended)
Attach a colour or image to each option value in the product’s options — Citera uses it automatically.
2 · Theme colour map (fallback)
Or map colours once in the swatch list setting, one per line:
| To show | Write |
|---|---|
| A solid colour | Sage: #9caf88 |
| A texture image | Marble: marble.jpg (upload in Settings → Files) |
Controls
- Swatch option names — which option names count as colours (
Color, Colourby default; add your own, comma-separated). - Show on cards and show on product page — independent toggles.
Product metafields
Create these under Settings → Custom data → Products, then fill them per product. Empty metafields fall back to section content, so nothing breaks.
| Namespace · key | Type | Fills | Format |
|---|---|---|---|
custom.specs | List · single-line text | Specifications table | Name: Value per entry — e.g. Serving size: 2 capsules |
custom.directions | Multi-line text | ”How to use” row | Plain text |
custom.key_facts | List · single-line text | Key facts list | One short fact per entry |
custom.ingredients | Multi-line or rich text | Ingredients row | Your ingredient statement |
Any collapsible row can read a metafield. Set the row’s namespace and key
(e.g. custom / directions) and each product shows its own text, with the
written content as the fallback.
Collections
Collection banner
The collection template opens with an image banner that fills itself from the collection’s image, title, and description. Set those on the collection in admin and it’s done; override per placement if needed. It shows a soft gradient when no image exists, and is also available as an add-anywhere section.
Filters & sorting
Faceted filters and sorting are built in. Add filters in Shopify’s Search & Discovery app; a Color filter built from a product option renders as swatches automatically. You can also add content sections (banners, timers) above or below the grid.