# Products bundle selection 🔥 {% embed url="" %} {% 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 **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.

{% 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 %}

See settings

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

{% 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.

**Bundle bar settings include:** * **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" %}

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

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

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

{% 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. ![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FSEhhuJ0dnJufwStVUSd5%2Fimage.png?alt=media\&token=c0c04eef-f7c4-497c-9217-cfc1c5db8271) :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**. ![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fjb5wQBJHr99Mg46BUc0j%2Fimage.png?alt=media\&token=b8a0fba7-f869-40b7-9235-be193646ed5e) ![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FxQ632yrazU4RW2N1Deap%2Fimage.png?alt=media\&token=f8621a7e-a180-4cb5-8ffd-315e304ef24b) {% 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.

## :pushpin: How to set up the discount 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 %}

Example setup

We offer 2 discount tiers for the section:

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

***