Trafik Plus
Product & collection pages

Set up a Build-a-box bundle section

Updated today

The Build a box section adds a bundle builder to a Pops theme page: shoppers pick products and variants, set quantities, unlock a tiered discount, and add the finished bundle to the cart. Set it up in the Shopify theme editor by placing the section on a page template, choosing the product collection, and configuring bundle limits and discount tiers. This is a Pops theme section, not a Snap Bundle offer.

Before you start

The section is placed on a page template, so you host it on a Shopify page. The Pops theme ships a dedicated custom page template (page.build-your-box) that already contains the section; assign it to the page that hosts your bundle builder, then open that page in the theme editor. The section is not available in header or footer groups.

Add the section to a page

Place the Build a box section on the page template before configuring it. When the theme-editor section picker is used, the Build a box preset appears under Product.

  1. In the Shopify admin, assign the page.build-your-box template to the page that should show the bundle builder.

  2. In the theme editor, open that page and locate the Build a box section.

  3. If the template doesn't already include it, add the section from the section picker, choosing Build a box under Product.

Choose the product selection

Products come from a single Shopify collection, and the section shows only products from it. The products render only when a collection is selected and it has products; with no collection or an empty one, the section shows placeholder cards.

  1. In the section settings, set Collection to the collection that supplies the products customers build their box from.

  2. Set Products to show to how many products from the collection to display, from 1 to 24 (default 12).

  3. Set Variant picker type to Dropdown (default) or Buttons.

  4. Keep Show swatches (when available) on to display color swatches when your product data provides them.

Set bundle limits and discount tiers

Bundle limits cap how many items a customer can add, and the discount tiers reward a larger box. The summary button stays disabled until the bundle reaches the minimum, so customers can't submit an undersized box.

  1. Set Minimum quantity to the lowest total items a customer can add, from 1 to 19 (default 1).

  2. Set Maximum quantity to the highest total items, from 1 to 20 (default 3). Each product's quantity control caps at this value, and an add that would exceed it is rejected with You can add up to {maximum} items.

  3. Configure the four Discount tiers, each an item count and discount (%) pair. Item counts run from 1 to 20 and discounts from 0% to 90%.

  4. Turn on Show progress bar to show customers how close they are to the next tier (on by default).

The default tiers are:

Tier

Item count

Discount

First

1

5%

Second

2

15%

Third

3

30%

Fourth

5

45%

At checkout-time the section ignores any tier whose item count or discount is zero and sorts the rest by item count. The active tier is the highest one whose item count is at or below the customer's total quantity, and the discount is applied to the bundle subtotal. Before a tier is reached the customer sees Add {remaining} item(s) to get {percent}% OFF; once reached, Bundle discount applied: {percent}% OFF.

Apply the discount tiers at checkout

The bundle builder's tier pricing is a preview calculated inside the theme; the section sends only variant IDs and quantities when it adds the bundle to the cart. To make the same tiers apply at checkout, create one native Shopify automatic discount per tier: an Amount off products discount with a Minimum quantity of items requirement set to the tier's item count. A 3-item box at the 30% tier shows on page ($26.97 minus $8.09) and applies the equivalent discount in the cart (about $8 saved), as long as the discounts mirror the section's tiers.

Prefer to manage the discount with an app instead of manual automatic discounts? Snap Bundle is a separate Shopify app you can use to apply offers and discounts; follow the Set up Bundle builder Page for the closest build-your-own-box experience.

The theme preview and the checkout discount are separate systems with no sync between them. Configure the box collection first (see Choose the product selection), then target that same collection in every discount below.

  1. In Shopify admin, go to Discounts and create a discount, choosing Amount off products and method Automatic.

  2. Set Discount value to Percentage and enter the tier's percent (5 for 1 item, 15 for 2, 30 for 3, 45 for 5).

  3. Set Applies to to Specific collections and select the box collection.

  4. Under Minimum purchase requirements, choose Minimum quantity of items and enter the tier's item count.

  5. Under Combinations, uncheck Product discounts so the tiers don't stack.

  6. Set Active dates to start now with no end date, then save and confirm the discount is Active.

  7. Repeat for the other three tiers.

When several discounts could apply, Shopify applies whichever gives the best value for the customer's cart, so a box that falls short of a higher tier settles on the next lower tier instead of stacking. Test each tier in a real checkout to confirm the box preview and the cart discount match.

The discount's minimum quantity counts every cart line from the targeted collection, not only items added through the box builder — the same product added from its product page also counts. Because the first tier is 1 item/5%, any single product from the collection gets 5% off at checkout, even outside the box; if that's not intended, raise the first tier's item count in the section and set the matching minimum in the discount. Also note the box's Maximum quantity (default 3) caps how many total items a customer can add through the builder, so the 5-item tier is unreachable with defaults — reach it only by raising that setting. Changing a tier in the theme editor never updates the matching Shopify discount; edit them together.

Configure the intro text

An intro above the product cards appears only when you add content blocks to the section. The default preset adds a heading block and a body text block, and the shipped template uses Build Your Perfect Bundle for the heading and Choose your favorites and unlock exclusive discounts. for the body.

  1. In the section, open the Text block used as the heading and set the text you want.

  2. Open the Text block used as the body and set the supporting copy.

  3. Add or remove Text blocks as needed; each block's Type is set to Heading or Body.

Test the customer experience

Preview the page and run through the full flow before publishing to confirm product choices, discounts, and cart behavior work as configured.

  1. In the theme editor, open the page preview and choose a product, a variant, and a quantity, then use Add to bundle.

  2. Confirm that a product whose selected variant is out of stock or unavailable can't be added — its Add to bundle button is disabled.

  3. Confirm the Bundle summary lists each item with its price and quantity, and that Subtotal, Bundle discount, and Total update as you add items.

  4. Confirm Add bundle to cart stays disabled until the total quantity reaches the minimum, and that the total is never below zero.

  5. Click Add bundle to cart and confirm all selected items are added to the cart at once.

See the Build a box reference for the full settings table and the complete list of customer-facing labels.

Was this helpful?
Was this helpful?