The modular bundle system of Scale Theme with 6 bundle types, mixins, and optimized loading.
Bundles Overview
Scale Theme includes a complete bundle system built directly into the theme, with no third-party app required. With 6 bundle types and a modular architecture, you can create powerful grouped offers that increase average order value.
The 6 bundle types
| Type | Description | Use case |
|---|---|---|
| **Quantity** | "Buy 2, save 10%" | Consumable products, refills |
| **Variant** | Each variant = a tier | Sizes, formulas (S/M/L) |
| **BOGO** | Buy X, get Y free | Promotional offers, launches |
| **Pack** | Multi-product bundles | Routines, kits, sets |
| **Mix & Match** | Customer builds their own bundle | Assortments, custom boxes |
| **Progressive gifts** | Gifts unlocked by tier | Loyalty, purchase incentives |
Modular architecture
Scale Theme uses a modular JS architecture for bundles. Instead of a monolithic file, each bundle type loads only the code it needs.
Size reduction
| Bundle | Before (monolithic) | After (modular) | Reduction |
|---|---|---|---|
| Quantity | 57 KB | 30 KB | -47% |
| Pack | 57 KB | 32 KB | -44% |
| Mix & Match | 57 KB | 43 KB | -25% |
| Controller only | 57 KB | 2.8 KB | -95% |
How it works
src/scripts/bundles/
├── bundle-base.js # Shared abstract class
├── bundle-controller.js # Factory pattern (dynamic loading)
├── bundle-quantity.js # Quantity bundles
├── bundle-variant.js # Variant bundles
├── bundle-bogo.js # Buy One Get One
├── bundle-pack.js # Multi-product
├── bundle-mix-match.js # Custom composition
└── mixins/
├── gifts-mixin.js # Progressive gifts logic
├── subscription-mixin.js # Subscription support
└── upsell-mixin.js # Additional upsellEach bundle type is a Web Component (<bundle-block>) that extends BundleBase. The controller automatically detects the type via data-type and loads the corresponding script.
bundle-quantity.js is downloaded.Adding a bundle to a product
All bundles are available as product page blocks in the Shopify editor:
- Open the product page in the theme editor
- Click Add a block
- Select the desired bundle type
- Configure tiers, discounts, and display options
The 3 mixins
Mixins add additional functionality to any bundle type:
Gifts Mixin (Progressive gifts)
Allows unlocking free gifts based on quantity or amount. Compatible with all bundle types.
- Up to 3 gift levels
- Unlock mode: by quantity or by amount
- Display: within the tier card or below
- Optional progress bar
Subscription Mixin
Adds a subscription toggle to the bundle. Requires the product to have selling plans configured in Shopify.
- Style: checkbox, cards, toggle, or switch
- Subscription active by default (optional)
- Compatible with selling plan discounts
Upsell Mixin
Allows adding an extra product (e.g., protection, warranty) at the time of adding to cart.
JavaScript events
The bundle system emits custom events that you can listen to:
| Event | Description |
|---|---|
bundle:tier-selected | A tier has been selected |
bundle:gifts-unlocked | Gifts have been unlocked |
bundle:subscription-toggle | Subscription has been activated/deactivated |
bundle:added-to-cart | The bundle has been added to cart |
Discount configuration
Best practices
- Add a badge on the tier you want to promote ("Most popular", "Best value")
- Show savings so the customer immediately sees the advantage
- Use progressive gifts to encourage upgrading to a higher tier
- Test on mobile: the layout adapts automatically, but verify the rendering
- One bundle type per product: don't mix types