# Mix-and-match packs

Chapter 10 of the Peel user guide.

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**.

> **Note:** The presets come with **Stickers collection** pointed at all products. Change it before you publish. Left as it is, the section lists the first products in your whole catalogue: only the packs and gifts are left out.

The section's settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Eyebrow | "Mix and match" | The small line above the heading |
| Heading | "Build a pack of 5 or 10" | The section's heading |
| Intro text | "Pick your stickers, one by one. Doubles are fine." | The lede |
| Pack product | Empty | The product with your pack variants. Blank on a product template uses that page's product. |
| Pack size option name | "Size" | The option that holds your pack sizes. With no match, the first option is used. |
| Stickers collection | Empty (all products in the presets) | The stickers |
| Stickers to show | 12 (6 to 24) | The most tiles to list, from the top of the collection. Packs and gifts left out of the list don't use up a place. The presets' home pages use 8. |
| Cart property name | "Stickers" | The name of the line's property on the order. The Washi preset uses Rolls, and Retro Flair. |
| Background | Second lid colour | Page, Surface, First lid colour or Second lid colour |

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:

| Property | Example |
| --- | --- |
| `Stickers` | 2× Sleepy cloud · 1× Unbothered frog |

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.