Product chapters
The editorial product layout. The page reads top to bottom as a narrative with media chapters, while the buying column stays pinned alongside rather than buried below. Includes a backdrop word treatment and formula notes.
- Merchant-addable
- Yes
- Settings
- 85
- Block types
- 22
- File
sections/product-chapters.liquid
Used by default on: Product , product.set
Screenshots pending
Captures for Product chapters 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 that must be explained before they can be sold. High price points, unfamiliar categories, anywhere the real question is "why does this cost that".
Setting it up
- This section drives the default `product` template.
- Configure Media and Layout first — these set how chapters and the buying column interleave.
- Set the Backdrop word if you want the oversized typographic treatment behind the media. Leave it blank to switch it off.
- Add Media chapter blocks for the narrative, and buying-column blocks for the purchase path.
- Use Formula notes for ingredient callouts tied to specific chapters.
- 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 owns the commerce facts. Blocks own the narrative — chapters, highlights, notes, and popups.
Notes and cautions
- Supports `@app` blocks, so review and subscription apps drop in from the theme editor.
- The chapters are the point. If you find yourself using this template with one chapter, use Product stage instead.
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
Sets the shape of the image window. The window fills the screen height and keeps this ratio on every screen size.
Starts the first Shopify-hosted product video muted when it is the opening media. Autoplay can slow page loading and is skipped for reduced-motion preferences.
Shown on desktop when the product has more than one media item.
Shows arrows and the navigation caption on desktop. Mobile uses swipe navigation and a progress indicator.
Backdrop word
Shows a decorative display word across the media panel.
Formula notes
Shown at the start of the strip when formula note blocks are added.
Layout
Colors
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.
Custom Liquid custom_liquid max 2
Add a small integration or advanced Liquid output in the product details panel.
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.
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
Uses Shopify selling plan data created through compatible purchase-options apps. Hidden when the selected product variant has no 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.
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.
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.
Media chapter chapter max 4
Adds an editorial filter chip for positions in the Shopify product media order.
Positions are fixed for every product on this template. Alt text matches per product, so use it when products order their media differently.
Enter comma-separated positions from the Shopify product media order, for example: 2, 3.
Media whose alt text carries this label join the chapter. Write alt text as a label, then a description: "Texture: swatch on skin". Only the label is matched, so the description still reaches screen readers.
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.