# Shop the look

Chapter 8 of the Ribbon user guide.

Boutiques sell outfits, not single pieces. The **Shop the look** section puts a whole outfit on the page and lets shoppers buy it in one go, each piece in their own size:

* **The photo**: your outfit photo, shown uncropped at its own shape, with a **numbered dot** on each piece.
* **Beside it** (under it on phones): the kicker ("Look 02 of 04"), the heading ("Shop the look"), your text, a **numbered list of the pieces** (the number, a small photo, the title, its color and size range such as "Cream rose · XS to XL" (just the sizes when the piece has no color option, and "One size" when it has no size option), and the price), the **total** ("3 pieces · $477.00"), a **Shop the look** button and a link ("See all looks").
* **A dot** opens the piece's **mini card**: its photo, title, price, color, your detail line, small **size pills** (with "2 left" and sold-out states), **Add to bag** and **View**. With more than one size and none chosen, the button reads "Choose a size". On phones the mini card slides up from the bottom of the screen.
* **Shop the look** opens a **side sheet** with one row per piece: a checkbox (ticked when the piece is available), a photo, the title and price, and a menu for each option that has a choice (size, color), or "One size". Sizes nobody can buy say "(sold out)" and can't be chosen; a sold-out piece is unticked and marked Sold out. The foot shows "3 of 3 pieces · $477.00" and **Add selected to bag**. A ticked piece without a size gets "Choose a size, or untick this piece", and nothing is added until every ticked piece has one. Then every ticked piece goes into the bag together, the cart drawer opens with all of them, and screen readers hear "3 pieces added to your bag".

A size chosen in a mini card is already chosen when the shopper opens the sheet. Size pills follow the option named in **Theme settings › Sizing and fit › Size option names**, and "2 left" follows **Low stock at or under** there.

## Shop the look settings

| Setting | Default | What it does |
| --- | --- | --- |
| Kicker, Heading, Text | "Look 01", "Shop the look", "Brunch in the garden: the Clementine midi, a cherry shoulder bag and satin flats." | Your copy. Number your looks in the kicker ("Look 02 of 04") if you have several. |
| Outfit photo | Empty | Shown uncropped at its own shape (3:4 when empty), so each dot stays on the piece it marks. A tall 3:4 photo of the whole outfit works best: on a dress form, on hangers or as a flat lay. |
| Layout | Photo first | **Photo first** (the photo on the left, the panel beside it), **Photo second** (the panel first) or **Full-width photo** (a lookbook: the photo across the page, with the panel overlapping its bottom corner; Maison uses it) |
| Background | Panel | Page, Panel or Surface |
| Button label | Shop the look | The button that opens the side sheet |
| Link label, Link | "See all looks", empty | A text link beside the button, such as a lookbook page. Hidden without a link. |
| Show the list of pieces | On | The numbered list beside the photo |
| Show the total | On | The total of the pieces' current prices |

Add up to six **Piece** blocks:

| Setting | Default | What it does |
| --- | --- | --- |
| Product | Empty | The piece. Its photo, price, sizes and stock come from the product. |
| Horizontal position | 50% (0 to 100) | Where the dot sits, from the photo's left edge |
| Vertical position | 50% (0 to 100) | From the photo's top edge |
| Title | Empty | Blank uses the product's title. A piece with a title and no product shows a dot and a text card only, and is left out of the list, the total and the sheet: handy for something you don't sell, such as "Vintage hat, not for sale". |
| Detail | Empty | A short line in the mini card under the price, such as "Silk, cut on the bias" |

**Placing the dots**: select a piece in the theme editor and its mini card opens on the photo, so you can drag the two sliders until the dot sits on the piece. Dots stay on the same spot of the photo at every screen size (and aren't mirrored for right-to-left languages, because the photo isn't). A dot never sits closer than a few pixels to the photo's edge.

**Before you choose products**, the editor shows a sample mini card ("Sample piece", $129.00, sizes XS to L, tagged **Sample**) on each dot, so the preset's three dots work straight away. On your storefront, a section whose pieces have no products shows the photo and text only, with no dots, list or button.

> **Tip:** Make one Shop the look section per look, and keep the pieces to the ones in the photo. A shopper who wants only one piece can untick the rest in the sheet, or use the dot's mini card.