# Multiple product bundles 🔥

{% tabs %}
{% tab title="Desktop view" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FXRcH7UcEx72HM7AwOZt1%2FHyper%20docs%20screenshot%20do%20not%20delete%20(36).jpg?alt=media&#x26;token=49d2f405-ba47-4a97-86cb-eb7e82b43ddd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile view" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FmsXOZiaqYICIPHo7hfiE%2FHyper%20docs%20screenshot%20do%20not%20delete%20(37).jpg?alt=media&#x26;token=9560f2fa-dd37-4d01-8eb1-f087419a7be0" alt="" width="375"><figcaption></figcaption></figure>
{% 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&#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.
  {% 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" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FrYAlRw0rD9HJzdddCwwA%2Fimage.png?alt=media&#x26;token=29c1a651-8393-4904-87d9-8ce8975c36b1" alt=""><figcaption></figcaption></figure>

* **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" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fv8JQ0KU5zN2t1wcorpGL%2Fimage.png?alt=media&#x26;token=3494c4dc-1402-4b41-b815-035ec51537e6" alt=""><figcaption></figcaption></figure>

<details>

<summary>See settings</summary>

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

</details>
{% endtab %}

{% tab title="Grid settings" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fdk1Z0Xy4vBWFQNlbx8yd%2Fimage.png?alt=media&#x26;token=94aac0e8-0167-4fd6-8771-0fa7ec0e0200" alt=""><figcaption></figcaption></figure>

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

{% tab title="Product cards" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fm4rHK9pYN584l0smfRED%2Fimage.png?alt=media&#x26;token=ead0f909-5126-4371-a9c6-64ace8744743" alt=""><figcaption></figcaption></figure>

* **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" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FY3i0cjhYBGGI4MrPnR4Q%2Fimage.png?alt=media&#x26;token=78bd2ae8-49be-4d3e-8dc7-2a8eac1f7c23" alt=""><figcaption></figcaption></figure>

💡 **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
  {% endtab %}

{% tab title="Product bundles block" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FE4IIqUd4S96C2LT0Y92f%2Fimage.png?alt=media&#x26;token=c8ae2d7b-4766-402f-8f5d-bbd7afbd5d2b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FxWx7Q4yEyv0D421RVbBu%2Fimage.png?alt=media&#x26;token=b827b117-8705-4c24-98de-e291603f5aeb" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>