🔒 View-only guide — tap the i icons to learn what each setting does. The real controls live in your theme editor.
The product page template: image gallery on the left, product info on the right (stacked on mobile). It also takes blocks from the sidebar — Detail Row (accordion rows like Composition, Care, Shipping) and Size Guide Entry (the size-chart content).
Image Gallery
i
Desktop gallery layout — Mosaic arranges photos in a 2×2-style grid; Stack lists them full-width, one under another. Mobile and tablet always use a single-column swipe gallery regardless.Gap between images — 0 gives seamless edge-to-edge photos.
Desktop gallery layout
Mosaic Stack
Info Section Padding
i
Inner breathing room for the product info column — the right side on desktop, below the gallery on mobile. Vertical and horizontal, set separately per device.
Product Title
i
The product's name — color, text-style preset, desktop/mobile sizes, transform, and letter spacing. The same control set repeats for most text elements in this panel.
Text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Text transform
None Uppercase Lowercase
Product Price
i
The price line. The extra control here: Sale price color — used when a compare-at price is set in Shopify, so the discounted price stands out (red by default).
Text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Text transform
None Uppercase Lowercase
Variant Picker — Label
i
The little labels above the variant options — "Color", "Size" — and the selected value next to them (the "Black" in "Color: Black").selected value separately so it can stand out from its label.
Show label on color option
Show label on size & other options
Label text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Selected value text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Selected value text color
Borders
i
One shared border look for the variant pills, the size dropdown trigger, and related picker elements: color, width (0 removes borders entirely), and corner radius (0 = sharp, 30 = pill-shaped).
Variant Picker — Color Option
i
How shoppers pick a color.Layout — Pills : a swatch dot + color name in a pill (stacked vertically or in a row). Image : small photo tiles of each colorway (their width and aspect ratio are below).Pill style — Boxed (bordered pill) or Underline (borderless; an animated line marks the selected color — its color/thickness follow).Image tiles — the line under the selected/hovered tile.
Pill orientation
Vertical Horizontal
Swatch shape
Circle Square
Pill style
Boxed Underline
Pill text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Selected pill background
Selected pill border
Tile aspect ratio
Square (1:1) Portrait (3:4)
Underline color (image tiles)
Variant Picker — Size & Other Options
i
For sizes and any non-color option.Layout — Pills (the standard row of buttons) or Dropdown (collapses options into a select — its trigger border, panel background, hover row, and selected-row colors are below).Pill style — Boxed or Underline, same idea as colors.Sold out tag — the "SOLD OUT" marker on unavailable sizes, with its own text style and color.
Pill style
Boxed Underline
Dropdown trigger border (open)
Dropdown panel background
Row hover background
Selected row text color
Sold out tag text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Sold out tag text color
Add to Cart
i
The page's main button.Labels — the resting text, the sold-out text, and the brief "Adding..." state while the item goes in.Button style — Primary or Secondary use your global button styles; Custom switches to the color set below (background/text at rest and on hover, plus the grayed-out sold-out colors).
Button style
Primary Secondary Custom
Text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Text transform
None Uppercase Lowercase Background (hover)
Text color (hover)
Sold out background
Sold out text color
Buy It Now Button
i
An optional second button that skips the cart and jumps straight to checkout — OFF by default. Same controls as Add to Cart: label, Primary/Secondary/Custom style, text styling, padding, and custom colors (Secondary-style outline by default so it plays second fiddle to Add to Cart).
Button style
Primary Secondary Custom
Text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Text transform
None Uppercase Lowercase Background (hover)
Text color (hover)
Payment Buttons
i
Show dynamic payment buttons — adds the express checkout buttons (Shop Pay, PayPal, Apple Pay, Google Pay…) for whatever is enabled in your Shopify payment settings. They appear with their own branding, which is why many minimal stores leave this off.
Show dynamic payment buttons
Description
i
The product description from your Shopify product.Line height (the value is ×0.1 — 17 means 1.7).Clamp long descriptions — collapses long text after N visible lines behind a "Read more" link, with editable Read more / Read less labels.
Text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Clamp long descriptions with read-more
Detail Accordion
i
The collapsible info rows under the description — Composition, Care, Shipping and so on. The rows themselves are Detail Row blocks you add in the sidebar; these settings style them all: the divider between rows, row padding, the label's typography, and the expanded content's typography (line height ×0.1).
Row divider color
Label text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Label text transform
None Uppercase Lowercase Content text color
Content text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text
Image Lightbox
i
Clicking any product image opens it fullscreen — navigate with arrows, dots, or swipe. Background color : pure white or pure black feel the most cinematic; the × close button should contrast with it.
Enable fullscreen image viewer
Close button color
Lightbox — Navigation Arrows
i
Prev/next arrows at the lightbox edges (hidden automatically when there's only one image). Fine-tune the color, icon size, stroke weight (lower = more delicate lines), and the rest opacity — how faded the arrows sit until hovered.
Lightbox — Progress Dots
i
Tiny dots at the bottom of the lightbox showing which photo you're on. Control their color, size, spacing, the inactive dots' opacity, and a thin border around each dot — useful when the fill blends into the background.
Mobile Gallery Navigation
i
Optional helpers for the mobile swipe gallery: arrows at the left/right edges and progress dots at the bottom. Both OFF by default — swipe alone keeps the gallery cleanest. Their colors follow the lightbox settings above.
Show arrows on mobile gallery
Show progress dots on mobile gallery
Size Guide
i
Adds a "Size guide" row to the detail accordion that opens a measurement drawer.Size Guide Entry blocks in the sidebar, matched to products by tag. Here you control the row's label, the little ruler icon , and whether the row sits above or below the other accordion rows. Its appearance follows the Detail Accordion settings.
Row position
Above other rows Below other rows
Size Guide — Drawer Style
i
Styles the size-guide drawer itself: its background and dividers, the title's typography, the body text, and the measurement table's header row (background + text).
Drawer background
Divider/border color
Title text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Title text transform
None Uppercase Body text style
Eyebrow Text Heading Text Subheading Text Body Text Button Text Table header background
Table header text
Wishlist
i
A wishlist button on the product page — the same synced wishlist system as the header, drawers, and grid. Icon style (match your header's choice), the resting color, the filled color once the product is saved, and its size.
Icon style
Heart Star Bookmark Diamond Active (filled) color
App Blocks
i
Where third-party app blocks (reviews, upsells, badges…) render on the product page: Below product (full-width), Below add-to-cart (inside the info column), or Inside the details accordion . Change this if an installed app appears in an awkward spot.
App block position
Below product (full-width) Below add-to-cart (in form column) Inside details accordion