Hyper Theme
Hyper Theme
Theme Sections

Products bundle selection 🔥

4 min read

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

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.

image

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 add a Products bundle selection section to your Shopify store

Steps:

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

How to edit a Products bundle selection section

Section settings

The Section header display above the products list.

Located on the right-hand side of the section (titled “Your Bundle”), this module updates in real time as customers add items.

image

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.

💡 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
image

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.
image
  • 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.
  • Number of columns on mobile: Choose 1 or 2 product cards per row.
image
  • Enable swipe on mobile: Toggle ON to allow horizontal swiping for a smoother user experience.
image

The section show a Add Bundle to Cart button at the bottom of the bundle bar when the discount tier is reached.

✅ Customers can pick the variant (e.g., size, color) before adding everything to their cart.

To change the section content like bundle bar's heading, ATC button label, etc, go to Actions > Edit default theme content.

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

📌 How to set up the discount

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

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

Last updated

Products bundle

Previous Page

Promotion banner

Next Page

ON THIS PAGE

How to add a Products bundle selection section to your Shopify storeHow to edit a Products bundle selection sectionSection settingsBlock settings📌 How to set up the discount

Was this helpful?