# Products bundle selection 🔥

{% embed url="<https://youtu.be/AvhUvf0VgYM>" %}

{% hint style="info" %}
This design is available from :sparkles:version 1.2.0 and above. :sparkles:

See: [Changelog](/hyper-theme/changelog.md)
{% endhint %}

The **Products bundle selection** section lets you offer curated product bundles from multiple collections—designed to encourage higher order values through discounts. Customers can pick products from tabs (collections), view them in a real-time bundle preview, and automatically get a discount when they meet your set conditions.

<figure><img src="/files/SbRqnb6A1di5uF4UeWQ1" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
This section only displays the bundle UI. To activate the actual discount at checkout, you must set it up in **Shopify admin > Discounts**.

[#how-to-set-up-the-discount](#how-to-set-up-the-discount "mention")
{% endhint %}

## How to add a Products bundle selection section to your Shopify store

{% hint style="success" %}
**Steps:**

1. In the theme editor (**Customize**) > click **Add section**
2. Select **Products bundle selection.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit a Products bundle selection section

### Section settings

{% tabs %}
{% tab title="Section header" %}
{% hint style="info" %}
The Section header display above the products list.
{% endhint %}

<details>

<summary>See settings</summary>

* **Text alignment:** Control how the section header is aligned.
* **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.

:writing\_hand: [Add Highlighted text to your Headings](/hyper-theme/faqs/add-highlighted-text-to-your-headings.md)

* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.

<figure><img src="/files/mmJyrMN73i83quUQ1CRY" alt=""><figcaption></figcaption></figure>

</details>
{% endtab %}

{% tab title="Bundle bar" %}
Located on the right-hand side of the section (titled “Your Bundle”), this module updates in real time as customers add items.

<figure><img src="/files/yRhviPWQg5ClIUasyV3O" alt=""><figcaption></figcaption></figure>

**Bundle bar settings include:**&#x20;

* **Description**: Customize instructional text.
* **Maximum items**: Set the max number of products users can bundle (up to 6).
* **Prevent duplicate products**: Toggle ON to disallow adding the same item multiple times.
* **Number of discount tiers**: Choose `1 tier`, `2 tiers`, or `3 tiers` for scaling offers.

{% hint style="info" %}
💡 **Best practice:** Use tiered discounts to boost AOV (average order value) and create urgency.

Each tier allows:

* **Minimum items to use discount code**
* **Discount percentage**
* **Custom label** (e.g., “Add 3 to get 10% OFF”)

**🎯** *Discount tiers (Example setup)*

* **Tier 1**: Add 3 items → get 10% off
* **Tier 2**: Add 5 items → get 15% off
* **Tier 3**: Add 6 items → get 20% off
  {% endhint %}
  {% endtab %}

{% tab title="Grid settings" %}

<figure><img src="/files/7DDdumJHss3iohCgoqQb" alt=""><figcaption></figcaption></figure>

Control the product layout inside each tab.

* **Maximum products to show**: Limit the number of products shown per collection tab.
* **Number of columns on desktop**: Set the grid layout (e.g., 4 columns).
* **Column gap** and **Row gap**: Adjust spacing between items.
  {% endtab %}

{% tab title="Product cards" %}

<figure><img src="/files/DC6MDhX2Jv5wjACo5zCu" alt=""><figcaption></figcaption></figure>

* **Image ratio:** Choose a custom image ratio for the product cards in this section or use the global setting.
* **Text line limit**: Define how many lines of product title to display.
  {% endtab %}

{% tab title="Mobile layout" %}

* **Number of columns on mobile:** Choose *1* or *2* product cards per row.

<figure><img src="/files/0pLAHefuh9qzzJKy1lCP" alt=""><figcaption></figcaption></figure>

* **Enable swipe on mobile:** Toggle ON to allow horizontal swiping for a smoother user experience.

<figure><img src="/files/H769TRp6m5moaUm13aZh" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="success" %}
The section show a **Add Bundle to Cart** button at the bottom of the bundle bar when the discount tier is reached.

![](/files/LKgUEy72fxaDtLRuAUE3)

:white\_check\_mark:  Customers can pick the variant (e.g., size, color) before adding everything to their cart.
{% endhint %}

{% hint style="info" %}
To change the section content like bundle bar's heading, ATC button label, etc, go to **Actions > Edit default theme content**.

![](/files/FY0qQlImjcSvUhKseEVv)

![](/files/ehou7RnXj1spj47ptVtb)
{% endhint %}

### Block settings

Each block represents a **product collection tab** inside the bundle section.

* **Collection**: Choose the specific collection you want to feature.
* **Title**: Optional override for the tab name. Leave blank to use the collection’s default title.

<figure><img src="/files/6aj2GZZT0Gg2mS4dUBt3" alt=""><figcaption></figcaption></figure>

## :pushpin: How to set up the discount&#x20;

The theme only displays the bundle visually. To make the discount functional at checkout, follow these steps:

{% hint style="success" %}

### Create the discount in Shopify admin:

1. Go to **Shopify Admin > Discounts**
2. Click **Create Discount**
3. Choose:
   * **Type**: `Amount off products`
   * **Method**: `Automatic discount`
4. Set **Discount value**: e.g., 10%
5. Under **Applies to**, select **Specific collections** → Choose collections used in the section.
6. Set **Minimum quantity of items**: Match the tier settings (e.g., 3 items minimum).
7. Do the same with other discount if you offer different discount tiers.
   {% endhint %}

<figure><img src="/files/3IaVpZYccUfeEXf50Da5" alt=""><figcaption></figcaption></figure>

<details>

<summary><em><strong>Example setup</strong></em></summary>

We offer 2 discount tiers for the section:

<figure><img src="/files/nHdyOvSGYpAeFAG8Ij6I" alt=""><figcaption></figcaption></figure>

Then we need to create 2 automatic discounts based on relevant requirements:

<figure><img src="/files/Xm8iCgHuJC9ss7BSOJ4L" alt=""><figcaption></figcaption></figure>

</details>

***

<figure><img src="/files/6RW1JWuKNf9ovVFLkLXc" 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>


---

# 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/products-bundle-selection.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.