Mix-and-match packs

The Mix-and-match packs section lets shoppers fill a pack sticker by sticker and watch it fill. On one side: your stickers as small die-cuts, each with its name and a stepper. On the other: a Pack of 5 and Pack of 10 control and Your sheet, a blank sticker sheet with a numbered slot for each sticker. Each sticker added slaps into the next slot at its own small tilt. Under the slots: "3 of 5", "2 to go", a progress bar and the button. When the sheet is exactly full, the button changes from "Add 2 more" to Add pack to bag · $18.00. On phones, the sheet docks at the bottom of the section as shoppers scroll through the stickers.

Set it up

1. Create the pack product in admin, with an option called Size and one variant per pack, priced per pack: "Pack of 5" at $18.00 and "Pack of 10" at $32.00. Because the price is on the variant, no discount app is needed.
2. Tag it mix-pack (or the tag you set in Theme settings › Mix-and-match packs › Mix pack tag), and set its Theme template to product.mix-pack. Do both: "The pack has no Add to bag of its own", below, says why.
3. Create the stickers collection. Each sticker is a product in one collection. They can be products you also sell on their own, or products that exist only for the pack. The pack, anything else with the Mix pack tag and your Gift products never show as stickers, even if they're in the collection. Tiles follow the collection's own order, so choose the sort order you want (Manually gives you full control).
4. Choose the stickers. In the theme editor, open the pack product, select the Mix-and-match packs section under the Product section and choose your collection as the Stickers collection. Leave Pack product blank: on a product template it uses the page's product.
5. Add it to the home page too, if you like. All three presets have the section there already: choose the Pack product and the Stickers collection. Anywhere else, click Add section and choose Mix-and-match packs.

The section's settings:

With no product or no collection, the theme editor shows a sample tagged Sample and shoppers see nothing. A pack product without the tag gets a warning in the theme editor, because its own page and cards can still sell it with no stickers.

The pack size comes from the variant's name. Peel takes the first number in the option's value, so "Pack of 10" holds 10, "10 stickers" holds 10 and "Dozen" holds nothing. A value with no number is left out, and the theme editor lists it. If no value has a number, the pack can't be built: the editor says so and shoppers don't see the section. You aren't limited to 5 and 10. With only one size, the control hides.

How it behaves

• The sum rule. The counts must add up to exactly the pack size before the pack can be added. + stops once the pack is full and − at 0. Shoppers can repeat a sticker as often as they like.
• Changing size. Switching from 10 to 5 with 8 chosen keeps all eight: "8 of 5. Take out 3 to fit this pack." Nothing is dropped silently, and the button stays off until it fits.
• Sold-out stickers stay listed, with "Sold out" in place of the stepper and a greyed image, so shoppers know the sticker exists. If every sticker is sold out, the section says "All stickers are sold out for now."
• A sold-out pack size shows as unavailable in the size control.
• After adding, the steppers reset and the bag opens.
• A sticker's name links to its product, in a new tab, so a half-filled sheet isn't lost.
• Screen readers hear each step ("3 of 5 chosen.") and the limit ("Pack full. 5 of 5.").

On the order

The pack is one line item, with one property, written exactly like this, in the collection's order:

To call it something else, such as Rolls, change Cart property name. In the bag, the line also shows up to five small round pictures of the chosen stickers, then "+5". A hidden _thumbs property holds those; it starts with an underscore, so Shopify hides it at checkout, and you can ignore it.

What to know about price and stock:

• The shopper pays the pack variant's price. The stickers' own prices aren't shown in the section, and aren't added up.
• Stock is counted on the pack. The sticker products' stock isn't touched by a pack sale, so track stock on the pack variants, and mark a sticker sold out yourself when you run out.

The pack has no Add to bag of its own

The section is the only place a pack gets its stickers, and a pack added anywhere else would have none on it. So a product with the Mix pack tag can't be bought any other way:

• On its own page the Variant picker, Add to bag, Buy it now and the sticky bar are gone. A Pick your stickers button takes the shopper down to the section instead.
• On cards the round + links to its page, with no quick add and no Quick view button.
• Quick view shows a Pick your stickers link, should a search result or an app open it.
• A Featured product section and Bundles show the same link, and the Quick order list doesn't show on it.

If the page has no working pack, because the product uses another template or no Stickers collection is chosen, shoppers see "This pack can't be filled on this page yet. Get in touch and we'll take your order.", with a link to the page with the handle contact if you have one. The theme editor says what's missing in place of that line. Nothing offers an unfilled pack.

With script turned off the section's add button stays off too, and the section says the pack needs JavaScript.

If you make your own template for a pack, it needs a Mix-and-match packs section with Pack product blank or set to that product.