# Shop the look

> A styled photo with dots on the products in it and a list of those products beside it. Shoppers explore the photo, and can add the whole look to the cart in one click.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/shop-the-look/

## At a glance

- **In the editor:** Shop the look
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: Home page; Poster: Home page; Petal: Home page
- **Settings:** 22
- **Blocks:** Product hotspot
- **App blocks:** Yes

## Set it up

1. Upload the **Image** – a room, an outfit, a table setting.
2. Add a **Product hotspot** block for each product in the photo and pick the **Product**.
3. Move each dot onto its product with **Horizontal position** and **Vertical position**. The editor preview updates as you drag the sliders.
4. Write a **Heading** and **Text** for the list side.

## How it works

The list beside the image and the dots are linked: hover a dot and its product lights up in the list, and the other way round. **Show add all to cart** adds a button that puts the first available variant of each product into the cart and shows the total.

- **Dot label:** *Product name and price*, or a *Product card with photo, details and link*.
- **Show the label:** *On hover and on the selected dot*, or *Only after a click*. On touch screens, labels always open with a tap.
- **Hover area around dots:** makes the area that opens a label larger than the dot itself, for shoppers with less precise pointers.

## Layout

**Image position** puts the photo on the left or right; **Image ratio** is portrait, square or landscape (5:4). With **Use custom spacing**, set the space between the image and the list for desktop and mobile.

> **Tip**
>
> Keep dots at least 10% away from the edges of the photo, so labels have room to open.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Shop the look** (22 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Image position** | Left · Right | Left |
| **Image ratio** | Portrait · Square · Landscape (5:4) | Landscape (5:4) |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | Sample text |
| **Heading size** | Large · Medium · Small | Medium |
| **Dot label** | Product name and price · Product card with photo, details and link | Product name and price |
| **Show the label** – On touch screens the label always opens with a tap. | On hover and on the selected dot · Only after a click | On hover and on the selected dot |
| **Hover area around dots** – Makes the area that opens a dot's label, on hover or click, bigger than the dot itself. 0 means only the dot. | 0–40px (step 2) | 0px |
| **Show add all to cart** – Adds the first available variant of each product. | Checkbox | On |
| **Color scheme** | Color scheme | Scheme 1 |

*Grid spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Use custom spacing** – Otherwise the section keeps its built-in spacing. | Checkbox | Off |
| **Space between image and products** | 0–120px (step 2) | 64px |
| **Space between image and products on mobile** | 0–64px (step 1) | 32px |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 64px |
| **Bottom padding** | 0–160px (step 4) | 104px |
| **Top padding on mobile** | 0–120px (step 4) | 40px |
| **Bottom padding on mobile** | 0–120px (step 4) | 72px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Product hotspot** (3 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Product** | Product | – |
| **Horizontal position** | 0–100% (step 1) | 50% |
| **Vertical position** | 0–100% (step 1) | 50% |

## Related

- [Image with hotspots](https://themelab.page/tally/docs/sections/image-with-hotspots.md): An image with dots that open small cards – to explain the details of a product, a room or a material.
- [Lookbook](https://themelab.page/tally/docs/sections/lookbook.md): A horizontal row of large images in mixed shapes that shoppers drag or swipe through, with products on the photos.
- [Collection with image](https://themelab.page/tally/docs/sections/collection-with-image.md): A large photo beside a few products from one collection, with a label, heading, text and button.