# Products bundle

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FayHU7H4leHBhLbE6auTI%2FFox-BG%20Light%20(51).jpg?alt=media&#x26;token=3d01e858-e099-4826-8fc5-9b51f795a6b2" alt=""><figcaption></figcaption></figure>

Display a group of products that work well together—like a makeup set, outfit combo, or skincare routine. Each item is highlighted visually using numbered hotspots over an image, helping customers understand how the products complement one another.&#x20;

Perfect for cross-selling and increasing average order value.

## How to add a Products bundle section to your Shopify store

{% hint style="success" %}
**Steps:**

1. In the theme editor (**Customize**) > click **Add section**
2. Select **Products bundle**
3. Make necessary changes
4. **Save.**
   {% endhint %}

{% hint style="info" %}
All items included in the bundle will be added to the card when using 'Add All to Cart' button.

To change the button label, go to **Actions > Edit default theme content**. \
![](https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fe67iR3kxbz8DiEDGV4Ld%2Fimage.png?alt=media\&token=0066e88f-05de-422a-847d-6bccf0283c93)
{% endhint %}

## How to edit a Products bundle

### Section settings

<table><thead><tr><th width="245">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Upload an image that includes all products in the bundle.<br><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FTx82Leet5NoY2c5oUNlY%2Fimage.png?alt=media&#x26;token=cd13e447-73b2-4cc6-be53-ffe41f62aa52" alt=""></td></tr><tr><td><strong>Image position</strong></td><td>Choose whether the image appears on the left or right.</td></tr><tr><td><strong>Subheading / Heading</strong></td><td>Add compelling copy to introduce the bundle.</td></tr><tr><td><strong>Highlighted text</strong></td><td>Emphasize part of the heading using highlight styling.<br><a data-mention href="../../pages-global-sections/general-settings#highlight-text">#highlight-text</a></td></tr><tr><td><strong>Desktop &#x26; Mobile Padding</strong></td><td>Control spacing inside the section.</td></tr><tr><td><strong>Content alignment</strong></td><td>Align content left, center, or right.</td></tr></tbody></table>

### Block settings

<table><thead><tr><th width="245">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Product</strong></td><td>Select a product from your catalog.</td></tr><tr><td><strong>Hotspot color</strong></td><td><p>Set to <strong>Light</strong> or <strong>Dark</strong> for visibility on the image.</p><ul><li>Light:<br><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F0KzuoSKcXZzQlzsEiZdq%2Fimage.png?alt=media&#x26;token=32d9ccae-9fa9-436e-aca9-ec61f41017ec" alt="" data-size="original"></li><li>Dark:</li></ul><p>       <img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fn2xTUBrqUAPWm9ssd396%2Fimage.png?alt=media&#x26;token=fa4d7d8d-0b26-4a63-b366-dc1b8ce7c3ae" alt=""></p></td></tr><tr><td><strong>Horizontal / Vertical position</strong></td><td>Adjust where the numbered dot appears on the image.</td></tr></tbody></table>