Product pages

Product pages use the **Main product** section plus optional **Related products**, **Recently viewed**, FAQ, and CTA sections. Assign alternate templates in Shopify admin → Products → Theme template.

Templates

• **Default product** — hybrid retail and service buy box.
• **product.service** — Book-first layout with service chips, timeline, specialist card, prep/aftercare tabs, and before/after gallery driven by product metafield `custom.transformations` (hidden when empty).
• **product.retail** — Size chart, inventory urgency, payment icons, and thumbnail gallery.
• **product.gift** — Gift card recipient form and share emphasis.

Tag bookable services with **type:service**. The template changes layout defaults; the tag turns on Book-first behavior.

Retail vs service

Service **Add to cart** is off by default; turn on **Show add to cart on service products** when you sell deposits or kits from the same PDP. When Add to cart is hidden, retail-only actions stay off too (pickup, payment terms, inventory/SKU rows, dynamic checkout, and sold-out notify). For retail subscriptions, add a **Selling plan** block (it is not in the retail template by default).

Media layout

On desktop, choose media position (left/right), column size, and gallery layout (carousel, stacked, thumbnails, or collage). Turn on **Hide other variants’ media** to filter assigned variant images while keeping unassigned lifestyle shots visible. To show several images for one color, set those images’ **alt text** to the same value as the variant’s featured image (for example `Black`). Multi-image galleries show previous/next controls and a live “media X of Y” status.

Buy-box blocks

Reorder blocks for price, inventory, size chart, collapsible rows (optional none / bottom / full border and corner radius), icon with text, trust strip, availability note, pickup, share, and payment icons under Add to cart. Variant pills show the selected value and mark sold-out options clearly.

Size charts (branded retail)

For apparel and branded merch, open the product template → **Size chart** block. A sample XS–XXL table ships in **Size chart content**—edit the numbers to match your brand. Optionally add a heading, intro, and how-to-measure image. Wide tables scroll horizontally on mobile with a short hint for shoppers.

For multi-brand catalogs, assign a Shopify **page** on the block or define product metafield **custom.size_chart** (page reference). Precedence: product metafield → block page → block chart content. Size chart links do not appear on service products. Use the **product.retail** template for clothing PDPs.

Service product pages

On **product.service** (with tag **type:service**), the buy box leads with booking—not cart. Expect:

• **Starting at** pricing by default, with a short note that the final price is confirmed at booking.
• Labeled **duration** and healing chips, plus a prep teaser when **prep_instructions** is set.
• **Suitability** (contraindications) and **Policies** (deposit note) callouts with clear headings.
• Richer **specialist** card (role, specialty, profile and book links) and **location** context from the specialist’s studio when available.
• **Book consultation** labeling when **consultation_required** is true.
• **Related aftercare** from **custom.service_pairing** (other service products are skipped so pairings stay retail/aftercare).
• Booking **app blocks** under a labeled mount after the form; **Service booking fallback URL** when Theme settings booking is empty or set to an external scheduler.

Service metafields

Define these product metafields in Admin (namespace **custom**) when you want richer service PDPs:

• **duration_minutes** (integer) — session length chip.
• **healing_days** (integer) — healing chip.
• **consultation_required** (boolean).
• **specialist** (metaobject → studio_specialist).
• **session_timeline** (multi-line text) — expect timeline steps.
• **contraindications**, **deposit_note**, **consent_notice** (rich text).
• **prep_instructions**, **aftercare_instructions** (rich text) — prep and aftercare tabs.
• **service_pairing** (list of products) — complementary aftercare on the PDP and in cart.
• Tag **requires_consent** to require a checkbox before Book or Add to cart.

Sticky actions on mobile

The Main product sticky bar appears on small screens when the primary Add to cart or Book control scrolls out of view. Modes: **Auto** (Book when service Add to cart is hidden), **Buy**, **Book**, or **Dual**. If your template also includes the sticky booking CTA strip, the product bar sits above it. Open the cart drawer and both stickies hide so they do not block checkout. Chat or cookie widgets that cover the bottom can be cleared with Custom CSS: `--sa-bottom-chrome-offset: 4.5rem`.

Search structured data

Turn on **Show Product JSON-LD** for Product markup (offers on retail; services omit cart-style stock claims). Turn on **Show Service JSON-LD** for bookable **type:service** products (price range and booking channel, without inventory In stock labels). Star ratings appear only when **reviews.rating** and **reviews.rating_count** are valid. Turn Product JSON-LD off if a reviews app already outputs the same markup.