# Multiple product bundles 🔥
{% tabs %}
{% tab title="Desktop view" %}
{% endtab %}
{% tab title="Mobile view" %}
{% endtab %}
{% endtabs %}
{% hint style="info" %}
This design is available from :sparkles:version 1.2.0 and above. :sparkles:
See: [changelog](https://docs.foxecom.com/hyper-theme/changelog "mention")
{% endhint %}
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 style="success" %}
## What this section does
* 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.
{% endhint %}
{% hint style="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)
{% endhint %}
## How to add a Multiple product bundles section to your Shopify store
{% hint style="success" %}
**Steps:**
1. In the theme editor (**Customize**) > click **Add section**
2. Select **Multiple product bundles.**
3. Make necessary changes.
4. **Save.**
{% endhint %}
## How to edit a Multiple product bundles section
### Section settings
{% tabs %}
{% tab title="General" %}
* **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 "mention")
{% endtab %}
{% tab title="Section header" %}
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.
:sparkles:[add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")
* **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.
{% endtab %}
{% tab title="Grid settings" %}
* **Number of columns on desktop**: 2–5 block columns on desktop.
* **Column gap**: Adjust spacing between blocks.
{% endtab %}
{% tab title="Product cards" %}
* **Color scheme:** Select a color preset used for the product cards.
* **Image ratio:** Set the ratio of the product cards' images.
{% endtab %}
{% endtabs %}
### Block settings
{% hint style="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.
{% endhint %}
{% tabs %}
{% tab title="Image card block" %}
đź’ˇ **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.
* `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
{% endtab %}
{% tab title="Product bundles block" %}
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**.
{% endtab %}
{% endtabs %}
***
---
# 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/hyper-theme/theme-sections/multiple-product-bundles.md?ask=
```
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.
.jpg?alt=media&token=49d2f405-ba47-4a97-86cb-eb7e82b43ddd)
.jpg?alt=media&token=9560f2fa-dd37-4d01-8eb1-f087419a7be0)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)