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
- 95
- Block types
- 23
- File
sections/product-chapters.liquid
Used by default on: Product
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.
Custom product highlights
Use a custom product metafield when the standard category attributes do not cover a value you want to display.
- Create a product metafield definition in Shopify admin, with a supported plain-value type.
- Fill the field on every product that should display it.
- In this section, open a Highlight block and select Custom product metafield.
- Enter the definition’s full namespace and key, such as
custom.product_highlight, in the newly shown metafield identifier field. Enter this as plain text, without a dynamic-source connection. - Save and preview products with different values. Existing manual fallbacks remain available.
See Custom product metafield setup for field creation steps, supported types, this section’s exact fallback behavior, and troubleshooting. If you enter only the key without its namespace, the theme editor displays a message explaining the required format.
Complementary product links
Complementary product titles have no default underline on mobile. Titles follow the global text-link hover setting.
Complementary product arrows slide the outgoing and incoming pages horizontally together. Page height adjusts smoothly when the pages differ in height. The global Interface animation speed controls timing; No motion and reduced motion switch pages immediately.
Sticky add to cart
In Buy buttons, Show sticky add to cart on mobile and Show sticky add to cart on desktop independently control the sticky purchase action. Both are enabled by default. Mobile shows a slim bottom bar below 750px. Desktop shows a compact floating card in the lower-right corner at 750px and wider. Its slim horizontal layout pairs the product’s featured-image thumbnail and title with the priced button. The thumbnail is omitted when the product has no featured image. Titles wrap without truncation, and the card follows the section color scheme and theme corner-radius controls. Most of the page remains clear for reading. Turn off either option to keep the bar only on the other screen size, or turn off both to remove it.
The bar appears after shoppers scroll past the main add to cart button and hides when that button returns to view. It also hides while the cart drawer, a header menu, search, localization panel, or a dialog is open. The bar shows the native Shopify product title and copies the main button’s current label, including its price when Show price on add to cart is enabled, availability, and loading state. It submits the existing product form with the selected variant, quantity, purchase option, and gift card recipient details. It does not require a metafield or separate product content.
Long product titles wrap, and the page reserves space for the bar so the last page content remains reachable. Appearance follows the section color scheme and global motion settings, including reduced motion. Without JavaScript, shoppers use the main product form.
Delivery estimate
The Delivery estimate block tells shoppers when the selected variant ships and when it arrives, for example “Arrives Tue, Oct 20 – Fri, Oct 23” with “Order within 3 hr 12 min to ship today” beneath it. A newly added Product chapters section does not include it; add it to the buying column with Add block. The default product template places it below Pickup availability with the countdown off. Match the schedule settings to how you ship before you publish.
Shipping schedule
- Daily order cutoff — the hour, on a 24-hour clock, after which orders count from the next working day. It uses your store’s time zone from Settings > General in Shopify admin.
- Processing time — working days to prepare an order. Use 0 to ship orders placed before the cutoff on the same day.
- Shortest delivery time and Longest delivery time — working days in transit after an order ships. When both match, shoppers see a single date. If the shortest is set longer than the longest, the block swaps them.
- Working days — Monday to Friday, Monday to Saturday, or Every day. Applies to both processing and delivery time.
- Closed dates — holidays when you do not ship, written as YYYY-MM-DD and separated by
commas, such as
2026-12-25, 2027-01-01. Entries in any other format are ignored.
Display
- Shipping method — names the service the estimate describes, Standard shipping by default. Leave it blank to hide it.
- Style — Compact shows the arrival dates with the dispatch day beneath. Timeline shows three stops: Order, Ships, and Arrives. The stops stack vertically in narrow columns and on phones.
- Show time left before cutoff — off by default. Counts down, to the minute, to your daily cutoff. Turn it on once the cutoff and processing time match how your team actually ships.
The countdown is the real time left before your cutoff. When it ends, the dates move on to the next working day; it never restarts. Set the cutoff to the time your team actually ships orders, because Theme Store rules do not allow false urgency.
Dates are calculated in the shopper’s browser on your store’s clock, so a shopper in another time zone works to the same cutoff as your warehouse. Without JavaScript the block shows business days instead, such as “Ships in 1 business day” and “Arrives in 3–6 business days”. The estimate comes from these settings, not from carrier rates, so keep it in line with your shipping policy.
The block hides for sold-out variants, variants selling on backorder, and variants that do not require shipping, including digital gift cards. In the theme editor, a note explains why it is hidden. The estimate updates when shoppers choose another variant.
Content ownership: Shopify product data supplies availability, inventory policy, and whether a variant requires shipping. The block owns the shipping schedule and display. It reads no metafields.
Native variant selection
The native fallback variant selector works without JavaScript. A sold-out deep link does not prevent choosing another available variant. Shopify validates availability, quantity and purchase plans. The template enables accelerated checkout by default.
Complementary product title links keep a minimum 24px target in both layouts, including short names. Product data supplies each title and destination.
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. Reduced-motion preferences turn it off.
Appears 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
Appears at the start of the strip when you add formula note blocks.
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.
Scrolls to the Product reviews section. The count shows as plain text on pages where that section has no review content.
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 appears when the product has no value for it.
Enter the full product metafield identifier as plain text, such as custom.when_to_use. Reads each relevant product, including cards with their own product. Supports text, numbers, true/false, and lists of text or numbers. Missing or unsupported values keep the existing manual fallback or empty state.
A highlight stays readable beside its icon, so the attribute shows up to this many values.
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 appears only when the variant has a 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. Appears only when the selected product variant has selling plans.
Shows description text supplied by the purchase-options app when available.
Appears 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. Unavailable selections and gift card recipient forms hide this button.
Docks at the bottom after shoppers scroll past the add to cart button. Uses the same product form.
Shows a compact floating purchase card in the bottom corner after shoppers scroll past the add to cart button. Uses the same product form.
Appears only on gift card products. Recipient validation supports Add to cart only, so the recipient form hides accelerated checkout.
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
Delivery estimate delivery_estimate max 1
Shows when the selected variant ships and arrives, counted in your store's time zone. Customers see dates once the page loads, and business days without JavaScript. Sold-out, backordered, and digital variants show no estimate.
Shipping schedule
Uses a 24-hour clock. Orders placed after this time ship from the next working day.
Working days to prepare an order. Use 0 to ship orders on the day they arrive.
Working days in transit after an order ships.
Counts processing and delivery time.
Holidays when you do not ship, written as YYYY-MM-DD and separated by commas, such as 2026-12-25, 2027-01-01.
Display
Names the service the estimate describes. Leave blank to hide it.
Counts down to your daily order cutoff, then moves the dates on. Match it to your real fulfillment cutoff.
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 go directly to the cart. 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 determines the match, 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.