> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/product-page-sections/product-information/product-details.md). # Product details The purchase interface on the product page. A flexible container where you place and order individual blocks to build the exact information hierarchy your products need. ![Product Details panel overview](/files/usy7NA8SAMaX30G5uLDt) *** ## Details Block Settings Settings for the outer details panel container — alignment, width cap, spacing, and appearance. | Setting | Description | | ---------------------- | -------------------------------------------------------------------------------------------------------------- | | Alignment | Horizontal alignment of the text and blocks inside the panel. | | Limit width | Cap the panel to a maximum width. | | Max width | Maximum panel width when Limit width is enabled. | | Container position | Where the panel sits in its column once it is narrower than the column. Available when Limit width is enabled. | | Gap — Desktop / Mobile | Vertical spacing between blocks inside the panel. | | Border thickness | Width of the panel border. | | Corner radius | Corner rounding of the panel. | | Shadow | Drop shadow depth of the panel. | | Color type | **Inherit** — inherits the section color scheme. **Color scheme** — applies a separate scheme to the panel. | | Padding | Inner spacing: top, bottom, left, right. | {% hint style="info" %} **Alignment** and **Container position** control different things: Container position moves the whole panel within its column, Alignment moves the content inside the panel. Use both together for a centered panel with left-aligned text. {% endhint %} *** ## Product Badges Displays sale, sold-out, and custom badges on the product page. Badge text, colors, and shape are set in [**Theme Settings → Badges**](/helix/theme-settings/badges.md) — this block only chooses which ones appear. | Setting | Description | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | Show sold-out badge | Toggle the Sold Out badge. | | Show sale badge | Toggle the Sale badge (shown when a compare-at price is set). | | Show manual badges | Toggle the **Collection badges** and **Custom badge** configured in [Theme Settings → Badges](/helix/theme-settings/badges.md). | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | *** ## Product Title Renders the product name. | Setting | Description | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Size | Visual heading size of the product name. | | HTML tag | Semantic HTML tag rendered for the title. Use the H1 tag for SEO on product pages. | | Text case | How the product name is capitalized — **Inherit** to follow the theme's heading style, **Original** to print it exactly as typed on the product, or force **Capitalize**, **Uppercase**, or **Lowercase**. Defaults to **Inherit**. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | *** ## Product Vendor Displays the product's vendor or brand name. | Setting | Description | | -------------- | -------------------------------------------------------------------------------------- | | Uppercase | Display vendor name in all-caps. | | Font | Font family for the vendor name. | | Font size | Text size of the vendor name. | | Letter spacing | Spacing between letters. | | Color | Text color of the vendor name. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | *** ## Product Price Shows the product price, compare-at price, and unit price. Updates when the customer selects a variant. | Setting | Description | | ---------------------------- | -------------------------------------------------------------------------------------- | | Show sale badge | Display a "Sale" label beside the price when a compare-at price is set. | | Show tax and shipping notice | Display a small note about taxes and shipping below the price. | | Font | Font family for the price. | | Font size | Text size of the price. | | Letter spacing | Spacing between letters. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | *** ## Product SKU Displays the SKU of the selected variant. | Setting | Description | | -------------- | -------------------------------------------------------------------------------------- | | Font | Font family for the SKU. | | Font size | Text size of the SKU. | | Letter spacing | Spacing between letters. | | Color | Text color of the SKU. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | *** ## Variant Picker Lets customers select product options — size, color, material, or any custom option. Picker style (buttons, swatches, or dropdown) is configured in [**Theme Settings → Variant Pickers**](/helix/theme-settings/variant-pickers.md). | Setting | Description | | ------------------- | -------------------------------------------------------------------------------------- | | Variant option name | The option name that triggers the size chart button (e.g., `Size`). | | Size chart page | The Shopify page displayed when the size chart button is clicked. | | Desktop layout | How the chart opens on desktop: **Popup** or **Drawer**. | | Width | Maximum width of the popup or drawer on desktop. | | Mobile layout | How the chart opens on mobile: **Bottom sheet** or **Drawer**. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | By default, every product uses the same page selected in **Size chart page**. To show a different chart per product, connect that setting to a Page-type product metafield as a dynamic source — see [How to set up size charts](/helix/how-to-guides/how-to-set-up-size-charts.md). *** ## Buy Buttons Renders the Add to Cart button and optional accelerated checkout buttons (Shop Pay, Apple Pay, etc.). | Setting | Description | | -------------------------------- | -------------------------------------------------------------------------------------------------------- | | Show quantity button | Display a quantity input above the Add to Cart button. | | Show accelerated checkout | Display dynamic checkout buttons (Shop Pay, Apple Pay). Configured in Shopify Payments settings. | | Show gift card form | Show recipient fields when the product is a gift card. | | Add to cart button style | Visual style of the Add to Cart button: **Primary**, **Secondary**, or **Outline**. Default **Outline**. | | Gap — Desktop / Mobile | Spacing between the quantity selector and the button. | | Button height — Desktop / Mobile | Height of the button, set independently per viewport. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | *** ## Product Description Renders the product's Shopify description. | Setting | Description | | ------------ | -------------------------------------------------------------------------------------------------------- | | Height limit | Truncate the description to a fixed height. A "Show more" expander appears automatically when truncated. | | Text size | Text size of the description. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | *** ## Inventory Shows a stock status message and optional low-inventory indicators. | Setting | Description | | --------------------------------- | -------------------------------------------------------------------------------------- | | Low inventory threshold | Stock level below which the low-inventory message appears. | | Show low inventory quantity | Display the remaining unit count in the low-inventory message. | | Show low inventory progress bar | Display a progress bar reflecting stock level relative to the threshold. | | Gap | Space between the text message and the progress bar. | | Font / Font size / Letter spacing | Typography for the inventory message. | | Low inventory text color | Text color of the low-inventory message, with an optional custom color. | | Progress bar color | Background gradient for the progress bar. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | {% hint style="info" %} Setting **Low inventory threshold** to `0` turns the low-inventory display off — **Show low inventory quantity**, **Show low inventory progress bar**, **Gap**, and the colour settings are hidden until you raise the threshold above zero. {% endhint %} *** ## Pickup Availability Displays in-store pickup availability for the selected variant. Requires local pickup to be enabled in Shopify Shipping settings. | Setting | Description | | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | Enable boxed layout | Wrap the pickup message in a card with border, corner radius, shadow, and optional color scheme. | | Desktop *(under **Popup layout**)* | How the full availability list opens: **Popup** or **Drawer**. | | Mobile *(under **Popup layout**)* | **Bottom sheet** or **Drawer**. | | Pickup message size | Text size of the availability message. | | Pickup message color | Text color of the availability message. | | Border thickness | Width of the card border. Only available with Boxed layout. | | Corner radius | Corner rounding of the card. Only available with Boxed layout. | | Custom corner radius | The exact radius, when Corner radius is Custom. | | Shadow | Drop shadow depth of the card. Only available with Boxed layout. | | Color type | **Inherit** — inherits the section color scheme. **Color scheme** — applies a separate scheme to the card. Only available with Boxed layout. | | Color scheme | Color scheme applied when Color type is Color scheme. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | *** ## Payment Installments Shows installment payment options (e.g., Shop Pay Installments) beneath the price. Content is provided automatically by Shopify — there is nothing to configure but the spacing. | Setting | Description | | ------- | -------------------------------------------------------------------------------------- | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | {% hint style="info" %} Payment Installments are enabled in **Shopify Admin → Settings → Payments → Shop Pay Installments**. The block only renders when the product price qualifies and the feature is active on the store. {% endhint %} *** ## Product Siblings Displays linked products that share a common attribute — typically color families where each color is a separate product — as a tab bar or a row of buttons. | Setting | Description | | ------------ | -------------------------------------------------------------------------------------- | | Layout | **Tabs** or **Buttons**. | | Active style | Visual style of the selected sibling. | | Gap | Spacing between sibling buttons. Only available in Buttons layout. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | {% hint style="info" %} Each sibling is a **Product Link** sub-block with a **Label** and a **Product** picker setting. The **Label** overrides the link text — leave it empty to use the linked product's title. Set the product manually, or connect a product-reference metafield to the **Product** setting via **Connect dynamic source** so each product shows its own set of links. The block reads the **Product** setting — it does not read a fixed metafield key. {% endhint %} *** ## Indicator/Fit A segmented bar that communicates sizing or fit at a glance — from "Runs small" to "Runs large". Each product can display a different active position by setting a metafield. | Setting | Description | | --------------------------------- | -------------------------------------------------------------------------------------------------- | | Segments | Number of segments in the bar. | | Active segment | The segment index that is highlighted (e.g., `4` out of 5). | | Fill up to active | Fill all segments from start up to the active one instead of highlighting only the active segment. | | Title | Label shown above the bar (e.g., "Fit"). | | Left label | Label at the start of the bar (e.g., "Runs small"). | | Middle label | Label at the center (e.g., "True to size"). | | Right label | Label at the end (e.g., "Runs large"). | | Bar top spacing | Gap between the title and the bar. | | Bar bottom spacing | Gap between the bar and the labels. | | Font / Font size / Letter spacing | Typography for the title label. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | By default, all products use the **Active segment** value set in the block. To vary it per product, connect that setting to an Integer-type product metafield as a dynamic source — see [How to set up the Indicator/Fit bar](/helix/how-to-guides/how-to-set-up-indicator-fit.md). *** ## Recommended Products Renders an inline list of recommended products within the details panel — powered by Shopify's recommendation engine. The block holds two static child blocks: a **Heading** and a **Product list**. | Setting | Description | | ---------------------- | -------------------------------------------------------------------------------------- | | Gap — Desktop / Mobile | Spacing between the heading and the product list. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | **Heading** | Setting | Description | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | Text | The heading shown above the recommendations. | | Font | Heading, Body, or Accent. | | HTML tag | Semantic tag rendered (Paragraph, H1–H6). | | Font size | Heading 3–6 for the heading font, or Extra small → Double extra large for body and accent. | | Letter spacing | Spacing between letters. | | Animation | Entrance effect (Fade, Scale, Slide, Rotate words) played on scroll, with an optional **Delay**. Shown when block animations are enabled in theme settings. | **Product list** | Setting | Description | | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Type | **Related** — products related to the one being viewed. **Complementary** — products that pair with it. Complementary products must be set up in the **Search & Discovery** app. | | Products | An optional manual list, shown when no recommendations are available. | | Max products | The most products the block will show. | | Desktop columns / Mobile columns | Number of cards per row — 1–3 on desktop, 1–2 on mobile. | | Custom columns | Set the column count per breakpoint yourself, via **Columns per breakpoint**. | | Gap — Desktop / Mobile | Spacing between the cards. | | Navigation | **Style** and **Icon** of the previous / next arrows. | | Auto-rotate slides | Advances the carousel automatically, at a set **Speed**. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | *** ## Video Reviews Embeds a carousel of shoppable customer video reviews directly in the details panel — social proof placed right beside the buy button. Each card plays a muted preview and opens a full-screen player on tap. Reviews are pulled per product, so every product shows its own set, and the block includes its own built-in **Heading** block, which can play an entrance animation when block animations are enabled in theme settings. | Setting | Description | | ---------------------- | ----------------------------------------------------------------------------------------------------------- | | Gap — Desktop / Mobile | Spacing between review video cards. | | Border thickness | Width of the block border. | | Corner radius | Corner rounding of the block. | | Custom corner radius | The exact radius, when Corner radius is Custom. | | Shadow | Drop shadow depth of the block. | | Color type | **Inherit** — inherits the section color scheme. **Color scheme** — applies a separate scheme to the block. | | Color scheme | Color scheme applied when Color type is Color scheme. | | Padding | Inner spacing (top, bottom, left, right), with independent mobile overrides. | {% hint style="info" %} Videos are read from each product's video-reviews metafield — see [How to set up video reviews](/helix/how-to-guides/how-to-set-up-video-reviews.md) for the metafield setup. For a storewide layout instead of a per-product block, use the full-width [Video reviews](/helix/global-sections/shoppable-content/video-reviews.md) section. {% endhint %} *** ## Bundle Includes Lists the products a bundle is made of, right on the bundle product's own page — so shoppers can see exactly what they get before they buy. Each row shows the product image, its title, the selected variant's options (for example *Color: Black | Size: M*), and optionally its price, and links through to that product. The rows come from a metafield on the bundle product, so every bundle lists its own contents. | Setting | Description | | ------------- | ----------------------------------------------------------------------------------------- | | Text | The heading above the list — for example *This bundle includes:*. Leave empty to hide it. | | Font size | Size of that heading — Extra small → Double extra large. | | Text color | Draw the heading in the scheme's **Heading** or **Text** color. | | Show dividers | Draw a separating line between rows. | **Product card** Settings for the individual rows inside the list. | Setting | Description | | ---------------- | ----------------------------------------------------------------------------------- | | Show price | Display each product's price on its row. | | Border thickness | Width of the border around each row. Above 0, every row becomes its own boxed card. | | Shadow | Drop shadow depth of each row. | **Gap** | Setting | Description | | ---------------- | --------------------------------------------------------- | | Desktop / Mobile | Spacing between the rows, set independently per viewport. | **Appearance** | Setting | Description | | -------------------- | ----------------------------------------------------------------------------------------------------------- | | Border thickness | Width of the block border. | | Corner radius | Corner rounding of the block. | | Custom corner radius | The exact radius, when Corner radius is Custom. | | Shadow | Drop shadow depth of the block. | | Color type | **Inherit** — inherits the section color scheme. **Color scheme** — applies a separate scheme to the block. | | Color scheme | Color scheme applied when Color type is Color scheme. | | Padding | Inner spacing (top, bottom, left, right), with independent mobile overrides. | {% hint style="info" %} The list is read from each product's bundle-products metafield — see [How to set up bundle includes](/helix/how-to-guides/how-to-set-up-bundle-includes.md) for the metafield setup and how to pick the variant shown on each row. {% endhint %} {% hint style="info" %} This block only lists what's in the bundle — customers buy it with the product page's own **Add to cart** button, at the bundle product's own price, so there is no picker and no separate total. To let customers build their own bundle instead, use the [Bundle builder](/helix/global-sections/products/bundle-builder.md) section; to add several products to the cart at once, use the [Product bundle](/helix/global-sections/products/product-bundle.md) section. {% endhint %} *** ## Sticky Add to Cart A persistent buy bar that stays visible as the customer scrolls, keeping Add to Cart within reach. | Setting | Description | | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | Layout style | **Page** — the bar spans the page width. **Full** — it spans the full browser width. **Floating** — it sits as a floating overlay. | | Show variant selector | Display a compact variant picker inside the sticky bar. | | Show quantity selector(desktop) | Display a quantity input inside the bar. Not available in Floating layout. | | Desktop width | Width of the product thumbnail on desktop. | | Button height — Desktop / Mobile | Height of the button — Inherit, or Extra small → Extra large, set independently per viewport. | *** ## Accordion Collapsible panels for product details — ideal for specifications, care instructions, size guides, or return policies. This is the theme [Accordion](/helix/theme-blocks/layout/accordion.md) block — see it for the full settings. *** ## Group A flex container that groups multiple product detail blocks into a single row or column — useful for placing Price and badges side by side, or stacking elements with shared background. It shares its settings with the theme [Group](/helix/theme-blocks/layout/group.md) block — direction, alignment, gap, size, appearance, background, color, link, and padding. The only difference is that **Show group first on mobile** and **Enable swipe on mobile** are not available here. *** ## Global Blocks | Block | Description | | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [Heading](/helix/theme-blocks/basic/heading.md) | A standalone heading line. | | [Subheading](/helix/theme-blocks/basic/subheading.md) | A short overline or eyebrow label above a heading. | | [Text](/helix/theme-blocks/basic/text.md) | A rich-text paragraph. | | [Image](/helix/theme-blocks/basic/image.md) | An inline image — useful for trust badges or icons. | | [Button](/helix/theme-blocks/basic/button.md) | A standalone call-to-action button. | | [Icon](/helix/theme-blocks/basic/icon.md) | An inline SVG icon from the theme library. | | [Divider](/helix/theme-blocks/layout/divider.md) | A horizontal rule separating sections. | | [Collapsible Text](/helix/theme-blocks/basic/collapsible-text.md) | A single expandable text block with a trigger label. | | [Countdown Timer](/helix/theme-blocks/basic/countdown-timer.md) | An urgency countdown for time-limited offers. | | [Coupon Code](/helix/theme-blocks/basic/coupon-code.md) | Displays a promotional code. | | [Video](/helix/theme-blocks/basic/video.md) | An inline Shopify-hosted or external video. | | [Custom Liquid](/helix/theme-blocks/custom/custom-liquid.md) | Add custom Liquid, HTML, or Shopify objects for advanced customization. | | [Page](/helix/theme-blocks/basic/page.md) | Renders the body of a Shopify page (e.g., care instructions). | | [Popup](/helix/theme-blocks/links/popup.md) | A button that opens a secondary overlay from within the details panel. | | [Spacer](/helix/theme-blocks/layout/spacer.md) | Adds adjustable empty vertical space between blocks. See [How to set up custom spacing](/helix/how-to-guides/how-to-set-up-custom-spacing.md) for per-breakpoint values. | | [Payment Icons](/helix/theme-blocks/footer/payment-icons.md) | Displays the store's accepted payment method icons. | | [Colors](/helix/theme-blocks/basic/colors.md) | Colour swatches. | | App blocks | Blocks provided by apps you have installed. |