Products bundle selection 🔥
This design is available from ✨version 1.2.0 and above. ✨
See: Changelog
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.
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:
In the theme editor (Customize) > click Add section
Select Products bundle selection.
Make necessary changes.
Save.
How to edit a Products bundle selection section
Section settings
The Section header display above the products list.
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.
✍️ Add Highlighted text to your Headings
Text: Add a detailed explanation or summary for the banner. Use rich text formatting like bold, italic, links, and lists for better visual emphasis.
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, or3 tiersfor 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
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 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.
Enable swipe on mobile: Toggle ON to allow horizontal swiping for a smoother user experience.
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.
📌 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:
Go to Shopify Admin > Discounts
Click Create Discount
Choose:
Type:
Amount off productsMethod:
Automatic discount
Set Discount value: e.g., 10%
Under Applies to, select Specific collections → Choose collections used in the section.
Set Minimum quantity of items: Match the tier settings (e.g., 3 items minimum).
Do the same with other discount if you offer different discount tiers.
Example setup
We offer 2 discount tiers for the section:
Then we need to create 2 automatic discounts based on relevant requirements:
Last updated