# Products bundle

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FI6DulEXow77svH6Tp1oL%2FFox-BG%20Light.jpg?alt=media&#x26;token=e578f097-3138-40db-9bc8-c1bfed08c0ca" alt=""><figcaption></figcaption></figure>

Group multiple complementary products into a single offer, giving shoppers an easy and visually appealing way to add several items to the cart at once.

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

{% hint style="success" %}

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

## How to customize a Products bundle section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

### Section settings

| Setting                           | Description                                                                                                                                           |
| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Desktop image position**        | Choose between **left** or **right** for the image layout.                                                                                            |
| **Use color scheme in container** | Applies the selected color scheme to the section’s inner container only.                                                                              |
| **Color scheme**                  | <p>Choose a color scheme to apply to the section's background and text.<br>Learn more: <a data-mention href="../theme-settings/colors">colors</a></p> |

{% hint style="success" %}
The section show a **Add all to cart** button at the bottom of the bundled products list.

![](https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FOoejf685y4yaMHbFwwx6%2Fimage.png?alt=media\&token=92a67c53-f1c7-4baa-afce-02311a9c7225)

✅ Customers can pick the variant (e.g., size, color) before adding everything to their cart.

* To change this button label, go to **Actions > Edit default theme content**.

![](https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F63mdMllLADkqv1hyAxYM%2Fimage.png?alt=media\&token=2c690701-8c2b-4267-b785-bb5682f09f3f)

![](https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FS5gnNN7myQl8w3wxPkK3%2Fimage.png?alt=media\&token=67aeed51-a46c-4fe8-a4ae-0895b51dd7e1)
{% endhint %}

### The **Products** bundle **section** includes

* **2 static blocks:**

<details>

<summary>Header – add heading, subheading, and text inside the header</summary>

<div data-with-frame="true"><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FNg5RjJ3F8lzD4g8ST71D%2Fimage.png?alt=media&#x26;token=474a1db9-6b90-44ed-8d14-5d63bb01c8e3" alt=""><figcaption></figcaption></figure></div>

#### 📦 Nested dynamic blocks&#x20;

The **Header** block supports 3 nested block types:

<table><thead><tr><th width="219.5386962890625">Dynamic blocks</th><th>Purpose</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>Primary title text used to introduce the section or key content.</td></tr><tr><td><strong>Subheading</strong></td><td>Secondary text that provides additional context or supports the main heading.</td></tr><tr><td><strong>Text</strong></td><td>Regular body text used for descriptions, details, or any supplementary information within the block.</td></tr></tbody></table>

Learn more: [#text](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#text "mention")

</details>

<details>

<summary>Banner – add and configure the banner image displayed next to the product bundle content.</summary>

<div data-with-frame="true"><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F6kocZFEK0CDwCQK4kFZv%2Fimage.png?alt=media&#x26;token=c08334d3-8567-4ece-a35f-161c960c9070" alt=""><figcaption></figcaption></figure></div>

| Setting                 | Description                                           |
| ----------------------- | ----------------------------------------------------- |
| **Image**               | Upload the banner image.                              |
| **Image mobile**        | Upload a separate image optimized for mobile devices. |
| **Aspect ratio**        | Sets the image’s ratio                                |
| **Aspect ratio mobile** | Sets the image’s ratio specifically for mobile view.  |
| **Corner radius**       | Controls how rounded the banner’s corners are.        |

</details>

* **1 private block:**&#x20;

<details>

<summary><strong>Product</strong> – <strong>a</strong>dd products to the bundle and customize their hotspot positions and settings.</summary>

<div data-with-frame="true"><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FPDN97dFoWrwLI16Mb4YY%2Fimage.png?alt=media&#x26;token=234c2afd-633a-401d-8b4c-aa1b68d069ae" alt=""><figcaption></figcaption></figure></div>

| Setting                | Description                                                                    |
| ---------------------- | ------------------------------------------------------------------------------ |
| **Product**            | Select the product linked with the hotspot, following the top-to-bottom order. |
| **Color scheme**       | Choose the hotspot’s color style.                                              |
| **Offset top**         | Adjusts the hotspot’s vertical position on desktop.                            |
| **Offset left**        | Adjusts the hotspot’s horizontal position on desktop.                          |
| **Offset top mobile**  | Adjusts the hotspot’s vertical position on mobile.                             |
| **Offset left mobile** | Adjusts the hotspot’s horizontal position on mobile.                           |

</details>