> 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/product-bundle.md).

# Product bundle

Pair one lifestyle image with a list of the products in it, so customers can buy the whole look at once. Hotspot pins mark each product on the image, and an **Add all to cart** button below the list adds every item together — with the bundle total shown on the button.

As the customer scrolls, the image stays in view while the product list scrolls alongside it.

![Product bundle section overview](/files/2xfuHlGTv99ZwO2azxFi)

***

## Style

| 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. |
| Image width    | How wide the image is relative to the content column.                                                                                                                           |
| Image position | Which side of the row the image sits on.                                                                                                                                        |
| Color scheme   | Color scheme for the whole section.                                                                                                                                             |

### Gap

Space between the image and the content column, set separately for desktop and mobile.

### Content

| Setting   | Description                                |
| --------- | ------------------------------------------ |
| Max width | Caps how wide the content column can grow. |
| Position  | Aligns the content within its column.      |

### 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. |

### Padding

Outer spacing above and below the section, with an optional separate set for mobile.

***

## Image

The lifestyle photo the pins sit on.

| Setting                 | Description                                                                             |
| ----------------------- | --------------------------------------------------------------------------------------- |
| Image                   | The desktop image.                                                                      |
| Mobile Image (optional) | Separate image for mobile.                                                              |
| Image ratio             | Crop ratio — Original, Square (1:1), Portrait (4:5, 3:4, 2:3), or Landscape (3:2, 4:3). |
| Corner radius           | Rounding of the image corners — Inherit, Square, Rounded, or Custom.                    |
| Custom corner radius    | The exact radius, when Corner radius is Custom.                                         |

The pins themselves are not set here — each one belongs to its **Product** block.

***

## Header

The heading area above the product list. It holds **Subheading**, **Heading**, and **Spacer** blocks by default, and accepts the theme's standard content blocks.

***

## Product list

The boxed list of products, its intro line, and the **Add all to cart** button.

| Setting          | Description                                               |
| ---------------- | --------------------------------------------------------- |
| Text             | The line shown above the list. Clear it to hide the line. |
| Font size        | Size of that intro line.                                  |
| Show dividers    | Adds a separator line between product rows.               |
| Add button style | Style of the **Add all to cart** button.                  |

### Pricing

Adds a total row above the **Add all to cart** button, with an optional **Save** pill. The total is the price **after** the discount you configure here, and it updates live as customers change variants.

| Setting             | Description                                                                                                                  |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Show total          | Shows the total row. Off by default — with it off, the section shows no total anywhere.                                      |
| Show discount       | Adds the **Save** pill next to the total. Hidden while there is nothing to save.                                             |
| Discount method     | **Percentage** or **Fixed amount**.                                                                                          |
| Discount percentage | Percent off, when the method is Percentage.                                                                                  |
| Discount value      | Money off in your store's currency, when the method is Fixed amount. Converted for other currencies and capped at the total. |

{% hint style="warning" %}
These settings only **display** a saving — they take nothing off at checkout. The real discount is a Shopify automatic discount you create separately, and the values here must mirror it. For the full walkthrough, see [How to set up a product bundle](/helix/how-to-guides/how-to-set-up-a-product-bundle.md).
{% endhint %}

### Product card

Styles each product row. Setting a border or a shadow turns the rows into visible cards.

| Setting          | Description                     |
| ---------------- | ------------------------------- |
| Border thickness | Border around each product row. |
| Shadow           | Shadow depth on each row.       |

### Gap

Space between the product rows, set separately for desktop and mobile.

### Appearance

| Setting              | Description                                                    |
| -------------------- | -------------------------------------------------------------- |
| Border thickness     | Border around the list container.                              |
| Corner radius        | Roundness of the list corners.                                 |
| Custom corner radius | Exact corner radius, used when Corner radius is set to Custom. |
| Shadow               | Shadow depth of the list container.                            |

### Color

**Type** — whether the list inherits the section's color scheme or carries its own.

### Padding

Spacing inside the list container, with an optional separate set for mobile.

***

## Product

One entry in the bundle: the product it links to, and the pin that points at it on the image.

| Setting               | Description                                    |
| --------------------- | ---------------------------------------------- |
| Product               | The product this row and pin represent.        |
| Show hotspot on image | Whether this product shows a pin on the image. |

### Hotspot position

| Setting                                 | Description                                                      |
| --------------------------------------- | ---------------------------------------------------------------- |
| Horizontal                              | Pin position across the image.                                   |
| Vertical                                | Pin position down the image.                                     |
| Custom mobile position                  | Enable to place the pin differently on mobile.                   |
| Horizontal (mobile) / Vertical (mobile) | The mobile pin position, used when Custom mobile position is on. |

{% hint style="info" %}
If your mobile image is a different crop from the desktop one, turn on **Custom mobile position** — otherwise the pins will drift off their products on small screens.
{% endhint %}

{% hint style="warning" %}
Products that are sold out, or that have no image, still occupy a row in the list. Remove the **Product** block if you don't want it shown while it's unavailable.
{% endhint %}