> 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-tabs.md).

# Bundle builder tabs

A tabbed version of the bundle builder. Each bundle step sits on its own tab, so customers build the bundle one category at a time — useful for larger, multi-category bundles (for example "Choose a top → Choose a bottom → Choose an accessory").

![Bundle builder tabs overview](/files/9Z2Jt6FXePHyTjDTloPT)

{% hint style="warning" %}
In each Tab block, enter the exact collection or product configured in **Shopify Discounts**, or the discount won't apply. 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 | Alignment of the section content.                                                                                                                                               |

### Spacing

| Setting                | Description                                             |
| ---------------------- | ------------------------------------------------------- |
| Gap — Desktop / Mobile | Vertical spacing between the tabs and the product grid. |

### Product list

| Setting                | Description                                                                                                                                                             |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Max products           | Maximum number of products shown per tab.                                                                                                                               |
| Desktop columns        | Number of product columns on desktop.                                                                                                                                   |
| Mobile columns         | Number of product columns on mobile.                                                                                                                                    |
| Custom columns         | Set a custom column count per breakpoint instead of the presets.                                                                                                        |
| Columns per breakpoint | Custom column values, applied when Custom columns is on. See [How to set up custom columns](/helix/how-to-guides/how-to-set-up-custom-columns.md) for the value syntax. |

### Products gap

| Setting                        | Description                               |
| ------------------------------ | ----------------------------------------- |
| Horizontal / Vertical          | Spacing between product cards on desktop. |
| Horizontal / Vertical — Mobile | Spacing between product cards on mobile.  |

### Tab layout

| Setting                    | Description                                                                        |
| -------------------------- | ---------------------------------------------------------------------------------- |
| Style                      | **Underline** — text tabs with an active underline. **Button** — pill/button tabs. |
| Active style               | Appearance of the selected tab: **Primary** or **Outline**.                        |
| Tab gap — Desktop / Mobile | Spacing between tabs.                                                              |
| Font                       | Font family for the tab labels.                                                    |
| Heading size               | Tab label size when using a heading font.                                          |
| Font size                  | Tab label size when using a text font.                                             |
| Letter spacing             | Letter spacing of the tab labels.                                                  |

### Product card

| Setting                      | Description                                                                                                                                                                                                                                        |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Add button style             | Visual style of the add-to-cart button.                                                                                                                                                                                                            |
| Variant picker type          | How product options appear on each card: **Button** or **Dropdown**.                                                                                                                                                                               |
| 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**. |

### Background

| Setting          | Description                                                                           |
| ---------------- | ------------------------------------------------------------------------------------- |
| Background media | Section-level background media, such as an image or video.                            |
| Image            | Section background image.                                                             |
| Image — Mobile   | Separate background image for mobile.                                                 |
| Video            | Shopify-hosted background video. Autoplays muted.                                     |
| 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. |

### Color

| Setting      | Description                   |
| ------------ | ----------------------------- |
| Color scheme | 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. |

***

## Available Blocks

### Tab

A single bundle step. Add one 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.                                                            |