Complete the set

Activewear sells in sets: a bra and leggings cut from the same fabric, in the same colour. Complete the set shows the matching pieces under the buy buttons, each already in the shopper's colour, and adds the whole set in one tap.

What shoppers see

Under the trust row and the Fabric and fit card, a card headed Complete the set lists the pieces that go with this product. Each row has the piece's picture in the matching colour, its name, colour and price, a size select (already set to the shopper's size when they've used the fit finder) and a tick box. Under them, a live total ("2 pieces · $170") and one button: Add 2 pieces to bag · $170.

Change the main product's colour to Fern and every piece follows. A piece that isn't made in Fern says Not in this colour, dims its picture, unticks itself, and offers small pictures of the colours it does come in; tapping one ticks it again in that colour. With a set discount set up, the total shows the full price struck through, the estimate, and "You save $17".

Set it up

1. Create the custom.set_with metafield (Product, List of products) and, on each piece, list the products that go with it: on the leggings, the bra; on the bra, the leggings (chapter 7). Up to three pieces show.
2. Use the same colour names on pieces that match: "Fern" on the bra and "Fern" on the leggings. Capitals and spaces at the ends don't matter; spelling does ("Fern" isn't "Fern green").
3. Name the colour option Colour or Color, or list your own name in Theme settings › Sets › Colour option names, and the size option Size, or your own name in Theme settings › Fit finder › Size option names.
4. Leave Set discount at 0 unless you create an automatic discount for sets (below).

Complete the set block settings

The block is in the product template (not product.no-set) and can go in Featured product.

Theme settings › Sets

Which pieces show

The pieces come from the product's custom.set_with, in its order. Rep skips the product itself, any piece that's completely sold out, and repeats, and shows up to Pieces to show. With no pieces left, the block shows nothing on your store. In the theme editor it shows two sample pieces with a "Sample" pill and a disabled button that says "Sample: add pieces in the product's Set with metafield".

How the colours match

When the page opens, and every time the shopper picks another colour, Rep reads the main product's colour and looks for the same colour name in each piece:

• Same colour found: the row shows that colour's picture (the variant's own image, so give each colour its image), its sizes and its price.
• Not found: the row says Not in this colour, dims its picture, hides its colour line, unticks and disables its box, and shows up to six small pictures of the colours it has in stock. Picking one ticks the piece again in that colour and moves the focus to its box. Choosing a new main colour clears those picks.
• No colour option on the main product or on the piece: the piece keeps its first colour in stock.

Sizes

Each piece's select lists its sizes in the colour shown, in your variant order. A size with nothing in stock stays in the list, disabled, as "XL, sold out". The size starts on the first of these that applies:

1. the size the shopper picked in that row;
2. the fit finder's size for that piece, worked out from the piece's own size chart (its custom.size_matrix, else the theme's) and its own firmness, so compression leggings can come out a size up from a relaxed bra (chapter 11);
3. the main product's size, if the piece has it in stock;
4. the first size in stock.

A new fit finder answer updates the rows the shopper hasn't touched. A piece without a size option has no select. When a piece has other options, such as an inseam, Rep picks the variant whose other values match the main product's best, in stock first.

The total

The total is the main product's price times the quantity in the buy box, plus each ticked piece. The count is the main product plus the ticked pieces ("2 pieces"). With nothing ticked, the button reads "Add to bag · $98" and adds the main product alone; when the main product's chosen variant is sold out, it reads "Sold out". After each change, screen readers hear the new count and total ("2 pieces, $170").

Set discount: you create it, the theme shows it

The theme doesn't create discounts. With Set discount above 0 and at least one piece ticked, Complete the set shows the full total struck through, an estimate (the total less that percentage, rounded to the cent) and "You save $17", and the Saving line beside the heading. The saving only reaches the shopper if you create a matching automatic discount in Shopify; otherwise checkout charges the full price and your product page has promised a saving you don't give.

To create one:

1. Make a collection of the products sold in sets, such as "Sets", in Products › Collections.
2. Go to Discounts › Create discount and choose Amount off products.
3. Under Method, choose Automatic discount and give it a title shoppers will see in the cart and at checkout, such as "Set saving".
4. Under Value, choose Percentage and type the same number as Set discount, such as 10.
5. Under Applies to, choose Specific collections and pick your sets collection.
6. Under Minimum purchase requirements, choose Minimum quantity of items and type 2.
7. Check Combinations and Active dates, then click Save.
8. In the theme editor, set Theme settings › Sets › Set discount to the same percentage, and check the block's Saving line says the same.

The theme's figure is an estimate: it takes the percentage off everything the button adds. Shopify applies your discount by its own rules, so make them agree, or set Set discount no higher than what every set will really get. The cart and checkout always show Shopify's real discount. To stop showing a saving, set Set discount back to 0. Show the set saving off hides only the saving line beside the heading; the struck total and "You save" follow Set discount.

Adding the set to the bag

The button adds the main product and every ticked piece in one go. Each line carries a private line item property, _set, shared by everything added together; properties starting with an underscore aren't shown to shoppers at checkout. In the cart drawer and on the cart page, those lines wear a small Set pill and sit next to each other, and each keeps its own quantity and Remove.

If Shopify can't add one of the items, it adds none of them, and the card says why under the button: "Lift high-support bra in M just sold out. Pick another size." The size is then disabled in that row. When the set is added, the button shows a check, the cart drawer opens, and screen readers hear "Sculpt leggings and Lift high-support bra added to your bag."

Buy it now stays on the product page and buys the main product alone: the set builder doesn't add anything Buy it now would lose.

Quick view

Quick view doesn't show the set picker. A product with pieces shows a link instead, "Complete the set on the product page", which opens the product page at its set.

The home page's Complete the set section

Every preset's home page has a Featured product section in the Set layout: the product and its first matching piece as two big pictures side by side, joined by a "+" disc, beside an eyebrow, a heading, a text and the Complete the set block. Both pictures follow the colour.

To use it:

1. Choose the section's Product: one with custom.set_with filled in, such as your leggings. Until you do, shoppers don't see the section.
2. Add a Variant picker block above Complete the set (and a Price block if you like), so shoppers choose the main product's colour and size there. The presets ship without one, and without it the set adds the main product in its first colour and size in stock, which the shopper never chose.
3. Rewrite the heading and text ("The Sculpt set", "Leggings and bra cut from the same squat-proof knit…") for your own set.

On phones the pictures stack above the words.