§20 / SECTIONS
REF: TG–DOC–20 · REV. 1.7
Hotspots
Shop the look shows one image with product hotspots placed over it. Each hotspot is a dot that opens a small product card with the product image, title, price and a quick add button. Below the image, an optional list lets shoppers pick a size for each product and add the whole look at once.
TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
In the theme editor, add it with Add section > Shop the look (Products category). The preset starts with two hotspots.
How it works
- Placing hotspots. Each Product hotspot block has a horizontal and a vertical position, from 0% to 100% of the image.
- Opening a card. Shoppers click or tap a dot to open its card. Only one card is open at a time. Escape or a click outside closes it.
- Card position. Cards near an edge open towards the middle of the image so they stay on screen.
- Quick add. The card's button adds the product's selected or first available variant to the cart. Sold-out products show a link to the product page instead.
- Add the whole look. When on, a list below the image shows each product with a size picker and one button to add them all. It appears when at least two products in the look are available.
- Motion. The dots pulse while closed, unless the shopper's device is set to reduce motion.
The same hotspots can also be added to the Image or video banner section through its hotspot settings.
Section settings
| Setting | Type | Default | Options / notes |
|---|---|---|---|
| Label | text | Better together | |
| Heading | inline richtext | Shop the look | |
| Meta line | text | empty | Short note shown at the right of the heading. |
| Image | image | empty | |
| Image shape | select | Landscape | Landscape, Square, Portrait |
| Full width | checkbox | On | |
| Show "Add the whole look" button | checkbox | On | Lists every product in the look with a size picker. |
| Color scheme | color scheme | scheme-1 |
Blocks
Up to 8 blocks per section.
| Block | Settings (default) |
|---|---|
| Product hotspot | Product (empty); Horizontal position: 0–100% (40%); Vertical position: 0–100% (45%) |
Image tips
- The image is shown at the shape you choose (Landscape, Square or Portrait). The same shape is used on mobile.
- Hotspot positions are percentages of the image, so check them on both desktop and mobile in the theme editor.
For developers
Last updated for Tangent 1.7