Product stage
The buying-first product layout: gallery on one side, buying column on the other, both pinned as the page scrolls. Twenty-four block types build the buying column, including app blocks.
- Merchant-addable
- Yes
- Settings
- 82
- Block types
- 23
- File
sections/product-stage.liquid
Used by default on: Product (stage)
Screenshots pending
Captures for Product stage at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
Products the customer already understands. Refills, repeat purchases, simple SKUs — anywhere the decision is "yes" rather than "what is this".
Setting it up
- This section drives the `product.stage` template. Assign it to a product under Products → your product → Online store → Theme template.
- Configure the gallery under Media, and the two-column behavior under Layout.
- Build the buying column by adding and reordering blocks. A sensible order: Product identity, Title, Price, Product rating, Variant picker, Quantity selector, Purchase options, Buy buttons, then reassurance and disclosures below.
- Add Complementary products and Collapsible information blocks toward the bottom, not above the buy button.
- Set color schemes under Colors.
- Set Value source on each Product highlight block so highlights vary per product, with the typed label as the fallback. See Per-product content.
Where the content comes from
Shopify product data owns title, price, compare-at, variants, availability, media, and selling plans. Blocks own supporting editorial — reassurance items, formula notes, and popups.
Notes and cautions
- Accelerated checkout buttons are rendered by Shopify with Shopify's own styling. Their appearance is not customizable — that is a platform rule, not a theme limit.
- Blocks can be reordered by dragging. Anything below the buy button is read by far fewer people, so order deliberately.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
Media
Shown when the product has more than one media item.
Formula notes
Shown at the start of the strip when formula note blocks are added.
Layout
Colors
Controls the media-stage background and Product information card. It does not control the mobile background behind the card.
Used only on mobile screens behind and below the Product information card. For a smooth transition, choose the same color scheme as the very next section below Product stage.
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.
Product identity eyebrow max 1
Product category uses the product's Shopify taxonomy category and falls back to product type when the category is not set.
Links the label to the matching product type, vendor, or collection page.
Title title max 1
This section has no settings of its own.
Product description description max 1
Uses the description from this product's Shopify admin. Presentation settings do not replace or edit that content.
Text text
Short benefit statement benefit_statement max 1
Add one concise editorial reason to buy before the purchase controls. This content supplements rather than replaces the product description. Connect an optional product metafield when the statement varies by product.
Product rating rating max 1
Shows the average rating from the product reviews metafield added by review apps.
Turn this off when the product page has no reviews section to scroll to.
Price price max 1
Applies to the current and compare-at prices. Unit and installment prices stay compact.
Product highlight highlight max 4
Product-specific facts display together. The layout automatically adapts to one, two, three, or four highlights and the available product-info width.
Reads this attribute from the product, so the highlight varies per product. The typed label is used when the product has no value for it.
A highlight stays readable beside its icon, so only this many values from the attribute are shown.
Variant picker variant_picker max 1
Configure variant presentation in Theme settings > Product variants.
Product metadata product_metadata max 1
Shows the SKU and barcode of the selected Shopify product variant. Each row is hidden when the variant has no value for it.
Barcodes are often internal. Show this row only when customers need it, such as ISBN or GTIN lookups.
Hidden labels stay available to screen readers.
Inventory status inventory max 1
Uses live inventory, availability, selling policy, and incoming inventory from the selected Shopify product variant.
Variants at or below this quantity show a low inventory message. Set to 0 to disable low inventory messages.
Shows the selected tracked variant's real quantity. Low inventory uses the low inventory message.
Appears only when Shopify reports incoming inventory for the selected variant.
Appears only when Shopify provides an arrival date. Otherwise the incoming inventory message has no date.
Quantity selector quantity max 1
Uses the selected Shopify variant's quantity rules, cart quantity, and catalog-specific volume prices. Rule details appear when catalog constraints apply.
Sets the total number of volume-pricing rows shown before the Show more prices button, including the regular minimum-price row. Volume prices come from a Shopify catalog, so they appear in a theme preview and stay hidden in the theme editor. Open the theme in preview to check this setting.
Purchase options selling_plan max 1
Shown when the product offers subscriptions or other selling plans.
Shows description text supplied by the purchase-options app when available.
Shown once below the purchase options when the app supplies no descriptions. Leave blank to hide it.
Buy buttons buy_buttons max 1
Shopify shows this when the selection, customer, market, browser, and active payment methods are eligible. Hidden for unavailable selections and gift cards when the recipient form is shown.
Shown only on gift card products. Accelerated checkout is hidden because recipient validation supports Add to cart only.
Reassurance item reassurance max 4
Uses instance-specific, merchant-provided facts. Adjacent reassurance items display as one group.
Required for the item to appear. Enter a factual policy or product claim.
Optional. Link to supporting policy or product information.
Pickup availability pickup_availability max 1
Complementary products complementary_products max 1
Uses complementary recommendations configured for this product in Shopify Search and Discovery. The block stays hidden when no recommendations are available.
Additional products appear on another page within the block.
Products with one purchasable variant are added directly. Products with several variants open an option picker. Sold out products show no add control.
Formula note note max 6
Formula notes display together as one strip.
Information popup info_popup max 2
Use this block for a size guide, a measurement chart, or a short explainer such as ingredient terms or application steps. The content opens over the page so customers keep their place.
Only the selected source renders. A page also gives the link a destination for customers without JavaScript.
Pulls the content of an online store page, such as your size guide.
Leave blank to use the page title, or the link label when the source is rich text.
Collapsible information accordion
Use this block for shipping, returns, ingredients, care, usage, FAQ, or policy content. Add one block per topic.
Leave blank to use the page title when the content source is a page.
Only the selected source renders.
Applies when the content source is Page. Pulls the content of an online store page, such as your shipping policy.
Custom Liquid custom_liquid max 2
Add app snippets or other Liquid code to create advanced customizations.
Hotspot hotspot max 4
Enter the media position from the product gallery. Values beyond the available media use the final item.
App blocks
This section accepts @app blocks, so apps you install can render inside it
directly from the theme editor. Add the app's block the same way you add a theme block.