> 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/global-sections/products/bundle-builder.md). # Bundle builder Let customers build their own multi-product bundle. As they add items, a running total, tiered discount, and progress bar update toward a goal. The standard version shows all bundle products in one list; the **tabs** version splits the bundle into steps, each on its own tab. ![Bundle builder overview](/files/7KKbgYa6cNih82kR7d0L) {% hint style="warning" %} The tier values in this section only style the storefront — the actual discount must exist in **Shopify Discounts** and match. See [How to set up the bundle builder](/helix/how-to-guides/how-to-set-up-the-bundle-builder.md) for discount and goal configuration. {% endhint %} *** ## Settings ### Layout | Setting | Description | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. | | Alignment | Horizontal alignment of the section content. | ### Gap | Setting | Description | | ------------- | -------------------------------------------------------- | | Gap — Desktop | Vertical spacing between the builder's parts on desktop. | | Gap — Mobile | Vertical spacing between the builder's parts on mobile. | ### Background | Setting | Description | | ---------------- | ------------------------------------------------------------------------------------- | | Background media | Background media type, such as none, an image, or a video. | | Image | Section background image. | | Image — Mobile | Separate background image for mobile viewports. | | Video | Shopify-hosted background video. | | Show overlay | Color layer over the background media. | | Overlay color | Color and opacity of the overlay. | | Parallax effect | Scroll effect for the background media, such as fixed, vertical, horizontal, or zoom. | ### Appearance | Setting | Description | | ------------ | ---------------------------------------- | | Color scheme | Background color scheme for the section. | ### Spacing | Setting | Description | | ----------------------- | -------------------------------------------------------- | | Padding top / bottom | Outer spacing above and below the section. | | Custom padding — Mobile | Override desktop padding with independent mobile values. | ### Tabs variant The **Bundle builder tabs** section splits the bundle across tabs. It shares every setting above and adds these: | Setting | Description | | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Max products | How many products each tab shows. | | Desktop columns / Mobile columns | Number of cards per row — 2–4 on desktop, 1–2 on mobile. | | Custom columns | Set the column count per breakpoint yourself, via **Columns per breakpoint**. | | Products gap — Horizontal / Vertical | Spacing between cards, with independent mobile values. | | Style | Tab bar style: **Underline** or **Button**. | | Active style | How the active tab is highlighted: **Primary** or **Outline**. Button style only. | | Tab gap — Desktop / Mobile | Space between tabs. | | Font | Typeface of the tab labels — Default, Heading, Body, or Accent. | | Font size | Size of the tab labels. | | Letter spacing | Letter spacing of the tab labels. Body and accent fonts only. | | Add button style | Primary, Secondary, or Outline. | | Variant picker type | **Button** or **Dropdown** on each product card. | | Variant picker type (mobile) | The picker used below 768px, so option buttons that crowd a narrow card can become a dropdown there instead. Only appears when **Variant picker type** is **Button** — a dropdown on desktop stays a dropdown on mobile. Defaults to **Dropdown**. | It keeps the **Header** and **Bundle summary** blocks, but replaces the single Product list with one **Bundle tab** block per stage — the product-list settings above move to section level, and each tab only picks its own products. *** ## Available Blocks ### Header Section header with heading and descriptive text above the builder. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md). ### Product list The pool of products customers pick from. | Setting | Description | | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Collection | The collection whose products fill the pool. | | Products | Individual products to show, in the order you pick them. Use this instead of a collection for a hand-picked pool. | | Max products | How many products to show. | | Desktop columns / Mobile columns | Number of cards per row — 2–4 on desktop, 1–2 on mobile. | | Custom columns | Set the column count per breakpoint yourself, via **Columns per breakpoint**. | | Horizontal gap / Vertical gap | Spacing between cards, with independent mobile values. | | Add button style | Primary, Secondary, or Outline. | | Variant picker type | **Button** or **Dropdown** on each product card. | | Variant picker type (mobile) | The picker used below 768px, so option buttons that crowd a narrow card can become a dropdown there instead. Only appears when **Variant picker type** is **Button** — a dropdown on desktop stays a dropdown on mobile. Defaults to **Dropdown**. | ### Bundle summary The running total, tiered discount, progress bar, and reward message that update as items are added. | Setting | Description | | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | | Heading | The summary title, with a **Size** from Heading 1–4. | | Initial message | Shown before the first discount tier is reached. | | Reward unlocked message | Shown once a tier is reached. | | Font size | Size of the messages. | | Progress bar color | Fill color of the progress bar. | | Label | Name of the first discount tier. | | Discount type | **Amount off products** or **Amount off order**. | | Discount method | **Percentage** or **Fixed amount**, with the matching **Discount percentage** / **Discount value**. | | Only apply discount once per order | Caps the discount to a single application. | | Minimum requirement | **Purchase amount** or **Quantity of items**, with the matching **Minimum purchase amount** / **Minimum quantity of items**. | | Enable tier 2 / Enable tier 3 | Adds further discount tiers, each with its own label, value, and minimum. | | Show quantity selector | Lets customers change quantities in the bundle list. | | Gap | Space between the summary's parts — set separately for desktop and mobile. | | Border thickness / Shadow | Appearance of the summary container. | | Desktop color scheme / Mobile color scheme | Color scheme applied to the summary, per device. | | Padding | Top and bottom, left and right, with independent mobile values via **Custom for mobile**. | ### Bundle tab *(Tabs variant only)* One step of the bundle, holding its own set of products and appearing as a tab. Add one Bundle tab per stage of the bundle. | Setting | Description | | ---------- | ----------------------------------------------------------------------------------------------------------------- | | Collection | The collection whose products appear under this tab. | | Products | Individual products to show, in the order you pick them. Use this instead of a collection for a hand-picked step. | | Tab title | The tab label. Leave blank to use the collection name. |