# Products bundle

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light_KpD9w6j2.jpg)

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 type="success">

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

</Hint>

## How to customize a Products bundle section

### 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: [Colors](https://docs.foxecom.com/pebble-theme/theme-settings/colors)</p> |

<Hint type="success">

The section show a **Add all to cart** button at the bottom of the bundled products list.

![](https://docs-assets.foxecom.app/pebble-theme/image_UfjDIj8f.png)

✅ 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://docs-assets.foxecom.app/pebble-theme/image_g8MnE1JR.png)

![](https://docs-assets.foxecom.app/pebble-theme/image_kBpNjFt8.png)

</Hint>

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

* **2 static blocks:**

<Expandable title="Header – add heading, subheading, and text inside the header">

<div data-with-frame="true">![image](https://docs-assets.foxecom.app/pebble-theme/image_Xe5XhXhq.png)</div>

#### 📦 Nested dynamic blocks

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

<Table widths="219.5386962890625,auto">

| Dynamic blocks | Purpose |
| --- | --- |
| **Heading** | Primary title text used to introduce the section or key content. |
| **Subheading** | Secondary text that provides additional context or supports the main heading. |
| **Text** | Regular body text used for descriptions, details, or any supplementary information within the block. |

</Table>

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

</Expandable>

<Expandable title="Banner – add and configure the banner image displayed next to the product bundle content.">

<div data-with-frame="true">![image](https://docs-assets.foxecom.app/pebble-theme/image_ApQ9j8zq.png)</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.        |

</Expandable>

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

<Expandable title="Product – add products to the bundle and customize their hotspot positions and settings.">

<div data-with-frame="true">![image](https://docs-assets.foxecom.app/pebble-theme/image_7tPFEQl4.png)</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.                           |

</Expandable>