# Shop the look Source: Shop the look shows a photo of an outfit with numbered dots on each garment. Customers tap or click a dot to see the product’s name and price, and a list next to the photo repeats the same products with the same numbers. Use it for a lookbook, a styled outfit or a campaign photo on the home page, or add it to any page. ## Choose the photo Pick an on-model or flat-lay photo in **Image**; a tall photo of about 1600 x 2000 pixels works best. Write its alternative text in **Content > Files** in your Shopify admin, describing the outfit: the products themselves are already named in the list, so the text doesn’t need to repeat them. **Image position on desktop** puts the photo on the left or on the right of the text and the list on computers. On phones and tablets the photo always comes first, with the list below it. ## Add the products of the look Each garment is a **Product** block, up to six per look. Pick the product in **Product**, then move its dot onto the garment with **Horizontal position** and **Vertical position**: 0 is the left or top edge of the photo, 100 the right or bottom edge. The dot moves as you drag the slider, so you can place it while watching the preview. - The numbers follow the order of the blocks: drag the blocks to renumber the dots. - A block without a product is skipped in your store, and the numbers close the gap. In the theme editor it shows a sample product so you can still place the dot. - Selecting a block in the theme editor opens its dot on the photo. - The dots stay where you put them in right-to-left languages too, because the photo isn’t mirrored. ## What customers see On computers, clicking a dot opens a small card next to it, turned toward the center of the photo, with a thumbnail, the name, the price and a link to the product. On phones the card opens at the bottom of the screen with a close button. Only one card is open at a time, and Esc or a click elsewhere closes it. The list “In this look” next to the photo is the easiest way to shop on a phone, and the way in for customers who use a screen reader or a keyboard. Sale prices show the full price struck through, and sold-out products say so, in both the card and the list. ## Let customers add the look to the cart With **Enable adding products to cart** on (the default), each product in the list has a checkbox and, if it comes in more than one variant, a menu to pick the size or variant, with each variant’s price when prices differ. All products start selected: customers clear the ones they don’t want and add the rest with **Add selected to cart**, in one step. The cart drawer, or the add-to-cart notice if your store doesn’t use the drawer, confirms what was added. - Sold-out products, gift cards and products sold with a subscription have no checkbox: customers open their page from the list. - If a product sells out while the page is open, nothing is added and a message names it. - Turn the setting off to keep the list as links to the products only. ## Write the text Under **Text**, the **Caption** sits above the **Heading**, and the **Text** below it describes the outfit. The heading also names the section for screen readers, so keep one. ## Show it only between two dates Turn on **Schedule visibility** and set a start, an end, or both. See [Scheduling](https://docs.ictsviluppo.example/dossier/scheduling). The products of the look can’t be scheduled one by one. ## Settings | Setting | Type | Default | Options | | - | - | - | - | | **Image** — 1600 x 2000px recommended. Alt text comes from the image: describe the outfit. The products are listed next to the image. | Image | — | — | | **Image position on desktop** — On mobile, the image is always shown first. | Drop-down | Left | Left, Right | | **Cart** | | | | | **Enable adding products to cart** — Customers select products and variants in the list and add them to the cart together. Sold out products, gift cards, and products with subscriptions stay as links. | Checkbox | On | — | | **Text** | | | | | **Caption** | Text | Look 01 | — | | **Heading** | Text | Shop the look | — | | **Text** | Rich text | Describe the outfit and how the pieces work together. | — | | **Layout** | | | | | **Use full page width** | Checkbox | On | — | | **Vertical spacing** | Drop-down | Regular | Compact, Regular, Spacious | | **Color scheme** | Color scheme | scheme-1 | — | | **Schedule** | | | | | **Schedule visibility** | Checkbox | Off | — | | **Start date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when *Schedule visibility* is on | Text | — | — | | **End date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when *Schedule visibility* is on | Text | — | — | ## Blocks ### Product | Setting | Type | Default | Options | | - | - | - | - | | **Product** | Product | — | — | | **Horizontal position** | Slider | 50% | 0%–100%, step 1 | | **Vertical position** | Slider | 50% | 0%–100%, step 1 |