Shop the look

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. The products of the look can’t be scheduled one by one.

Settings

Settings: Shop the look

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

Settings: Product

Setting	Type	Default	Options
Product	Product	—	—
Horizontal position	Slider	50%	0%–100%, step 1
Vertical position	Slider	50%	0%–100%, step 1