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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/theme-sections/products-bundle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.