Bundle builder
Let shoppers build their own bundle from a set of products and see tiered quantity discounts unlock as they add items.
The Bundle builder section shows a grid of products that shoppers can add to a "Your bundle" summary panel, then add the whole bundle to the cart in one click. A progress bar shows each discount tier (for example, 10% off 2 items, 15% off 3 items) and tells shoppers how many more items they need to unlock the next discount. Use it on a landing page or collection page to encourage larger orders.
1. Our guide to set up a Bundle builder section:
2. Section settings
Section header
Subheading: Small text shown above the heading.
Heading: The main title of the section.
Heading size: Size of the heading, 15–80px.
Heading alignment: Left / Center.
Description: Short text shown below the heading.
Header position: Where the heading and description appear: Above the product grid / Above the summary panel.
Products
Collection: The collection whose products appear in the grid.
Products: Choose specific products instead. When set, this overrides the collection.
Products to show: How many products appear in the grid, 2–16.
Columns on desktop: Number of product columns on desktop, 2–4.
Columns on mobile: 1 column / 2 columns.
Maximum items in bundle: The most items a shopper can add in total, 0–20. Set to 0 for no limit.
Product card
Image ratio: Adapt to image / Portrait / Square / Arch.
Show second image on hover: Shows the product's second image when a shopper hovers over the card.
Show image border: Adds a border around product images.
Show vendor: Shows the product vendor on each card.
Show product rating: Shows star ratings on each card. Requires a product rating app.
"Add" button style: Style of the Add button on each card: Solid / Outline.
Summary panel
Panel heading: Title of the summary panel (default "Your bundle").
Button label: Text on the add-to-cart button (default "Add bundle to cart").
Button style: Solid / Outline.
Show sticky summary bar on mobile: Shows a floating bar at the bottom of the screen on mobile with the item count. Tapping it opens the bundle summary as a slide-up panel. The bar hides once the shopper scrolls to the summary panel itself.
Colors
Color scheme: Color scheme for the summary panel only: Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.
Progress bar color: Fill color of the discount progress bar. Leave empty to use the color scheme's text color.
Section padding
Top padding: 0–100px.
Bottom padding: 0–100px.
3. Discount tier block settings
Each Discount tier block adds one step to the progress bar. The section can have up to 5 tiers.
Minimum total items: How many items (in total across the bundle) the shopper must add to unlock this tier, 2–20.
Discount percentage: The discount shown for this tier, 1–60%.
4. Tips
Always create a Shopify automatic discount for each tier with the same minimum quantity and percentage. The section only displays the savings; Shopify applies the discount at checkout.
Shoppers can pick a variant from a dropdown on each card, then use the + / − buttons to change quantities. Sold-out products show a disabled Sold out button.
On desktop, the summary panel sits in a column beside the grid and stays in view as shoppers scroll. On mobile, it appears below the product grid, so turning on Show sticky summary bar on mobile is recommended for longer grids.
To sell a fixed, pre-selected set of products instead of a shopper-built bundle, use the Product bundle section.
Was this helpful?