Skip to content

The product page

The product template is built from blocks, in the order you choose. Seventeen blocks ship with the theme, plus the Separator block and any app blocks you add. Open a product in the theme editor and you are editing the template for every product that uses it — with the important exception that values connected to a metafield are per product.

You can also create a second product template (Online Store → Themes → … → Edit code is not needed: use Add template on the Templates tab in the editor’s page selector) and assign it to some products — for example one template with engraving for personalised pieces and one without.

The template also ships with a Product recommendations section under the product — remove it, or switch it to Complementary, from the editor. The cart page ships with one too.

Setting Notes
Media width on desktop Small / Medium / Large.
Keep product info in view on scroll Desktop only. The info column stays in view while the gallery scrolls past. Worth turning off if your info column is longer than the gallery.
Spacing between blocks 0–48 px. Add a Separator block where one gap should differ.
Setting Notes
Show “View in your space” (AR) button For products with a 3D model. Appears only on phones that support augmented reality.
Start on the 3D model When the product has a 3D model, show it first so customers can rotate it.
Transition Slide or Fade.
Media frame Adapt to first media (uses the first media’s shape for every slide), Square, Portrait 4:5, Landscape 4:3.
Image fit Fill frame (crop) or Show whole image. Use Show whole image if your products are shot at different proportions.
Desktop gallery layout Carousel with thumbnails, Grid (first image large), or One column. Phones always show a swipeable carousel.

Clicking an image opens a full-screen zoom with its own thumbnails and arrows. Videos and 3D models sit in the gallery alongside the photographs.

Show sticky add to cart bar puts a bar at the bottom of the screen once the main button scrolls out of view, with its own Bar color scheme. On a long product page — and Strata’s product pages are long by design — this is usually the difference between a page that converts and one that reads nicely.


Size: Small / Medium / Large. One per page.

Stars and the review count, read from the standard reviews metafields (reviews.rating and reviews.rating_count) that every reviews app fills in — so the rating sits where you put the block, in the theme’s own style, without the app’s widget. Products without a rating show nothing. The same numbers feed the stars on product cards (Theme settings → Product cards → Show rating) and the AggregateRating in the page’s structured data.

  • Show review count — “23 reviews” after the number.

Show tax and shipping note. Unit prices, sale prices and “Sold out” are handled automatically. Shop Pay Installments appear with the buy buttons, not here.

No settings — it draws the badges you set up in Theme settings → Product cards → Badges: sale, sold out, New (by tag) and Made to order.

A short line of your own. Text and Style: Body, Muted or Uppercase label. Several allowed, so this is the block for a one-line promise above the price.

The core of the page: options, quantity, add to cart.

Setting Notes
Show quantity selector
Show dynamic checkout buttons Shows the customer’s preferred payment method, like Shop Pay or Apple Pay, for a faster checkout.
Add to cart button style Primary or Secondary. The “Buy it now” button takes the other style.
Show Shop Pay Installments message Appears when Shop Pay Installments is available for the store.
Show gift card recipient form Gift card products only: lets customers send the card to someone on a chosen date.

Options whose values have swatches — or an option named Color — are drawn as swatches, in the shape set in Theme settings → Product cards. Unavailable combinations are shown as unavailable rather than hidden, so a customer can see that the size exists in another colour.

A choice that is not a variant — a finish, an engraving, a gift note. It is added to the order as a line item property and does not change the price.

Setting Notes
Label Also the name of the property on the order.
Style Buttons, Dropdown, Text field, Multi-line text field.
Values Buttons and dropdown: comma separated. The first one is preselected.
Placeholder, Help text
Maximum characters Text fields. 0 = no limit.
Required Text fields. Add to cart is blocked until it is filled in.

With a text style, the Live preview on the photo settings turn this block into live personalization — see Live personalization.

Several Custom option blocks are allowed. Each one becomes its own line on the order, and the values appear in the cart, the order confirmation and the packing slip.

A small “Size guide” button beside the option it explains (Option it explains, e.g. Size), or under the options on products without that option, opening a side panel. Three parts, in this order, each optional — with none of them filled in the button stays hidden:

  • Per-product metafield — the product metafield (namespace.key, by default custom.size_guide, rich text or plain text) with that product’s own measurements. Create the definition in Settings → Custom data → Products, fill it in per product, and the panel shows it first; products without a value skip this part.
  • Text — rich text shown on every product, after the per-product part.
  • Page — your store-wide guide.
  • Show ring size conversion table — the table built into the theme: inside diameter and circumference in millimetres with the EU, US and UK sizes that correspond to them. Table heading names it.

Button label and Panel heading are yours to word.

Setting Notes
Heading Default “Buy more, save more”.
Tiers One per line: minimum quantity, then percent off — 5: 10 means 10% off from 5 items.
Note Default “Discount applied automatically at checkout.”

Important: this block displays the tiers. Create a matching automatic discount in Discounts so checkout actually applies it. Quantity price breaks from a B2B catalogue replace these automatically, so a B2B store does not need the tiers filled in.

Whether the selected variant is ready to ship or made to order, when it ships, and the timeline. Full chapter: Made to order.

Two more states come from metafields named in Theme settings (Production for the release date, Product cards → Badges for the edition):

  • Pre-order — while the product’s release date (custom.release_date) is still ahead, the block shows the Pre-order label, the day it ships, and a timeline counted from that day; product cards show “Pre-order · ships 12 Dec”. On the release day the stock takes over again.
  • Editions — Show the edition adds “Edition of 12”, “3 of 12” or “One of a kind” from custom.edition_size / custom.edition_number; the same words appear as a badge on cards.

The material or finish the customer has selected: photograph, description and key facts. Full chapter: Material guide.

Six rows of label and value, each row reading a product metafield named in its settings. Full chapter: Spec sheet.

A scale drawing of the product beside something everyone owns. Full chapter: Size reference.

No settings. Shows where the selected variant can be picked up, and reloads when the variant changes. It appears only when local pickup is set up for a location in Settings → Shipping and delivery; otherwise the block takes no space at all.

The product description from the admin. No settings — style it in the admin’s rich-text editor.

Heading, Content, Content from a page (shown after the text), Open by default. Several allowed: materials and care, shipping and returns, how it is made.

Content from a page is the one to use for text that is the same on every product — write it once as a page, point every product template at it.

No settings. Copies the product’s URL, and uses the device’s native share sheet where there is one.

A Line with space above and below, or Space only with an exact height. The way to group blocks into visual sets without changing Spacing between blocks for the whole page.

Liquid code. For app snippets or code of your own.

Apps that offer a product-page block appear in the block list. They are placed and reordered like any other block.


What the three presets do, and why:

Strata — Badges, Title, Price, Variant picker & buy buttons, Custom option (engraving with live preview), Production status, Size reference, Material card, Description, Collapsible rows, Share.

Halo — Badges, Title, Price, Custom option (engraving, previewed on the photograph), Variant picker & buy buttons, Production status, Material card, Size reference (next to a coin), Description, Collapsible rows for ring sizing, care and shipping, Share. The engraving field comes before the buy button because in jewellery the words are the purchase.

Plinth — Badges, Title, Price, Spec sheet (material, dimensions, weight, year, edition — read like a wall label), Variant picker & buy buttons, Production status, Size reference (next to a hand), Material card, Description, Collapsible rows for provenance, care and crating. The gallery starts on the 3D model, and there is no quantity selector: most works exist once.

The principle: whatever question your customers ask most goes above the add-to-cart button. Everything else goes below it.