Bundle Deal Section

June 4, 2026

Bundle deals

Drive higher average order value with a custom-built product bundle experience.

Overview

The Bundle deals section is a high-conversion upsell tool designed to let customers build their own curated sets of products. By offering a "Mix & Match" experience, you empower shoppers to choose the specific variants they want while working toward localized discount thresholds. This section is ideal for beauty routines, apparel sets, or gift box configurations.

Rather than a static bundle, this section functions as a dynamic "mini-app" on your page. Customers browse a selection of products, add them to a live summary sidebar, and see real-time progress toward meeting your bundle requirements. Once the criteria are met, the bundle is added to the cart as individual line items with a synced discount code applied at checkout.

Key Features

Flexible Product Selection: Populate the section via a specific Collection or a manually curated Product List.
Visual Progress Tracking: Motivate customers with animated progress bars for both flat and multi-tier discounts.
Dynamic Tiered Discounting: Create multiple levels of savings (e.g., 3 items for 10% off, 5 items for 20% off) using Discount Tier blocks.
Integrated Variant Selection: Allow customers to pick sizes or colors directly within the bundle builder without leaving the page.
Smart Discount Injection: Automatically applies a Shopify discount code to the checkout after the bundle is compiled.
Customizable Summary Sidebar: Style the checkout panel with custom borders, colors, and typography to match your branding.

Step-by-Step Setup

Open the Shopify Theme Editor.
Navigate to the page where you want to add the bundle (e.g., Home page or a dedicated landing page).
Click Add section and select Bundle deals.
In the settings panel on the right, select a Collection or manually choose products using the Products list.
Set your Minimum items to require (e.g., 3) and Maximum items allowed in a single bundle.
Choose your Discount style. Select "Single percentage" for a simple deal or "Tiered by item count" for complex rewards.
If using "Tiered," click Add block to create Discount tier blocks. For each block, define the minimum quantity and the reward percentage.
Scroll to the Heading settings and customize your title. Use brackets like [this] to apply a color gradient or solid highlight to specific words.
Adjust the Bundle summary settings to customize the instruction text and the progress bar colors.
Customize the UI labels such as Bundle label and Checkout disclaimer.
Click Save.

Best Practices

Images

Use consistent aspect ratios for your product photography to ensure the grid remains aligned.
Ensure your primary product images are high-resolution but optimized under 300KB for fast loading.

Mobile

Test your Number of columns on mobile setting. For products with long titles, "1 column" often provides a better shopping experience than "2 columns."
Keep subtitle text concise to prevent excessive scrolling before reaching the summary panel.

Conversion

Set a "Minimum items to require" that is slightly higher than your usual average order quantity to nudge customers upward.
Use the Highlight style to draw attention to the most attractive part of your offer, like the discount percentage.
Create matching discount codes in your Shopify Admin > Discounts that exactly match the codes entered in the section settings.

Settings Reference

Setting	Type	Default	Description	Effect
Collection	collection	-	The collection used to populate the grid.	Sets the product source.
Products	product_list	-	Replaces collection when selected.	Allows manual product curation.
Maximum products to show	range	6	Total items displayed in the browsing grid.	Controls layout length.
Number of columns on mobile	select	2 columns	Grid layout for mobile devices.	Sets 1 or 2 items per row.
Section width	select	Page width	The horizontal span of the section.	Switches between boxed or edge-to-edge.
Minimum items to require	range	3	Items required before the checkout button enables.	Sets the barrier to entry.
Maximum items	range	12	The upper limit for a single bundle.	Prevents bulk-order abuse.
Discount style	select	Single percentage	Toggle between flat or tiered rewards.	Changes how savings are calculated.
Bundle discount (%)	range	0	Flat discount applied to the bundle.	Sets the "Single percentage" rate.
Discount code (fallback)	text	-	The code sent to the checkout.	Finalizes the checkout discount.
Heading	inline_richtext	Build your [bundle]	The main section title.	Displays at the top of the section.
Highlight style	select	Gradient	Visual effect for text in brackets.	Choose between Gradient or Solid.
Show savings badge	checkbox	true	Displays a percentage badge on product cards.	Highlights individual product value.
Show variant selector	checkbox	true	Allows variant switching in the grid.	Enables size/color selection.
Summary color scheme	color_scheme	-	The theme scheme for the sidebar.	Changes sidebar background and text.

Block: Discount tier

Used when Discount style is set to "Tiered by item count".

Setting	Type	Default	Description	Effect
Minimum total items	range	3	Requirement for this specific tier.	Triggers this reward level.
Discount (%)	range	10	Savings for this tier.	Calculates the tier savings.
Tier label	text	{quantity}+ · {discount}%	Legend text for the progress bar.	Displays under the progress segments.
Discount code	text	-	Priority code for this tier.	Overrides fallback code at checkout.

Troubleshooting

Issue: The checkout button is disabled even though I added products. Cause: The number of items in the bundle summary is less than the Minimum items to require setting. Solution: Add more products until the progress bar is full. The button will automatically enable once the minimum count is met.

Issue: Brackets [ ] are showing up in my heading. Cause: The brackets are intended to wrap text for the highlight effect but may appear raw if no text is inside them or if the Heading setting is malformed. Solution: Ensure your heading looks like Build your [Bundle] with the text you want highlighted inside the brackets.

Issue: The discount isn't showing up at the final Shopify checkout. Cause: The Discount code in the Theme Editor does not match an active code in your Shopify Admin. Solution: Go to Shopify Admin > Discounts and create a "Percentage" discount code that matches the string in your section settings exactly.

Issue: Product cards look different from my other collection pages. Cause: This section uses a specialized Secondary color scheme for product cards to distinguish them from the main page background. Solution: Adjust the Secondary color scheme setting or the Regular price color settings to align styles.

FAQ

Q: Does this create a new "Bundle" product in my admin?

No. This section adds individual products to the cart as separate line items. This ensures your inventory tracking remains accurate for every specific variant chosen.

Q: Can I offer "Buy 3, Get 1 Free" with this?

The section is designed for percentage-based discounts. For "Buy X Get Y," it is recommended to use the Tiered mode and calculate the effective percentage (e.g., 4 items for 25% off equals one free).

Q: How does the "Highlight style" work?

In the Heading or Bundle label fields, any text wrapped in square brackets — [like this] — will receive the highlight color or gradient defined in your settings.

Q: What happens if a product in the bundle goes out of stock?

The builder checks real-time inventory. If a product or variant is sold out, the "Add to bundle" button will disable, preventing customers from adding unavailable items.

Q: Can I use this on a Product page for that specific product?

Yes, but the section works best with a collection of complementary items. If used on a product page, it acts as a "Complete the Look" builder.

Q: Is the discount code applied automatically?

Yes. When the customer clicks the checkout button in the bundle summary, the section script attempts to apply the configured discount code to the cart session before redirecting or opening the drawer.