Product page

The page where shoppers buy — your photos on one side, and a designed buy column on the other: the product name, the price, a niche info panel tailored to what you sell, your description and tabs, and the add-to-cart controls. Every preset recomposes this same page into its own buy ritual — a booking panel for services, a suitability panel for pet food, a seed-packet panel for gardening, a spec sheet for tools, a dosage panel for supplements — the layout ships ready; you only fill in the product metafields below.

• One designed column — vendor line, title, price and panel sit in a calm editorial rhythm, with your preset's signature stroke under the title.
• A niche panel that sells for you — a feeding guide, hardiness zone, specifications, or dosage — shown as one bounded card near the price where shoppers decide.
• A clean path to buy — options, quantity, and the add-to-cart button sit together at the end of the column; a sticky bar keeps "add to cart" reachable while scrolling on phones.

Try it

Pick a preset above the preview to see that niche's real buy ritual — the panel content, the signature seam, and the controls all switch to that preset's shipped composition over the same shared page. Edit the title or price, toggle the vendor line and unit price, and use the screen-size and light/dark buttons in the preview header.

←Product page — buy column

Show vendor

The small line above the product title. Comes from the product's Vendor field.

Product title

Price

Show unit price

Displays the per-unit price under the main price when the variant has a unit-price measurement (required for some EU categories).

Storefront preview

Kitchen design service

Uisce Design Studio

€500.00

Investment

€40,000+

Duration

6–20 weeks

Package

Quantity

The buy column, block by block

The product page is built from blocks you can reorder in the theme editor (Online Store → Customize → Products → Default product). The shipped order per preset is:

1. Title + vendor — the vendor renders as a small uppercase line above the title; the preset's signature stroke draws underneath.
2. Price — with an optional per-unit price (check the unit-price rules that apply to your market and categories).
3. The niche panel — one or more information blocks that merge into a single card (see the glossary below).
4. Description + tabs — your product description, then collapsible tabs (e.g. What's included, Our process, FAQ). Tabs with no content stay hidden on the storefront.
5. Options → quantity → Add to cart — the purchase controls sit together; the add-to-cart button is fixed as the last block so it can never be lost by reordering.

Niche panel blocks (glossary)

Gaoth, Talamh, Tine and Neart ship their panels pre-composed; Uisce's service ritual surfaces its numbers through the engagement stat row and booking panel instead of a metafield panel. All panel blocks read from product metafields so the panel always shows that product's data — the namespace is resolved automatically from your preset, nothing to configure:

Block	Preset	Shows	Metafields (namespace uisce_<preset>)
Life stage	Gaoth	Which pets the food suits	lifestage, feeding_amount
Feeding chart	Gaoth	Daily feeding guide rows	feeding_amount, feeding_frequency, lifestage
Hardiness zone	Talamh	Cold-hardiness rating	hardiness_zone_min, planting_window
Plant care	Talamh	Sow/position/spacing rows	spacing_cm, hardiness_zone_min, planting_window
Specifications	Tine	Spec-sheet rows	dimensions_mm, weight_grams, material, wattage, size, power_source
Cross reference	Tine	Compatible system/platform	battery_compat
Dosage	Neart	Dose, timing, cycle	dosage_per_kg, timing
Ingredient list	Neart	Active ingredients + amounts	ingredients, dosage_per_kg

A block whose metafields are empty renders nothing — the panel never shows blank cards. Consecutive panel blocks merge into one bounded card with the preset seam on its top edge.

Setting the metafields: create them once under Settings → Metafields and metaobjects (formerly "Custom data") → Products using the exact keys above, then fill the values per product. Type keys exactly — a misspelled key shows no panel and no error. Use these exact definition types: Integer for hardiness_zone_min, spacing_cm, weight_grams · Decimal for feeding_amount, dosage_per_kg · Multi-line text for ingredients · Single-line text for everything else.

Uisce's stat row reads different keys. The service ritual's Investment / Duration row comes from the uisce namespace (not uisce_<preset>): uisce.engagement_range and uisce.turnaround_time, both Single-line text (e.g. €40,000+, 6–20 weeks). A blank key hides its cell; when both are blank the whole row disappears — no error either way.

Deleted a panel by accident? Every panel block is in the picker: Add block in the Product section and choose it by name — it reconnects to the same metafields immediately.

Product question works differently. You add it yourself (Add block → Product question); no preset ships it pre-composed. It takes a heading and intro you type rather than metafields, so the empty-metafield rule above does not apply to it — once added, it always renders. It does share the bounded panel and merge behaviour, so it carries the preset seam and merges with an adjacent panel like any other block here. For the enquiry form itself, see Product questions and quote requests.

Section settings

Setting	What it does
Color scheme	The palette for the whole product section.
Media gallery layout	Thumbnails below the main photo, or in a column beside it (desktop).
Image aspect ratio	Natural, square (1:1), or portrait (2:3) crop for gallery images.
Show similar products when sold out	Renders a similar-products strip after the buy column when every variant is sold out — the disabled add-to-cart button stays in place.
Restock-date metafield key	Where the "back in stock" date is read from (default custom.restock_date). The editor shows this field only while Show similar products when sold out is on, but a configured date renders its restock banner on fully sold-out products either way.
Show unit price	Displays the per-unit price under the main price when the variant has a unit-price measurement.

Pre-order, payment and gift cards

• Pre-order — set the uisce.preorder metafield (boolean or a future date) and the add-to-cart button reads "Pre-order", with a message under it. The message falls back to your theme setting, then to a translated default — never hard-coded English. See the pre-order setup guide.
• Shop Pay Installments — renders through Shopify's native payment_terms under the buy buttons on eligible stores; it updates with the selected variant.
• Gift cards — gift-card products automatically show Shopify's native recipient form (send to a friend with a message and date); the shopper's typed values survive denomination changes.

Responsive & accessibility

• Single column on phones: gallery first, then the buy column; the sticky add-to-cart bar appears once the buy button scrolls off.
• Tap targets are at least 44×44 px; no horizontal scroll at 320 px.
• Heading order is H1 title → H2 blocks throughout (Lighthouse accessibility 100).
• Variant changes announce updated price and availability to screen readers; unavailable option combinations are visibly disabled.
• All five presets keep WCAG AA contrast in light and dark schemes; gallery/seam transitions respect reduced-motion.

Tips

• Fill the tabs, keep the description short. A two-sentence description plus What's included / Our process / FAQ tabs reads far better than one long page of text — and keeps the buy controls near the top.
• Set the panel metafields on your flagship products first. The niche panel is the strongest trust signal on the page; a pet-food product with life stage + feeding rows filled in reads instantly professional.
• Use a 3-option product to sanity-check variants. Options render as pills (≤ 6 values) or a dropdown (more); unavailable combinations disable automatically.