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.
- In the editor
- Shop the look
- Where it goes
- Any page template, with Add section
- In the presets
- Index: Home page; Poster: Home page; Petal: Home page
- Settings
- 22
- Blocks
- Product hotspot
- App blocks
- Yes
Set it up
- Upload the Image – a room, an outfit, a table setting.
- Add a Product hotspot block for each product in the photo and pick the Product.
- Move each dot onto its product with Horizontal position and Vertical position. The editor preview updates as you drag the sliders.
- 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.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Shop the look22 settings
| 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 labelOn 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 dotsMakes the area that opens a dot's label, on hover or click, bigger than the dot itself. 0 means only the dot. | 0–40px | 0px |
| Show add all to cartAdds the first available variant of each product. | Checkbox | On |
| Color scheme | Color scheme | Scheme 1 |
| Grid spacing | ||
| Use custom spacingOtherwise the section keeps its built-in spacing. | Checkbox | Off |
| Space between image and products | 0–120px | 64px |
| Space between image and products on mobile | 0–64px | 32px |
| Section spacing | ||
| Top padding | 0–160px | 64px |
| Bottom padding | 0–160px | 104px |
| Top padding on mobile | 0–120px | 40px |
| Bottom padding on mobile | 0–120px | 72px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile 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 IDLink to this section with #anchor-id. | Text | – |
Block settings
Block: Product hotspot3 settings
| Setting | Options | Default |
|---|---|---|
| Product | Product | – |
| Horizontal position | 0–100% | 50% |
| Vertical position | 0–100% | 50% |
Related
Image with hotspotsAn image with dots that open small cards – to explain the details of a product, a room or a material.LookbookA horizontal row of large images in mixed shapes that shoppers drag or swipe through, with products on the photos.Collection with imageA large photo beside a few products from one collection, with a label, heading, text and button.