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 formula notes.
- Merchant-addable
- Yes
- Settings
- 84
- Block types
- 22
- File
sections/product-chapters.liquid
Used by default on: Product
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
producttemplate. - The section starts with a deliberately short buying column: Product identity, Title, Product rating, Price, Product description, Variant picker, Purchase options, Quantity selector, Buy buttons, Pickup availability, Reassurance, and one Shipping and returns disclosure. Product rating, Purchase options, and Pickup availability stay hidden until the product or store has the data they show.
- The description opens as an Excerpt: the first three lines of the product description, with a Read more button that expands the rest in place. Change the count under Visible lines. Descriptions that already fit show in full with no button, and long ones cannot push the buy button down the page. Switch Display style to Collapsible to move it into a disclosure instead.
- Configure Media and Layout first — these set how chapters and the buying column interleave.
- Add Media chapter blocks for the narrative. Media chapters sit in the gallery, so they add no length to the buying column.
- Benefits, ingredients, and how to use each have a section of their own further down the page — Benefits and suitability, Product dossier with Ingredient atlas, and Protocol timeline. Fill those rather than repeating the same copy in a Collapsible information block.
- Product highlights, Formula notes, Inventory status, Product metadata, Complementary products, and Share remain available under Add block when a product calls for them.
- 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
@appblocks, so review and subscription apps drop in from the theme editor. - Product highlight blocks placed next to each other share one row, and Formula note blocks placed next to each other share one strip. Drag one away from its neighbors to show it on its own at that spot.
- The chapters are the point. If you find yourself using this template with one chapter, use Product stage instead.
- Show desktop navigation controls the arrows on desktop only. On phones, a compact capsule with previous and next arrows and the image count always sits in the corner of the image, with a slim position track beside it in the style of the product card slideshow, alongside swipe, so every image can be reached with a tap as well as a swipe. It hides itself when only one image is showing.
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 on desktop. On mobile, compact arrows and the image count always show alongside swipe, so every image stays reachable without a swipe gesture.
Formula notes
Shown at the start of the strip when formula note blocks are added.
Layout
Aligns the title, price, options, and other details beside the media. Full-width rows such as purchase options, accordions, and buttons keep their 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.
Eyebrow 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.
Longer descriptions end in a Read more button that expands the rest in place.
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.
Enable this after adding review content to the Product reviews section.
Price price max 1
Applies to the current and compare-at prices. Unit and installment prices stay compact.
Product highlight highlight max 4
Highlights placed next to each other display together as one row. Move a highlight away from the others to show it on its own. Each row 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.
Shows after the add to cart button leaves the screen. Uses the same product form.
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 placed next to each other display together as one strip. Move a note away from the others to start a separate 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.