Drop-in section
Quantity breaks
A volume-focused ladder with stacked or column steps, configurable image fit, real variant swatches, and optional per-unit pricing.
Built for: Single-product volume discounts — “buy 3, save 15%”.
Interactive demo
Use the controls merchants actually get.
The catalog data is illustrative. Every configurable section and block setting, plus each folded variant, is synced from the committed Liquid schema.
Custom bundle · illustrative catalogBuy more, save moreAdd 1 more to unlock 15%
Campaign coverage
How Quantity breaks handles each offer.
The four campaign tabs in the demo show one illustrative state per supported builder mode, including selectable, preselected, and locked gift states. Fixed bundles use a standard product page and expand at checkout.
| Campaign state | Rendering in this design |
|---|---|
| Custom bundle | Product selection, progress, qualifying step, totals, and add-to-cart. |
| Build-a-box sections | Named groups and live section counts within the shared storefront payload. |
| Quantity breaks | Purpose-built stacked or column pricing ladder. |
| Free gifts | Gift selection is present, without the design-specific locked-gift treatment. |
| Fixed bundle | Not applicable. Shoppers buy the fixed parent product through its standard product form. |
Every setting
The schema, rendered without drift.
55 settings across the section and its reorderable blocks.
| Group | Setting | Type | Options | Default | What it changes |
|---|---|---|---|---|---|
| Section | Campaign ID (optional) | text | — | Theme default | Leave empty on product and collection pages — the section finds the campaign targeting the page. Set an ID (cmp-…) to always show one campaign. IDs appear in the app's campaign editor URL and Diagnostics page. |
| Section | Heading | text | — | Buy more, save more | Controls this part of the section in the Theme Editor. |
| Section | Subheading | text | — | Theme default | Controls this part of the section in the Theme Editor. |
| Section | Accent color | color | — | #e94f64 | Controls this part of the section in the Theme Editor. |
| Section | Gift accent color | color | — | #b8863b | Controls this part of the section in the Theme Editor. |
| Section | Text color | color | — | Theme default | Leave empty to inherit the theme text color. |
| Section | Card background | color | — | #ffffff | Controls this part of the section in the Theme Editor. |
| Section | Image fit | select | Cover (crop to fill), Contain (show whole product) | cover | Cover fills the shape and crops edges; Contain shows the whole product without cropping. |
| Section | Section background | color | — | Theme default | Leave empty to inherit the theme background. |
| Section | Corner style | select | Rounded, Soft, Square | rounded | Controls this part of the section in the Theme Editor. |
| Section | Show discount labels on the progress track | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Section | Limit content width | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Section | Content width | range | — | 1040 | Controls this part of the section in the Theme Editor. |
| Section | Variant options | select | Color swatches and buttons, Buttons, Dropdowns | swatches | Products with multiple options show one row per option, such as Color and Size. |
| Message bar | Show progress track | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Message bar | Empty state | text | — | Pick your bundle size to start saving | Controls this part of the section in the Theme Editor. |
| Message bar | Progress ({remaining}, {label}, {discount}) | text | — | Add {remaining} more to unlock {discount}% off | Controls this part of the section in the Theme Editor. |
| Message bar | Gift prompt | text | — | Nice! Choose your free gifts below | Controls this part of the section in the Theme Editor. |
| Message bar | Ready ({discount}) | text | — | {discount}% off unlocked — add your bundle to the cart! | Controls this part of the section in the Theme Editor. |
| Message bar | Adding | text | — | Adding your bundle… | Controls this part of the section in the Theme Editor. |
| Message bar | Added | text | — | Your bundle is in the cart 🎉 | Controls this part of the section in the Theme Editor. |
| Message bar | Over largest bundle | text | — | You’ve exceeded the largest bundle size — remove some items | Controls this part of the section in the Theme Editor. |
| Message bar | Category below minimum ({remaining}, {label}) | text | — | Add {remaining} more to {label} | Controls this part of the section in the Theme Editor. |
| Message bar | Items count ({count}) | text | — | {count} in your bundle | Controls this part of the section in the Theme Editor. |
| Message bar | Editing a carted bundle | text | — | You’re editing a bundle from your cart — updating replaces it. | Controls this part of the section in the Theme Editor. |
| Message bar | Editing: unavailable items ({dropped}) | text | — | Heads up: {dropped} item(s) from your original bundle are no longer available and won’t be included. | Controls this part of the section in the Theme Editor. |
| Message bar | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Countdown timer | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Countdown timer | Label | text | — | Ends in | Controls this part of the section in the Theme Editor. |
| Countdown timer | Ended text | text | — | Offer ended | Controls this part of the section in the Theme Editor. |
| Products | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Products | Tier view | select | Stack — cards top to bottom, Columns — pricing-table style | stack | Controls this part of the section in the Theme Editor. |
| Products | Show per-unit price | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Products | Show strike-through full price | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Products | Card size (fallback grid) | range | — | 180 | The grid fits as many cards as the space allows. |
| Products | Add button label (fallback grid) | text | — | Add to bundle | Controls this part of the section in the Theme Editor. |
| Products | Added button label (fallback grid) | text | — | Added | Controls this part of the section in the Theme Editor. |
| Products | Per-product limit note ({max}) | text | — | Limit {max} per product | Controls this part of the section in the Theme Editor. |
| Products | Category status ({label}, {count}, {max}) | text | — | {label}: {count} of {max} | Controls this part of the section in the Theme Editor. |
| Products | Category status, no max ({label}, {count}, {min}) | text | — | {label}: {count} selected — pick at least {min} | Controls this part of the section in the Theme Editor. |
| Products | Category status, optional ({label}, {count}) | text | — | {count} chosen | Controls this part of the section in the Theme Editor. |
| Products | Tier deal ({min}, {discount}) | text | — | Buy {min}+ — save {discount}% | Controls this part of the section in the Theme Editor. |
| Products | Per-unit price ({price}) | text | — | {price} each | Controls this part of the section in the Theme Editor. |
| Free gifts | paragraph | — | Theme default | Controls this part of the section in the Theme Editor. | |
| Free gifts | Heading | text | — | 🎁 Free gift unlocked | Controls this part of the section in the Theme Editor. |
| Totals | Subtotal label | text | — | Subtotal | Controls this part of the section in the Theme Editor. |
| Totals | Discount label | text | — | Bundle discount | Controls this part of the section in the Theme Editor. |
| Totals | Total label | text | — | Total | Controls this part of the section in the Theme Editor. |
| Totals | Savings line ({amount}, {discount}) | text | — | You save {amount} · {discount}% off | Controls this part of the section in the Theme Editor. |
| Add to cart | Button label | text | — | Add bundle to cart | Controls this part of the section in the Theme Editor. |
| Add to cart | Show the total on the button | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Add to cart | Button label while editing a carted bundle | text | — | Update bundle | Controls this part of the section in the Theme Editor. |
| Add to cart | Updated message | text | — | Your bundle is updated 🎉 | Controls this part of the section in the Theme Editor. |
| Add to cart | Show error messages | checkbox | — | On | Controls this part of the section in the Theme Editor. |
| Add to cart | Open the cart after adding | checkbox | — | On | Opens your theme's cart drawer when the bundle is added. Themes that don't support this ignore it. |
Text and labels
Your words stay in the theme.
Generic storefront wording is theme-owned. The campaign keeps only the cart title and each step’s message and badge.
Before and after
Section · HeadingBuy more, save more
Build your summer set
Editable in this design
- Campaign ID (optional)Section
- HeadingSection
- SubheadingSection
- Empty stateMessage bar
- Progress ({remaining}, {label}, {discount})Message bar
- Gift promptMessage bar
- Ready ({discount})Message bar
- AddingMessage bar
- AddedMessage bar
- Over largest bundleMessage bar
- Category below minimum ({remaining}, {label})Message bar
- Items count ({count})Message bar
Reorderable blocks
Keep what earns its place.
Removing a block removes that presentation layer, not the checkout rule. Shopify still validates the price.
01
Message bar
Removes the progress, ready, and status message area.
02
Countdown timer
Removes the schedule-bound countdown from this design.
03
Products
Removes the product or quantity selection surface.
04
Free gifts
Removes the dedicated free-gift presentation area.
05
Totals
Removes the illustrative subtotal, savings, and total display.
06
Add to cart
Removes the design’s add-bundle button.
Installation paths
Pick the least complicated path that fits.
01
Theme app block
The standard no-theme-write route. It uses the app-block renderer rather than installing this committed design file.
02
One-click is gated
This path stays hidden in production until the protected theme-write capability is available.
03
Manual install
Copy the self-contained section and place it in a compatible theme template.
Remixable display layer
Change the presentation without changing the pricing authority.
The theme renders the campaign, the storefront engine owns selection and cart intent, and Shopify checkout validates the result.
Three layers, one direction
- Theme and published Shopify data
- Selection and cart engine
- Shopify checkout pricing