> ## 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

> A portrait photograph with hotspots on the pieces being worn, each linked to a list of those pieces with price and add to bag.

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

Shop the look, highlighted with the demo content

## Where to find it

Home page. In the theme editor choose Home page, then select Shop the look.

## How it works

* Each Hotspot block places a dot on the photograph and adds its product to the list beside it.
* Pressing a dot highlights the piece in the list and moves focus to it. Hovering or focusing a piece highlights its dot.
* Single-variant products that are available get an Add to bag button. Products with options, pre-order and price on request pieces get a View link to their page.
* Hotspot positions stay on the same spot of the photograph in right-to-left languages.

![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)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Upload a portrait photograph. It is cropped to 4:5.
* 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).
* Choose Image position on desktop and whether to frame it in gold.
* Edit Eyebrow, Heading and Text.

## Settings

| Setting | What it does |
| - | - |
| **Image** | Image: upload one or choose from Content → Files. A portrait photograph works best. It is cropped to 4:5. |
| **Image position on desktop** | Options: First, Second. Default: First. |
| **Gold frame around the image** | On or off. Default: on. |
| **Eyebrow** | Text. Default: Shop the look. |
| **Heading** | Text. Default: Emeralds, worn close. |
| **Text** | Formatted text. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |

## Blocks

Up to 6 blocks. Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Hotspot

| Setting | What it does |
| - | - |
| **Product** | Choose a product. |
| **Horizontal position** | Slider from 0 to 100 %. 0 is the left edge of the image. Default: 50 %. |
| **Vertical position** | Slider from 0 to 100 %. 0 is the top edge of the image. Default: 50 %. |

> [!NOTE]
>
> See [Shop the look](https://docs.kwebby.com/gloaming/guides/shop-the-look.md) for tips on placing hotspots.


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