Wear it with
Chapter 10 of the Ribbon user guide.
A stylist never sells a dress on its own. Wear it with suggests the pieces that finish the outfit, in three places, with sizes ready to add:
- Under the product: the Wear it with section, a centred head ("Chosen by our stylists", "Wear it with") and up to four cards whose size pills show under the price all the time, not only on hover. Pressing a size adds that piece in that size ("Size M added to your bag"). Sizes that are sold out are struck through, sizes nearly gone show "2 left", single-variant pieces show Add to bag, and pieces with other options but no size option show Choose options, which opens the product.
- In the cart drawer: under the lines, a small satin box with a bow and "Wear it with" and one suggestion for the first item in the bag: its photo, title, price and size pills (or Add to bag).
- In the buy box: a text link, "Wear it with the Rosie bow cardigan", that scrolls down to the section (or, with no section on the page, opens the paired product).
Products already in the shopper's bag, and the product itself, are never suggested.
Where the pairings come from
- Your own pairings first: the product's Wear it with metafield (
custom.wear_it_with, a list of products, chapter 7). Available pieces come first, in your order. - Shopify's complementary products: the ones you pin to a product in the free Search & Discovery app (below).
- Related products: the similar products Shopify works out by itself.
With Products set to Automatic (the default), the section uses the first of these that has anything. When none of them has a product, the section is hidden, heading and all. In the theme editor it shows four sample cards tagged Sample until it finds something.
Set up complementary products
- Install Shopify's free Search & Discovery app from the Shopify App Store and open it.
- Go to Recommendations, search for a product, and add its complementary products: the cardigan, flats and bag that go with the dress. Save.
- Repeat for the products you want to pair. Complementary products can take a little while to appear on your storefront after you save.
The same complementary products also feed the Product recommendations section when its Recommendation type is Complementary products. If you'd rather choose pairings product by product in the product's own page, use the metafield instead: it needs no app.
Wear it with settings
The Wear it with section goes on product templates (the presets put it right under the Product section):
| Setting | Default | What it does |
|---|---|---|
| Kicker | Chosen by our stylists | |
| Heading | Wear it with | |
| Products | Automatic | Automatic (the metafield, then complementary products, then related products), Wear it with metafield (only your own pairings), Complementary products (only Search & Discovery's complementary products) or Related products (only Shopify's related products) |
| Products to show | 4 (2 to 8) | |
| Columns on desktop | 4 | 3 or 4. With fewer pieces than columns, the cards are centred at the same size. |
| Show size quick add | On | The size pills and Add to bag buttons under each card. Off shows the cards alone. |
The Wear it with link block (in the Product and Featured product sections) has one setting, Label ("Wear it with the [title]"): [title] is replaced by the paired product's title, the first available piece in the product's custom.wear_it_with metafield (or its first piece when none is available). It shows only for a product whose metafield has a product; in the theme editor it shows a sample tagged Sample otherwise.
The cart drawer's pairing is switched on and off in Theme settings › Cart › Show "Wear it with" in the cart drawer (on). It reads the first item in the bag: the first available piece in its Wear it with metafield that isn't already in the bag, or else one of its complementary products from Search & Discovery. With neither, the box doesn't show. Adding the suggestion puts it in the bag, and the box looks again for the next pairing. The cart page doesn't show it.