Quantity Breaks
Buy More, Save More. Incentivize higher order values by offering tiered discounts and free gifts based on the quantity of products added to the cart.
Overview
The Quantity Breaks section is a powerful conversion tool designed for modern Shopify stores. It replaces the standard quantity selector with a high-converting "bundle" interface that highlights savings and value. By presenting multiple purchase options—such as "Buy 2, Get 10% Off"—merchants can significantly increase their Average Order Value (AOV).
This section is highly flexible, supporting up to 6 distinct quantity tiers, customizable badges (like "Best Value"), and a unique free gift progression system. It integrates directly with Shopify’s native discount engine to ensure a seamless checkout experience for your customers.
How It Works
Lumin 2.0 Handles
- Quantity break UI: Renders the selection cards, prices, and descriptions on the product page.
- Offer selection: Manages the customer's choice and updates the active selection state.
- Auto quantity updates: Automatically adjusts the Shopify cart quantity based on the selected card.
- Auto adding free gift products: Handles the logic to inject free gift items into the cart when specific tiers are selected.
- Bundle styling and badges: Applies visual markers like ribbons, scalloped badges, and "Popular" tags.
Shopify Handles
- Actual discount calculation: The backend math that determines the final price.
- Buy X Get Y logic: The core engine for "free gift" or "percentage off" rules.
- Automatic discount application: Applying the price reduction without requiring a manual coupon code.
- Final checkout pricing: The definitive price displayed on the secure Shopify checkout page.
Note: Both parts must be configured correctly for the discounts to apply at checkout.
Key Features
- Tiered Discounts: Create up to 6 quantity-based tiers with percentage or fixed amount discounts.
- Free Gift Integration: Automatically unlock and display free gift products as customers choose higher quantity tiers.
- Variant Picker Support: Allow customers to select specific sizes or colors for every individual unit within a bundle.
- Smart Display Scope: Show breaks on all products, specific products, or entire collections.
- Customizable Badges: Highlight "Most Popular" or "Best Value" options using multiple badge shapes and styles.
- Price Per Unit: Optionally display the unit price to emphasize the savings compared to buying a single item.
- Color Swatches: Integrated support for color swatches within the variant pickers for a premium feel.
Step-by-Step Setup
- Open the Shopify Theme Editor and navigate to a Product page template.
- In the side panel, find the Product Information or Details group and click Add block.
- Search for "Quantity" and select Quantity Breaks.
- Set the Show quantity breaks on Product pages setting to determine where these offers appear.
- Configure your tiers under Option 1 through Option 6. Ensure Enable Option is checked for each tier you want to show.
- Go to your Shopify Admin > Discounts and click Create discount.
- Select Amount off products (for percentage/fixed price breaks) or Buy X get Y (for free gifts).
- Configure the discount as Automatic and ensure the Minimum quantity of items matches your theme settings.
- Return to the Theme Editor and scroll to the Colors header to match the cards to your brand identity.
- Click Save.
Best Practices
Images
- Use the Show images toggle to display product thumbnails within the cards.
- If your variants look identical, use a Custom image (e.g., an icon of a box or a bundle) to distinguish tiers.
Video
- If using product videos, ensure the Override product price setting is enabled so the price in the sticky bar or video overlay updates when a break is selected.
Mobile
- Use the Two column layout (Mobile) setting "Vertical" if your tier descriptions are long to prevent text overlapping.
- Optimize the Heading text size (Mobile) (default 20px) for smaller screens.
Performance
- Limit the Image size to the smallest legible dimension (usually 60px–80px) to keep page load speeds fast.
Conversion
- Set a Preselected option (usually Option 2 or 3) to guide users toward your most profitable bundle.
- Use Badge text like "[%] OFF" or "SAVE [amount]" to make the value proposition immediate.
Shopify Native Limitations
Even with Lumin 2.0, some limitations come from Shopify itself.
Limitation 1 — Automatic Discounts Cannot Fully Stack Shopify may not combine multiple automatic discounts together. Example: You cannot combine a "Quantity discount" with a "Free shipping discount" or a "Buy X Get Y" unless they are explicitly configured to combine in the Shopify Discount settings. This is a platform-level restriction.
Limitation 2 — Discount Conditions Must Match Exactly The quantity break configuration in the theme and the Shopify discount rules in the admin must match. Example: If the Theme bundle is set for quantity 3, but the Shopify discount requires minimum quantity 2, it may cause incorrect pricing display. Always keep quantities and products identical.
Limitation 3 — Checkout Is Controlled by Shopify The theme controls the Product page UI, Cart behavior, and the Gift auto-add logic. However, Shopify has absolute control over the final checkout pricing and discount validation.
Settings Reference
| Setting | Type | Default | Description | Effect |
|---|---|---|---|---|
| Show quantity breaks on Product pages | select | all |
Controls visibility across the store. | Filters block visibility. |
| Title | inline_richtext | Buy More, Save More |
The main section heading. | Text above cards. |
| Preselected option | select | option_2 |
Which tier is active on page load. | Adds active styling to the card. |
| Override product price | checkbox | true |
Updates the main product price based on selection. | Syncs price with selection. |
| Show price per unit | checkbox | false |
Shows "Price / Pieces". | Highlights individual unit value. |
| Show variant picker | checkbox | false |
Allows per-unit variant selection. | Shows dropdowns/swatches in cards. |
| Show images | checkbox | true |
Displays product/custom images. | Adds visual thumbnails. |
| Columns per row (Desktop) | range | 3 | Card grid layout for desktop. | Sets width of tiers. |
Option Tiers (1–6)
Settings repeat for each enabled option.
| Setting | Type | Default | Description |
|---|---|---|---|
| Enable Option | checkbox | Varies | Activates this specific quantity tier. |
| Label | inline_richtext | Buy X |
The title shown on the card. |
| Quantity | range | Varies | Number of items added when selected. |
| Discount type | select | percentage |
Choose between Percentage or Fixed. |
| Discount | range | Varies | Percentage value (if percentage selected). |
| Discount amount | number | 0 | Fixed cent amount (e.g. 500 = $5.00). |
| Badge text | inline_richtext | Popular |
Text for the corner badge. |
| Description | html | Save [%] |
Secondary text on the card. |
Troubleshooting
Issue: The price on the product page doesn't match the price in the checkout. Cause: The "Minimum Quantity" in Shopify Admin > Discounts does not match the quantity set in the Theme Editor for that tier. Solution: Ensure the Quantity in the option tier settings exactly matches the Minimum quantity of items in the Shopify Discount rule.
Issue: Free gifts are not being added to the cart automatically. Cause: The gift product is out of stock or the "Buy X Get Y" discount is a discount code rather than an Automatic discount. Solution: Change the discount type in Shopify Admin to Automatic discount and verify the gift product has inventory.
Issue: Variant pickers are not appearing inside the cards. Cause: The product only has one variant or the Show variant picker checkbox is disabled. Solution: Enable Show variant picker and ensure the product has options like Size or Color.
Issue: The "Best Value" badge is overlapping with the product title. Cause: The Gap (desktop) setting is too low for the current font size. Solution: Increase the Gap (desktop) or Padding top (desktop) in the Layout settings panel.
FAQ
Q: Can I offer a different discount code for each tier?
Yes. Use the Discount code field in each Option settings block. Note that Shopify only allows one discount code at a time; automatic discounts usually provide a better user experience.
Q: How do I show the the discount amount saved (e.g., Save $10)?
In the Description or Badge text fields, use the [amount] placeholder. The theme will automatically calculate the difference between the base price and the discounted price.
Q: What happens if a specific quantity tier is sold out?
You can check the Show as sold out box for that specific tier. This will disable the card and apply the Sold out card background specified in the "Sold out options" settings.
Q: Can I use this for non-product pages?
The Quantity Breaks block is designed specifically for the Product template as it needs to interact with the current product's selected_or_first_available_variant.
Q: Does this support currency conversion?
Yes. The pricing logic uses your store's money format and currency settings. If you use a currency switcher app, the prices will reflect the converted value.
Q: Why is the price not updated on the main product price block?
Ensure Override product price is enabled. Also, check that your theme uses the standard class for the price block so the JavaScript can identify and update the element.
0 comments