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: portrait (3:4), square (1:1), natural (source ratio), or landscape (16:9). |
| Show similar products when sold out | When every variant is sold out, replaces the buy-button area with a strip of similar products sourced from Shopify's recommendations engine. 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. Required for EU UCPD / Omnibus compliance. 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 |
|---|---|---|
| Portrait | 3:4 | Clothing, service hero shots, vertical objects |
| Square | 1:1 | Product-shot catalogs, supplement bottles, hardware |
| Natural | Source ratio | Seed catalogs, pet photography — when each image's own proportions matter |
| Landscape | 16:9 | Wide product groups, multipack scenes |
Per-preset defaults: Uisce — portrait; Gaoth — natural; Talamh — natural; Tine — square; Neart — square.
Variant picker — how styles are selected
The theme auto-selects the variant picker style based on the option type and the number of values:
- Color option type → swatches (circular color buttons). To get swatches, use a Color option type in your product and populate color metafields (Admin → Settings → Custom data → Products →
shopify.color-swatches). - More than 8 values → dropdown (a
<select>element). Best for long size runs (XS–5XL) or option lists where visual previews add no value. - 8 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
You build the product page by adding, removing, and reordering blocks. Here is what each block does:
| Block | What it shows |
|---|---|
| Title | The product name |
| Price | Current price, compare-at price, and sale badge |
| 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 |
| Buy buttons | "Add to cart" and "Buy it now" buttons |
| Description | Your product description |
| SKU | The SKU code for the selected variant |
| Inventory status | "In stock", "Only 3 left", or "Sold out" |
| Share | Social sharing links |
| Selling plan | Subscription and autoship options (if you use a subscriptions app) |
| Combined listing | A chip linking 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 |
| Recently viewed | A strip of products the current visitor has recently browsed |
| Custom Liquid | A freeform block for trust badges, size guides, or anything else |
Per-preset template block order
Each preset ships a templates/product.<preset>.json that reorders blocks to match the niche. You can override the order by editing the template in the theme editor.
| Preset | Block order (top to bottom) |
|---|---|
| Uisce | Gallery → Title → Price → Service-scope selector → Description → Selling plan → Combined listing → Back-in-stock → Similar services |
| Gaoth | Gallery → Title → Flavor/variant picker → Price → Selling plan → Back-in-stock → Description → Frequently bought together |
| Talamh | Gallery → Title → Variety picker → Price → Description → Cultivation notes → Selling plan → Similar seeds |
| Tine | Gallery → Title → Price → Variant picker → Quantity pricing table → Add-to-cart → Description → Tool-kit system (combined listing) → Compatible tools |
| Neart | Gallery → Title → Price → Stack picker (variant) → Selling plan → Description → Lab results → Combined listing → Recommended stack |
Product recommendations settings
The product-recommendations section has two settings for shaping the cross-sell strip:
Exclude sold-out products (checkbox, default: on) — When enabled, sold-out items are filtered out of the recommendations strip on the client side. The Shopify recommendations algorithm still trains on your full catalog; your visitors only ever 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 will trigger your back-in-stock signup form and may convert better than a fresh product the visitor has not yet researched.
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
The back-in-stock block ships with two postures:
Default posture: When the webhook URL is empty, customer emails are submitted to your Shopify admin inbox as contact-form submissions. No additional configuration required. Shopify's standard privacy posture applies.
Webhook posture: Paste a CRM endpoint into the Back-in-stock webhook URL block setting to forward submissions to your marketing automation tool. The theme posts the submitter's email, the product handle, the variant ID, and the restock date (if the product metafield is populated).
Example endpoints:
- Klaviyo:
https://a.klaviyo.com/api/v1/catalog-item/<item-id>/subscribe?api_key=... - Omnisend:
https://api.omnisend.com/v5/events - Your own endpoint:
https://example.com/api/back-in-stock-hook
Privacy: When you enable the webhook, you become the data controller for submitted emails. Update your privacy policy to disclose the third-party recipient. The theme adds a configurable privacy note under the form input — translate it via the blocks.back_in_stock.privacy_note locale key.
OOS cross-sell behavior
When every variant on a product is sold out and Show similar products when sold out is enabled, the buy-button area is replaced with a strip of similar products sourced from Shopify's recommendations endpoint. Each card in the strip has a quick-buy button and a price tag — visitors arriving on a sold-out product always have an adjacent option to buy.
If you want visitors to submit a back-in-stock signup rather than navigate to a similar product, you can have both: leave Show similar products when sold out enabled and also keep the back-in-stock block enabled. Both surfaces render, with the cross-sell above and the signup form below.
Restock date banner
When a sold-out variant has a restock date set in its metafield, the theme displays a banner above the disabled buy button:
"Back in stock in 12 days (around 5 May 2026)"
The day count localises through CLDR plural forms — Arabic, Polish, Russian, Welsh, and Lithuanian visitors see grammatically correct plurals.
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
This is an EU consumer-goods compliance requirement (UCPD + Omnibus Directive) for stores selling to EU/EEA customers. Turn this off only if your catalog is outside EU/EEA and the per-unit display is redundant. Leaving it on is safe — the setting renders nothing if no unit price measurement is set on a variant.
To configure unit pricing, go to Admin → Products → [product] → Variants → [variant] and set the Weight and Unit price measurement fields.
Selling plan block settings
The selling plan block has two display controls for subscription offerings:
Show save badge (checkbox, default: on) — Displays a "Save X%" badge on every subscription plan with a discount. The percentage is computed from the plan's price adjustment in Admin → Subscriptions. Turn this off if your subscription offerings are non-discounted — leaving it on with a 0% discount 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 several interaction modes:
- Hover zoom (desktop ≥ 1024 px) — cursor-tracked magnification over the active image; respects
prefers-reduced-motion. - Click zoom (mobile and tablet) — tap opens a full-screen viewer with pinch-to-zoom and pan; Escape or the back button closes it.
- Deep link to a specific image via
#media-<index>hash — share a link that opens the gallery at a specific image. - Crossfade transition between gallery items — respects
prefers-reduced-motion: reduce(instant switch when reduced motion is set). - Swatch hover-preview — hovering a color swatch updates the gallery to show that variant's images without committing the selection. Touch devices skip the hover preview and go straight to selection.
Sticky add-to-cart bar
Scrolling past the main buy button reveals a sticky bar at the bottom of the viewport containing the product title, active variant, price, quantity stepper, and add-to-cart button. The sticky bar syncs variant selection bi-directionally with the in-page buy button. It hides automatically when the in-page add-to-cart button is visible so the two do not appear simultaneously.
Combined listing
When a product belongs to a combined-listing group, the variant picker shows a chip above the options:
"You're viewing [child-title]. See [count] more options"
Clicking the chip opens a dropdown listing the other products in the group. This is useful for products with parent–child relationships such as service tiers (Basic / Standard / Premium) or supplement bundles with different formulations.
To create combined-listing groups: Admin → Products → [parent product] → Organization → Combined listings → Add. See Shopify's combined listings documentation for bulk setup via the Admin API.
Breadcrumbs and JSON-LD
Breadcrumbs emit BreadcrumbList JSON-LD with absolute URLs, which is required for Google Rich Results. No configuration needed — breadcrumbs are always emitted when the breadcrumb snippet is included in a product template.
Before you go live
Run through these checks on at least one product per preset before launching:
- [ ] Product gallery renders all images; zoom works (hover + click + pinch on touch)
- [ ] Gallery deep link: open
{store-url}/products/{handle}#media-2— confirm the third image is active - [ ] Variant picker reflects URL query params (
?variant=<id>) on load - [ ] 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 JSON-LD 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 | Wire the back-in-stock webhook to Klaviyo — pet owners re-order on schedule, back-in-stock notifications convert well. 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 EU compliance and 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