> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shop the look

> Place hotspots on a photograph of pieces being worn, linked to a list where shoppers add them to the bag.

**1. Choose the photograph.** A portrait photograph of the pieces worn together works best. It is cropped to 4:5, so keep the pieces away from the edges.

**2. Add hotspots.** In the theme editor choose Home page, select Shop the look, and add a Hotspot block per piece (up to 6). Choose the Product, then move the dot with Horizontal position and Vertical position: 0 is the left and top edge, 100 the right and bottom.

**3. Check the dots.** Selecting a Hotspot block in the editor highlights its dot and piece, so you can nudge it onto the piece. The dots stay on the same spot of the photograph on phones and in right-to-left languages.

![Shop the look](https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/shop-the-look.webp?fit=max\&auto=format\&n=Y7lUE3PaLXfHjaRp\&q=85\&s=377cec229287000ef9322eec04968905)

Hotspots and the list of pieces

**What shoppers see.** Pressing a dot highlights its piece in the list and moves focus to it. Single-variant pieces that are available get an Add to bag button that opens the bag drawer. Pieces with metal or size options, pre-order and price on request pieces get a View link to their product page.

**Layout.** Image position on desktop puts the photograph first or second, and Gold frame around the image adds a hairline frame.

## In the theme editor

![Shop the look in the theme editor](https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-shop-the-look.webp?fit=max\&auto=format\&n=ipMVAv6ECVUC3DoM\&q=85\&s=f11552d40c1526a4a46819f4837f9d27)

1 Shop the look, with its Hotspot blocks · 2 its settings · 3 the preview


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.