Product page
The product page is the Product information section of the product template, followed by Related products, Formula comparison (this product and related products), an empty Testimonials slot for a reviews app, and a Newsletter section that is hidden by default.
Product information has three fixed parts:
- Media: the photo gallery, on the product’s color. Its settings are on the section.
- Buy box: the title, price, options and buttons. It takes product blocks, theme blocks and app blocks.
- Story: the long column under the media: why it works, the full formula panel, how to take it, the evidence, and questions. It takes the story blocks, theme blocks and app blocks.
On desktop the media and the story sit on the left and the buy box stays in view on the right as shoppers scroll. On phones the order is: media, buy box, then the story.
Section settings
| Setting | What it does |
|---|---|
| Layout | Media beside the buy box or Media above the buy box |
| Media width | Large or Medium |
| Keep the buy box in view on desktop | The buy box stays in view while the story scrolls. A buy box taller than the screen scrolls normally |
| Sticky add to cart bar | Off, Mobile only (default) or Mobile and desktop. A bar with the photo, title, price and Add to cart shows once the main button scrolls out of view |
| Image fit | Fill, or Fit inside the color field |
| Thumbnails | Below the image, or Beside the image |
| Show thumbnails on mobile | On by default; phones also show a “1 / 5” counter |
| Label on the image edge | Key actives shows a small label of the first rows of the formula on the main image on desktop (at 1200px and wider it overhangs the image edge). Off hides it |
| Loop videos | Loops product videos |
Media holds product images, uploaded videos, YouTube and Vimeo videos and 3D models (with a view-in-your-space button on supported phones). Videos and 3D models load when a shopper plays them. Selecting a variant brings its image into view. Zoom and the product color behind the photos are theme settings: Theme settings > Product > Image zoom and Paint the product image area with the product color.
The Buy box block has Space between blocks. The Story block has Space between blocks and Rule above each part.
Buy box blocks
The default order is below. Add, remove and reorder blocks in the theme editor. Blocks that read data the product does not have render nothing for shoppers; in the editor they show a dashed notice naming the metafield.
| Block | Settings | What it shows |
|---|---|---|
| Setup checklist | none | Editor only: the four fields Dosewell reads, checked when this product has them. Delete it when you are done |
| Product title | Heading tag (use H1 on the product page), Size | The full title |
| Facts line | Show goal, Show time of day | “Taken in the evening, for sleep” with a time-of-day icon, from calyx.timing and calyx.goal |
| Rating | Show review count | Stars from a reviews app (reviews.rating, reviews.rating_count); nothing without one |
| Subheading | Source (calyx.subtitle metafield, else the text below; or Text below), Text | One line under the title |
| Price | Show price per serving, Show unit price, Show lowest price in the last 30 days, Show taxes and shipping note, Show Shop Pay Installments, Use the sale color for sale prices, Size | Price, compare-at price struck through with a sale badge, “From” when variants differ, price per serving, unit price, the taxes and shipping note, Shop Pay Installments |
| Variant picker | Style (Automatic, Buttons, Swatches, Dropdown), Show prices on buttons, Show the selected value beside the option name, Size guide page | One control per option; see Options and swatches |
| Purchase options | Subscription badge, Show price per serving, Show subscription terms | Only for products with a subscription plan; see Purchase options |
| Inventory status | Low stock threshold (1 to 20), Show In stock above the threshold | “Only 3 left” at or below the threshold, “Ships when back in stock” when a variant can be ordered at zero. Only for variants whose inventory Shopify tracks |
| Quantity | Show label | A quantity selector that follows Shopify’s quantity rules (minimum, maximum, increment). Placed right before Buy buttons, it shares a row with Add to cart |
| Buy buttons | Show dynamic checkout buttons, Show recipient form for gift cards, Add to cart style | Add to cart (“Sold out” or “Unavailable” when it cannot be bought), Shopify’s accelerated checkout buttons, the gift card recipient form |
| Back in stock request | Heading, Button label, Promise an email in the confirmation | When the selected variant is sold out: an email field that sends you a contact form email tagged back-in-stock with the product and variant. Turn on the promise only if you reply to every request |
| Delivery estimate | Delivery text, Same-day shipping cutoff, Time zone, Shortest transit time, Longest transit time, Days you don’t ship, Free shipping text | See Delivery estimate |
| Returns | Text, Returns page | A returns line with a link, like “60-day refund, opened or not.” Nothing when empty |
| Pickup availability | none | Where the selected variant can be picked up, with a list of locations. Turn on local pickup for a location in Settings > Shipping and delivery |
| Key actives | Rows (3 or 5), Link text | A compact label of the first rows; the link jumps to the formula panel. On desktop it is hidden while the label on the image edge is on, so it shows once |
| Pairs with | Heading, Products shown (1 to 4), Fallback products | Complementary products with a one-time add button. Set them in the Search and Discovery app; the fallback list shows when Shopify has none. Sold out products and products already in the cart are left out |
| Share | Label | Shares the product with the device’s share sheet, or copies the link |
More blocks you can add:
| Block | Settings | What it shows |
|---|---|---|
| Vendor | Link to the vendor’s products | The vendor |
| SKU | none | The selected variant’s SKU |
| Badges | none | Sale, sold out and your calyx.badge badge |
| Lot certificates | Link text | A link to your calyx.coa URL with a lab icon |
| Volume pricing | Heading | Quantity price breaks, for example in a B2B catalog; nothing without them |
| Collapsible row | Heading, Icon, Text, Page content | One row that opens; the text can use a dynamic source |
| Product custom Liquid | Liquid code | Your own Liquid |
Generic theme blocks (Text, Button, Image and the others in Sections and blocks) and app blocks work in the buy box too.
Story blocks
| Block | Settings | What it shows |
|---|---|---|
| Description | Heading (default “Why it works”), Heading tag, Collapsible | The product description |
| Formula panel | Heading (default “The formula”), Heading tag, Panel title, Show why each amount was chosen, Print the label as it scrolls into view | The full label from calyx.actives or calyx.label |
| How to take | Heading, Heading tag, Show the dose time on an hour axis | The dose time from calyx.dose_time on a short hour axis, and the instruction from calyx.how_to_take (first line) with a note (the rest), with the time-of-day icon |
| Evidence | Heading, Heading tag, Studies shown (1 to 8), Show disclaimer | Studies from calyx.evidence, and the product disclaimer under them when Theme settings > Claims > Show disclaimer on includes product pages |
| Questions | Heading, Heading tag | Questions from calyx.faqs, plus any Question blocks you add inside it |
The formula panel
The panel reads the first source that has rows:
calyx.actives, a list ofcalyx_activemetaobjects (forms, Latin names, a “why this amount” note per row and a linked study);calyx.label, multi-line text with oneName | amount | %DV | formline per ingredient.
The title comes from the product’s calyx.panel_title, then the block’s Panel title, then
Theme settings > Product > Formula panel title. Supplement Facts and Nutrition Facts add a %
Daily Value column; an empty %DV prints a dagger that points to the footnote in Theme settings >
Claims. Key actives titles the amount column “Concentration” instead.
With Show why each amount was chosen on, rows whose calyx_active has a why text get a +
button that opens the note under the row, with the study’s authors and year linked when the row
has a source_study.
The panel prints once, top to bottom, the first time it scrolls into view, when Print the label as it scrolls into view is on here and in Theme settings > Animations, and Animations is set to Full. The text is in the page from the start, so search engines and screen readers read it either way.
Options and swatches
- Automatic style shows swatches when an option’s values have swatch colors or images, a dropdown for options with more than 10 values, and buttons otherwise.
- Swatches come from Shopify’s own swatch data (set on the product’s options, for example from
the category’s color attribute). For options Shopify has no swatches for, such as flavors, add
lines to Theme settings > Product > Custom swatch colors, like
Blood orange: #E8462F. - Values that are sold out are struck through and named as sold out. Values that do not exist in combination with the current selection are marked unavailable; choosing one switches to the nearest combination that exists.
- Changing an option updates the price, the price per serving, availability, the buttons, the
pickup line, the SKU and the image, and adds
?variant=to the address so the link can be shared. - Products in a combined listing switch to the sibling product when a shopper picks its value.
Purchase options
Purchase options show only when the product has a subscription plan from your subscription app. Without one, the block shows nothing and the gap closes.
- One row per subscription plan group with its savings (“Subscribe and save 15%”), a select of its delivery frequencies, the price per serving on that plan, and your Subscription terms.
- A One-time purchase row, unless the product can only be bought as a subscription.
- Subscription badge adds a short badge to the subscription row, like Free shipping.
- Subscription is preselected only when Theme settings > Product > Preselected purchase option is Subscription and Subscription terms is written. Otherwise one-time purchase is preselected, so shoppers never meet a preselected recurring charge without its terms.
- The price, the price per serving and the sticky bar follow the selected plan.
Delivery estimate
Every field is optional, and the block shows nothing while all of them are empty.
- Delivery text shows as written, and while the estimate is worked out, like “Ships in 1 to 2 business days.”
- Same-day shipping cutoff (24-hour time, like 14:00) adds “Order by 2:00 PM EST to ship today”, or “Ships tomorrow” or “Ships Monday” after the cutoff, on weekends and on Days you don’t ship. Time zone (shown once there is a cutoff or a transit time) is your store’s time zone by default and sets the day the cutoff and the delivery dates count from; shoppers see the cutoff converted to their own time, with the zone named.
- Shortest transit time and Longest transit time (business days) add “Estimated delivery Wed, Oct 28 to Fri, Oct 30”. Set both to 0 to hide the date.
- Days you don’t ship: one date per line, like 2026-12-25. Weekends never count.
- Free shipping text: a second line, like “Free US shipping on orders over $50.”
The estimate never counts down and is always labelled “Estimated”.
Gift cards
Gift card products use the same template. Denominations show as buttons, and Buy buttons shows the recipient form (with Show recipient form for gift cards on): a checkbox to send it as a gift, then email, name, a message and a send date. Formula blocks show nothing for gift cards. Quick add on cards opens the quick view for gift cards, so shoppers can fill the form.
A template for products without a formula
Formula blocks render nothing for products without formula data, so accessories work on the default template. For a cleaner editor, create a second template: in the theme editor, open the template menu at the top, choose Products > Create template, remove the formula blocks, and assign the template to those products in Products > (product) > Theme template.
Quick view
Cards open the quick view for products with several variants, gift cards and products that need a subscription. It shows the media gallery, title, facts line, “View full details”, the price block, options, purchase options, quantity and Add to cart, the gift card form and the compact key actives label. Its accelerated checkout buttons follow Theme settings > Product cards > Show dynamic checkout buttons in quick view.
