# Multiple product bundles 🔥

<Tabs>
<Tab title="Desktop view">

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(36)_tcpqn3YN.jpg)

</Tab>

<Tab title="Mobile view">

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(37)_re2qnWzY.jpg)

</Tab>
</Tabs>

<Hint type="info">

This design is available from ✨version 1.2.0 and above. ✨

See: [Changelog](/hyper-theme/changelog)

</Hint>

The **Multiple product bundles** section helps you showcase several curated product sets, each with an **"Add All to Cart"** button to streamline the buying process. Perfect for upselling kits, routines, or seasonal sets, this section supports both visual storytelling and direct conversion.

<Hint type="success" title="What this section does&#x20;">

* Add one **introductory image card** (optional).
* Add **multiple bundle blocks**, each featuring up to **5 products.**
* Let customers **add full bundles to cart** in one click.
* Display a **sold-out warning** if any product in a bundle is unavailable.

</Hint>

<Hint type="warning">

This section is for **display purposes only**. To apply actual discounts (e.g. "Buy all 3 and save 20%"), you need to set them up in **Shopify Admin > Discounts**.

See Shopify’s guide here → [Create Discounts](https://help.shopify.com/en/manual/discounts)

</Hint>

## How to add a Multiple product bundles section to your Shopify store

<Hint type="success">

**Steps:**

1. In the theme editor (**Customize**) > click **Add section**
2. Select **Multiple product bundles.**
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit a Multiple product bundles section

### Section settings

<Tabs>
<Tab title="General">

![image](https://docs-assets.foxecom.app/hyper-theme/image_UBunntWc.png)

* **Container**: `Full width` or `Fixed width` layout
* **Color scheme**: Choose color preset for the section. This will affect the background, text, and button colors.
  * Learn more: [Colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors)

</Tab>

<Tab title="Section header">

![image](https://docs-assets.foxecom.app/hyper-theme/image_jcshjkew.png)

<Expandable title="See settings">

* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.
* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

✨[Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)

* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Text size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.

</Expandable>

</Tab>

<Tab title="Grid settings">

![image](https://docs-assets.foxecom.app/hyper-theme/image_3N81f5fo.png)

* **Number of columns on desktop**: 2–5 block columns on desktop.
* **Column gap**: Adjust spacing between blocks.

</Tab>

<Tab title="Product cards">

![image](https://docs-assets.foxecom.app/hyper-theme/image_4l00Wx0Z.png)

* **Color scheme:** Select a color preset used for the product cards.
* **Image ratio:** Set the ratio of the product cards' images.

</Tab>
</Tabs>

### Block settings

<Hint type="info">

This section is made up of two block types:

1. **Image card** – Visual hook at the start of the section.
2. **Product bundles** – Each block = one bundle of 2–5 products.

</Hint>

<Tabs>
<Tab title="Image card block">

![image](https://docs-assets.foxecom.app/hyper-theme/image_5jSR98Z0.png)

💡 **Tip:** Use this block to highlight a discount or announce a new routine.

**Settings include:**

* **Image upload**: Use lifestyle or campaign visuals
* **Image overlay opacity**: Add a semi-transparent layer over the image to improve text readability.&#x20;
  * `0%` = No overlay
  * `100%` = Fully opaque (black cover)
* **Overlay text**: Add heading/subheading over the image
* **CTA button**: Link to a landing page, collection, or promotion
* **Overlay opacity**: Adjust for better text readability
* **Content alignment**: Control position on desktop and mobile

</Tab>

<Tab title="Product bundles block">

![image](https://docs-assets.foxecom.app/hyper-theme/image_Duv1KA0u.png)

Each bundle slider showcases **up to 5 products** with title, pricing, variant selector (if available), and one-click **“Add All To Cart”** button.

**Settings:**

* **Heading**: Title for the bundle.
* **Products**: Select 2–5 products for each bundle.

📝 **Note:** The order of the products in the block reflects the order in the slider.

> ⚠️ **Sold-Out notice:**\
> If any product in the bundle is out of stock, the block will show a **warning message**.

![image](https://docs-assets.foxecom.app/hyper-theme/image_Ti8yS55n.png)

</Tab>
</Tabs>