Bundle builder
ProConversionv1.0.0
Raise order value with a build-your-own box. Add a Product block for each product shoppers can pick; they choose options from a styled list (with search for long ones) and add items, each flying into a box with a space per item, while a track lights up your reward tiers (for example 5%, 10% and 15% off) and a message says how many more unlock the next one. The whole box goes to the cart in one add through Shopify's standard cart actions, so your theme's cart drawer opens, and each line carries a hidden bundle reference so orders show which items came together. On phones the box rides along at the bottom of the screen and opens for details.
Good for: Build your own gift box · Mix and match sets · Sample or variety packs
When to use it
Use it on your home page or a landing page for a gift box, a mix-and-match set or a sample pack.
- Bigger orders that feel like a choice. Shoppers fill a box with a set number of items from products you pick, instead of buying one thing.
- A reason to add one more. A track shows your reward tiers, and a message says how many more items unlock the next one, for example Add 1 more to unlock 10% off.
- Orders you can recognize. The whole box goes to the cart in one add, and each line carries a hidden bundle reference, so your orders show which items came together.
Set it up
Add the section
Choose Add section and pick SU: Bundle builder. It starts with six Product blocks that show example cards until you pick products.
Pick the products
Select each Product block and choose a product. Add a block for each product shoppers can choose, up to 24. Under Products per row on desktop, choose 2, 3 or 4. Products with options get a list to pick the option before adding.
Size the box
Under Box, set Items in a full box (2 to 12). Fewest items to add the box is how many items it takes before Add box to cart works; it can’t be more than the box size. Rename the box in Box title.
Set the rewards
Under Rewards, each tier has a number of items and a label, for example First reward at (items) set to 2 with First reward set to 5% off. Set a tier’s number to 0 to turn it off. Tiers are counted up in order of their number of items. A tier that needs more items than the box holds doesn’t show; the theme editor tells you when that happens.
Create the matching discounts
The box only shows rewards; it doesn’t change prices. In Shopify, go to Discounts and create an automatic discount for each tier, for example Amount off products on the products in the box, with a minimum quantity of items that matches the tier. Use Note under the total to tell shoppers where the savings appear; the default says Savings apply at checkout.
Choose what happens after adding
Under After adding to cart, choose Open the cart or Stay on the page.
If you show a reward without creating the matching discount in Shopify, shoppers won’t get it at checkout.
Try it
Settings
In the theme editor, in the order you'll see them. Every section also has the heading and style settings.
Box
| Setting | What it does |
|---|---|
| Box titleText | |
| Items in a full boxSlider (2–12) | |
| Fewest items to add the boxSlider (1–12) | Capped at the box size. |
Rewards
| Setting | What it does |
|---|---|
| First reward at (items)Slider (0–12) | 0 turns it off. |
| First rewardText | |
| Second reward at (items)Slider (0–12) | |
| Second rewardText | |
| Third reward at (items)Slider (0–12) | |
| Third rewardText | |
| Note under the totalText | |
| After adding to cartDropdown |
Blocks go inside the section: use Add block, up to 24 in all, and drag them to change the order.
Good to know
- Rewards are shown, not applied: create matching automatic discounts in Shopify (for example Amount off products with a minimum quantity).
- Up to 24 products, one Product block each.
- Each line in the cart is a separate product; Shopify's native bundles (one line with components) need a bundles app.
- Without JavaScript the box is hidden and each card's Add puts that product in the cart on its own.
Changelog
- 1.0.0: Initial release.