Blog /
Snack box builder for Shopify, a setup guide
Snack box builder for Shopify, set up step by step: box size tiers, steps by category, collection-fed catalogues, dietary badges, stock and mobile checks.
A snack box builder for Shopify lets the shopper choose a box size, fill it from your catalogue and pay one price at checkout, with the discount applied automatically. The same setup works for meal kits, coffee samplers, drinks crates and pantry boxes. This guide walks through building one in Elite Bundle Builder in the order that avoids rework: box tiers first, then steps, then the catalogue, badges, stock rules and the phone check.
Decide the box sizes before anything else
Start in the Offer tab because the box sizes drive everything after them. For a snack box the natural trigger is Number of items, with a tier per box size. A 6, 12 and 20 item ladder is typical: the 6 is the trial, the 12 is the one you want most people to buy, and the 20 is the family or office box.
Set the calculation to match how you price. Percentage off is easiest when items vary in price (a $2 bar next to a $6 jerky). Fixed target price is cleaner to advertise ("12 snacks for $30") but only works when items cost about the same; the bundle pricing strategy post has the margin table for choosing. Enter the tiers and save.
Then go to Design, then Discount display, and set the style to Box. Box shows one button per tier, the shopper picks a size before filling it, and the cart cannot hold more than that box. Choosing a smaller box drops the last-added items. Turn on the progress bar beneath the boxes so the shopper can see how full they are, and keep the savings hint on, since "add 2 more to save 10%" is the line that fills the last slots. Box is only offered for item-count tiers, which is one more reason to choose that trigger.
Build one step per category
In the Build tab, add a step for each category the shopper thinks in. For a snack box that is usually Savoury, Sweet and Drinks. A meal kit might be Base, Protein, Sides and Sauce. Keep step titles short and action-based: "Pick your savoury snacks" tells the shopper what to do; "Savoury" does not.
Three or four steps is the sweet spot. Every step you add is one more screen to get through, and for a box that is meant to be fun, five screens stops being fun. If a category is small, fold it into a neighbour rather than giving it its own step.
Per-step rules live under Config, then Rules. For a snack box the useful pattern is to leave the item limit off on most steps so the shopper can skip a category they do not want, and set Limit total bundle size across the whole bundle instead, so the box has to be full before it can be added. Turn on Stop at the top discount tier so the add buttons lock once the biggest box is full. One of each product only is worth switching on for a sampler and leaving off for a box where someone might want three of the same bar.
Source each step from a collection so it updates itself
Each step can take its products from a specific list or from a Shopify collection. For food, use collections. Create a Savoury collection, a Sweet collection and a Drinks collection in Shopify, tag or filter products into them, and point each step at one. When you add a new flavour next month, it appears in the box without opening the bundle editor. When a line is discontinued, remove it from the collection and it is gone from the box.
Specific products still have a place: a "Staff picks" step or a seasonal step where you want a hand-picked six. You can mix the two, with collection-fed steps for the main categories and a specific-product step for the feature. Drag products within a step to control the order; put the bestsellers first because most shoppers pick from the first row.
The build your own bundle docs cover product sources, reordering and duplicating steps.
Show dietary badges from metafields
Shoppers with a dietary need scan for the label before they read a name. Store the tags in a product metafield (a list of single-line text is best: Vegan, Gluten free, Nut free), give the definition storefront access in Shopify's Settings, Custom data, and add it in Elite under Config, then Custom data as a Badge on image. Each list entry becomes a chip on the card.
For calories and protein, add a second field as a Line under price, so the card reads "180 kcal · 9g protein" under the price. Keep the units in the metafield value. The full walkthrough, including why a field might show nothing, is in showing metafields on product cards.
Handle out-of-stock items before launch
Food catalogues turn over fast, so decide what happens when a product runs out. By default a sold-out product stays in the grid, marked as sold out, and cannot be added. This is honest and it shows the shopper the full range. The alternative is Hide out of stock items in Design, then Product card & variants, which removes them from the step entirely so the grid always looks full.
My preference for snack boxes is to hide them. A box builder is a game of filling slots, and a sold-out card is a slot the shopper tried and failed to fill. For a meal kit with a single hero protein, showing it as sold out with a note is kinder than making it vanish. Either way, inventory is tracked on the real products, so a snack that sells out on its own page sells out in the box at the same moment.
Use progress-style steps and keep the cart visible
In Design, then Steps, set Steps shown as to Progress. Numbered circles across the top show the shopper where they are and how many steps are left, which matters more on a box builder than anywhere else because the shopper is switching categories often. Turn on Product search if a step has more than a couple of dozen items.
For the bundle cart, Slots as the item style works well with a box: empty squares counting toward the target make the box feel like a physical thing being filled. Add a slot image from Shopify Files (a faint outline of a snack bag works) so empty slots are obviously empty. Show savings on, so the saving sits next to the total.
Check the phone before you publish
Most snack boxes are bought on a phone, often from an Instagram link. Switch the editor preview to mobile width and check that the box size buttons are tappable, the step navigation stays visible as you scroll, the chips over images do not crowd the product name, and the cart does not cover the last row of products. On the product-page templates (Grid and List), the cart can collapse into a drawer behind a toggle; on the full-page templates it stays on the page. Pick whichever keeps the add button reachable with a thumb.
Then run the discount test from the docs: fill a 6 box, a 12 box and a 20 box, check each price at checkout, and try adding a box that is not full to confirm the total limit holds. Keep the bundle Unlisted while testing and switch it to Active once the phone check and the three checkouts pass. The bundle discounts page lists what to expect at each tier, and the build your own bundle page shows a finished box for comparison.
Frequently asked questions
Can shoppers pick the same snack more than once?
Yes, unless you turn on One of each product only for that step under Config, then Rules. Leave it off for a snack box where someone wants three of the same bar, and switch it on for a sampler where variety is the point.
What happens when a snack in the box sells out?
Inventory lives on the real product, so it sells out in the box at the same moment it sells out on its own page. On the bundle page it either shows as sold out and cannot be added, or is removed from the grid if you enabled Hide out of stock items.
Do I need a separate bundle for each box size?
No. One bundle with one tier per box size covers all of them. The Box discount display puts a button per size on the page, and the shopper picks the one they want before filling it.
Elite Bundle Builder is free with no limits on bundles or orders. See the pricing page or install it from the Shopify App Store.