> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/bundle-builder.md).

# Bundle builder

Let shoppers build their own bundle from a set of products and see tiered quantity discounts unlock as they add items.

{% hint style="warning" %}
**Pro feature.** This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. [Learn about plans and License keys](/articles/general-information/license-key-and-plans.md)
{% endhint %}

***

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.

{% hint style="danger" %}
**Important:** The discount percentages in this section are for display only. To actually apply the discount at checkout, create a matching **automatic discount** in your Shopify admin (**Discounts** > **Create discount** > **Amount off products**, with a minimum quantity requirement) for each tier.
{% endhint %}

### 1. Our guide to set up a Bundle builder section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Bundle builder.**
* Select a **Collection** (or pick individual **Products**) in the section settings.
* Adjust the **Discount tier** blocks to match the automatic discounts in your Shopify admin.
* Click **Save.**
  {% endhint %}

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