> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/products-bundle.md).

# Products bundle

<figure><img src="/files/dItvzLcrUVvqaxVy02hS" 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**. \
![](/files/VYyCmp5CjrVWX1Wne1cr)
{% 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="/files/eSaWcKG3hUeWY0cRGXgn" 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/ZxFdF1oKUnZZwOCogQFE#highlight-text">/pages/ZxFdF1oKUnZZwOCogQFE#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="/files/gOIDOxHpl1VfU7zl2fYZ" alt="" data-size="original"></li><li>Dark:</li></ul><p>       <img src="/files/MNfFDOvNuA0Crpe3kPEz" 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>