Appearance
Product Pages
The product page is where visitors decide to buy. You set it up in the theme editor by opening any product page and editing the Product section.
What it looks like
Here's the product section alongside its key settings. The left panel shows what you'll see in Customize, and the right shows the result on your storefront.
Product page preview
Settings
These settings live in the Product section in the theme editor. Open any product page in Customize to access them.
| Setting | What it does |
|---|---|
| Color scheme | Which of your four colour schemes the product page uses. |
| Media layout | How product images are arranged — thumbnails on the left, or thumbnails below the main image. |
| Image aspect ratio | The crop applied to product images in the gallery: natural (source ratio, the default), square (1:1), or portrait (2:3). |
| Show similar products when sold out | When every variant is sold out, renders a strip of similar products (from Shopify's recommendations engine) after the buy column — the disabled add-to-cart button stays in place. On by default. |
| Restock-date metafield key | The namespace.key the theme reads to display a countdown banner when a sold-out variant has a known restock date. Default: custom.restock_date. |
| Show unit price | Displays the per-unit price (e.g. €24.00 / 100 g) below the main price when the variant has unit-price measurement configured. Supports the EU Price Indication Directive's unit-price rules. On by default. |
Media layout options
You pick the layout in the Media layout dropdown:
- Thumbnails left — Small image previews sit to the left of the main image.
- Thumbnails below — Thumbnails appear underneath the main image. Works well with square product photos.
Image aspect ratio
The Image aspect ratio setting controls how product images are cropped in the gallery:
| Option | Ratio | Best for |
|---|---|---|
| Natural | Source ratio | Seed catalogs, pet photography — when each image's own proportions matter |
| Square | 1:1 | Product-shot catalogs, supplement bottles, hardware |
| Portrait | 2:3 | Clothing, service hero shots, vertical objects |
The default is Natural on every preset; the shipped templates do not override it, so change it per store if your catalog suits a fixed crop.
Variant picker — how styles are selected
The theme auto-selects the variant picker style based on the option type and the number of values:
- Option values with swatch data → swatches (circular color buttons). Swatches render when Shopify supplies swatch data on the option value — on the product (Admin → Products → [product] → edit the variant option), connect the option to a color category metafield so each value carries a color. The metafield definitions and entries themselves live under Settings → Metafields and metaobjects; no theme configuration is involved.
- More than 6 values → dropdown (a
<select>element). Best for long size runs (XS–5XL) or option lists where visual previews add no value. - 6 or fewer values → pills (small buttons with the option label).
You cannot manually select the style — the theme chooses it for you based on the option type and count.
Product blocks
Four primitives are fixed — the media gallery, Title, Price, and Buy buttons are static parts of the section, always present and never lost by reordering. Everything else is a block you add, remove, and reorder between them. (Recently viewed is its own section below the product section, added from the section picker, not the block picker.) Here is what each addable block does:
| Block | What it shows |
|---|---|
| Variant picker | Options like size or color — shown as pills, swatches, or a dropdown (auto-selected by theme) |
| Quantity selector | A number picker so visitors can buy more than one |
| Description | Your product description |
| Collapsible tab | A heading + rich-text body in a native expand/collapse row (add several for What's included / FAQ / Care) |
| Rating | A 5-star rating display with optional review count, read from the standard reviews rating metafields |
| SKU | The SKU code for the selected variant |
| Inventory status | "In stock", "Only 3 left", or "Sold out" |
| Share | Social sharing links |
| Separator | A thin horizontal rule between blocks (no settings) |
| Selling plan | Subscription and autoship options (if you use a subscriptions app) |
| Pickup availability | "Pickup available" with an expandable list of your pickup locations |
| Quantity pricing | A table of bulk-discount tiers from the variant's quantity price breaks |
| Combined listing | Cross-links to sibling products in a combined-listing group (e.g. Basic / Standard / Premium tiers) |
| Back-in-stock alert | An email signup form shown when the selected variant is sold out |
| Purchase reassurance | An icon + heading + supporting-text trust item (add several for shipping / returns / guarantee) |
| Policy acknowledgement | A checkbox the shopper ticks to acknowledge a policy before purchase |
| Product question | A no-login product question or quote-request form that emails product and selected-variant context to the merchant |
| Custom Liquid | A freeform block for trust badges, size guides, or anything else |
App blocks are also supported — blocks installed by Shopify apps appear in the same picker and slot into the same order.
Product questions and quote requests
Add the Product question block to the Product section, then set its heading to match the job you want it to do—for example, “Ask a question” or “Request a quote.” An optional rich-text introduction can set response-time or quote expectations.
The block submits through Shopify’s native contact form. Customers do not need a Shop account or Shopify Inbox sign-in, and the basic path works without JavaScript. It collects name, email, optional phone, and message. The merchant notification also includes the product title, absolute product URL, handle, current page URL, selected variant ID, and SKU when present.
Changing variant refreshes only the hidden product context; it does not erase anything the customer has typed. The block uses the same localized field labels and server-rendered error/success messages as the Contact page.
This is deliberately a question/quote path, not live chat or order lookup. Do not ask customers to enter private order information in the message.
Per-preset template block order
Each preset ships its own product template at listings/<preset>/templates/product.json (deployed to the store as the product template). You can override the order any time in the theme editor. The fixed primitives — gallery, Title, Price, Buy buttons — frame every composition; the shipped block order between them is:
| Preset | Shipped blocks (top to bottom) |
|---|---|
| Uisce | Service stats row → Description → Variant picker |
| Gaoth | Life stage → Feeding chart → Description → Nutrition / Care / Size tabs → Share → Selling plan → Variant picker → Quantity selector |
| Talamh | Hardiness zone → Plant care → Description → Planting window / Care / Season tabs → Share → Variant picker → Quantity selector |
| Tine | SKU → Inventory status → Specifications → Cross reference → Description → Specs / Compatibility / Parts / Safety tabs → Share → Variant picker → Quantity pricing → Quantity selector |
| Neart | Dosage → Ingredient list → Description → Ingredients / Usage / Routine tabs → Share → Selling plan → Variant picker → Quantity selector |
Product recommendations settings
Two filtering settings on the product-recommendations section control which products appear in the strip. (The section's remaining settings — color scheme, heading, intent, number of products, columns, secondary image, vendor line, quick-buy — are display controls you'll see alongside them in the theme editor.)
Hide sold-out products (checkbox, default: on) — When enabled, sold-out items are filtered out of the recommendations strip on the client side, so visitors only see in-stock items.
If you run a store where back-in-stock signups are a meaningful conversion path (limited drops, bundle restocks), turn this off — sold-out items stay visible and can route shoppers to product pages where your Back-in-stock alert block (composed separately on the product, see below) offers the signup. The sold-out card itself does not create a signup form.
Limit to a collection (collection picker, default: empty) — Restricts the recommendation strip to products inside a specific collection. When empty, recommendations draw from your entire catalog via the Shopify related-products endpoint.
Per-preset examples:
- Uisce (Services): Scope "Related services" to the "Professional services" collection so ad-hoc services don't appear as cross-sell on commercial fit-out contracts.
- Gaoth (Pets): Scope "You may also like" on a cat-food product to the "Cat food" collection — prevents dog food from appearing on cat product pages.
- Talamh (Garden): Scope to "In-season seeds" during planting season to keep off-season stock out of the cross-sell.
- Tine (Hardware): Leave empty — cross-category discovery is a conversion lever for tools.
- Neart (Wellness): Scope the recommendations strip on a supplement product to a supplement-stack collection so your hero bundle pages surface matching stack members.
Back-in-stock alerts
When the selected variant is sold out, the back-in-stock block shows an email signup form. Submissions go through Shopify's native contact form and arrive as email notifications at your store's Sender email address (Shopify Admin → Settings → Notifications) — the theme contacts no external endpoints, needs no API keys, and works without JavaScript. Each notification includes the customer's email, the product, and the selected variant, so you can reply directly when stock returns.
The block has a single setting — Enable back-in-stock signup — and inherits Shopify's standard contact-form privacy posture. If you want signups to reach a marketing tool (Klaviyo, Omnisend, …), use that tool's own signup form or Shopify app instead of this block; the theme deliberately does not post customer emails to third parties.
OOS cross-sell behavior
When every variant on a product is sold out and Show similar products when sold out is enabled, a strip of similar products renders after the buy column — the disabled add-to-cart button stays in place, so shoppers can see the sold-out state and the alternatives together. The strip loads its own script and styles, so it works even when your product page has no separate Product recommendations section.
Under the hood, the strip fetches the theme's product-recommendations section file through Shopify's recommendations endpoint and renders the theme's own product cards. That fetch uses the strip's fixed parameters — related intent, 4 cards, sold-out items always excluded, and the fetched section heading hidden in favour of the strip's own "Similar products available" heading. Everything else renders with the section file's defaults (4 columns, no quick-buy button, no vendor line). If you also compose a separate Product recommendations section on the page, its instance settings — heading, intent, limit, columns, quick-buy, Hide sold-out products, Limit to a collection — apply only to that section, not to this strip.
If you want visitors to submit a back-in-stock signup as well, compose the back-in-stock block too: it renders wherever it sits in your block order (it shows whenever the selected variant is unavailable), independently of the cross-sell strip.
Restock date banner
When a fully sold-out product has a restock date set in its metafield, the theme displays a banner in the cross-sell area after the buy column:
Expected back in stock · 03 : 12 : 45 (a live countdown — days : hours : minutes)
The banner renders a localized "Expected back in stock" label with a live compact countdown to the restock date, computed in the visitor's browser. Before scripts load (and for no-JS visitors) it shows the localized date itself instead. When the date passes, the countdown hides on its own.
Setting up restock dates:
- Go to Admin → Products → [sold-out product] → Metafields
- Add
custom.restock_date(date type) - Set the expected restock date
If the product-level metafield is empty, the theme checks the variant's metafield before concluding empty. This supports per-variant restock dates (different sizes restocking on different dates).
If your catalog uses a different metafield namespace (e.g. global.restock_date), update the Restock-date metafield key setting accordingly.
Unit price
When Show unit price is on and a variant has unit-price measurement configured (e.g. 100 g, 1 L, 1 m), the product page displays the per-unit price below the main price:
€18.00 €24.00 / 100 g
The theme can display unit pricing wherever a variant carries a unit-price measurement. Whether unit pricing is required for your store depends on your market, product categories, and local rules (in the EU, the Price Indication Directive 98/6/EC as amended by (EU) 2019/2161 governs it, with member-state exceptions) — check the rules that apply to you. With no measurement set on a variant, the setting renders nothing.
To configure unit pricing, open Admin → Products → [product] → the variant, and fill in its unit price measurement fields (Shopify's variant editor labels them under Pricing). Once a measurement is set, the theme renders the per-unit line automatically.
Selling plan block settings
The selling plan block has two display controls for subscription offerings:
Show save badge (checkbox, default: on) — Displays a save badge on every subscription plan with a discount, worded by the plan's price-adjustment type in Admin → Subscriptions: a percentage adjustment renders "Save X%", and a fixed-amount adjustment renders the money-formatted amount (e.g. "Save €5.00"). Turn this off if your subscription offerings are non-discounted — leaving it on with a zero adjustment renders no badge.
Show cost per delivery (checkbox, default: on) — Displays the per-delivery price below the save badge. Useful for multi-delivery plans (e.g. "Every 2 months — 3 deliveries per order") where the per-shipment cost differs from the order total. Turn this off for single-delivery monthly subscriptions where "per delivery" equals the headline price.
Gallery behavior
The product gallery has four interactions:
- Fullscreen lightbox — clicking or tapping a gallery image opens a full-screen native dialog viewer with previous/next navigation; close with Escape or the close button. On touch devices, zooming inside the open viewer uses your browser's own pinch gesture.
- Deep link to a specific image via the
?media=<n>query parameter (1-based) —?media=2opens the gallery on the second image, and browsing thumbnails keeps the URL updated so any link you copy reopens the same image. - Variant-driven image switch — selecting a variant activates that variant's assigned featured image in the gallery (assign images to variants in Admin → Products → Media). Variants without an assigned image leave the gallery where it is.
- Touch swipe — on touch devices, a single-finger horizontal swipe on the main image area moves to the next or previous image. The listeners are passive (they never block scrolling), swipes shorter than 50 px are ignored, and the gallery stops at the first/last image rather than wrapping.
Sticky add-to-cart bar
The sticky add-to-cart surface is dual-track — two <sticky-atc> elements share the same settings, and at most one shows, depending on viewport (neither shows between 750–1399 px):
- Bar (
data-mode='bar', phones ≤ 749 px) — a bottom bar with a product thumbnail, the current price, an optional quantity stepper (Show quantity), and an add-to-cart button. - Dock (
data-mode='dock', wide desktops ≥ 1400 px) — a floating side dock with the same essentials but no quantity stepper. - In between, desktop layouts rely on the sticky info column (a CSS behaviour from ≥ 1024 px), so neither element shows.
Both watch the in-page buy button with an IntersectionObserver and hide whenever it is visible, step aside while the cart drawer is open (the cart drawer's open/close events are the only drawer coordination), and follow the in-page variant selection — picking a variant updates their price and availability.
Combined listing
When a product belongs to a combined-listing group, the block renders cross-product option pills — each pill is a link straight to the sibling product that carries that option value, with the current one marked selected — followed by a chip line:
"You're viewing [child-title]" · See related options (a link to the parent listing)
Nothing expands in place; the pills and the chip are plain navigation. This suits parent–child relationships such as service tiers (Basic / Standard / Premium) or supplement bundles with different formulations.
Combined-listing groups are created with Shopify's Combined Listings app (a Shopify Plus feature) on the parent product. See Shopify's combined listings documentation for bulk setup via the Admin API.
Breadcrumbs and JSON-LD
Breadcrumbs emit schema.org BreadcrumbList microdata inline in the breadcrumb markup, with absolute URLs — which is what Google Rich Results reads. No configuration needed: the layout renders breadcrumbs globally on every page, product pages included.
Before you go live
Run through these checks on at least one product per preset before launching:
- [ ] Product gallery renders all images; clicking one opens the fullscreen lightbox with previous/next; Escape closes it
- [ ] Gallery deep link: open
{store-url}/products/{handle}?media=2— confirm the second image is active - [ ] Variant deep link: open
{store-url}/products/{handle}?variant=<id>— Shopify preselects that variant and the page reflects it - [ ] Combined-listing chip renders on products that are part of a combined-listing group
- [ ] Sticky add-to-cart bar appears on scroll past the main buy button, disappears when buy button is visible
- [ ] Back-in-stock signup form renders when a variant is unavailable; email field submits successfully
- [ ] OOS cross-sell strip renders on sold-out products
- [ ] Restock-date banner renders with day-count countdown (if
custom.restock_dateis populated) - [ ] Unit price renders under the main price for variants with unit-price measurement
- [ ] Selling-plan save badge renders on discounted subscriptions
- [ ] Cost-per-delivery renders on multi-delivery selling plans
- [ ] Breadcrumb
BreadcrumbListmicrodata emits absolute URLs — verify via Google Rich Results Test - [ ] No accessibility violations on the product page (run Lighthouse → Accessibility in DevTools)
- [ ] Lighthouse Performance ≥ 0.6 desktop and mobile
- [ ] Lighthouse SEO = 1.00 desktop
Per-preset recommendations
| Preset | Niche | Recommended setup |
|---|---|---|
| Uisce | Services | Populate custom.restock_date on sold-out service slots. Provision combined-listing groups for service tiers (Basic / Standard / Premium). Turn off Show unit price — services do not have unit measurement. |
| Gaoth | Pets | Turn on the back-in-stock signup — pet owners re-order on schedule and notifications convert well (submissions arrive by email at your store's Sender email address — Settings → Notifications; connect a marketing tool via its own signup form or Shopify app if you automate them). Populate restock dates on out-of-stock flavors. Scope product recommendations to the species-specific collection (cat vs dog). Keep Show unit price on for per-kg / per-lb labeling. |
| Talamh | Garden | Populate custom.restock_date on seasonal seeds with known availability windows. Scope recommendations to "In-season seeds" during planting season. Combined listings work well for "Heritage seed collection" parent with variety children. Keep Show unit price on — per-gram seed pricing is a differentiator. |
| Tine | Hardware | Keep Show similar products when sold out on — tool buyers substitute readily. Populate restock dates on high-turnover power tools. Combined listings work well for "Tool kit system" parent with Starter / Pro / Master tiers. |
| Neart | Wellness | Populate restock dates on supplement restocks — wellness buyers return to specific formulations. Turn on Show save badge and Show cost per delivery for bundle subscriptions. Combined listings work well for "Immunity stack bundle" parent with Recovery / Immunity / Sleep children. |
Related guides
- Product page support — diagnostics and troubleshooting
- Translations
- Theme settings
- Color schemes