# Products bundle

<figure><img src="/files/KpD9w6j25nY9X220USJq" 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="/pages/LHMEEJzFAAyBfjuU3BDC">/pages/LHMEEJzFAAyBfjuU3BDC</a></p> |

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

![](/files/UfjDIj8fbHQerVvGD3Nk)

✅ 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**.

![](/files/g8MnE1JR94BisunutjD7)

![](/files/kBpNjFt8rsBcijvgHJKH)
{% 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="/files/Xe5XhXhqq1z6ija9mJpq" 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: [Basic](/pebble-theme/theme-blocks/basic.md#text)

</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="/files/ApQ9j8zqrGTkPg5ROlMt" 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="/files/7tPFEQl4RYS16BxbGWMo" 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>


---

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