Shoppable image
The Shoppable image section places hotspots on a lifestyle photo. Each hotspot opens a small card with the product, its price and a link.
How to set it up
Step 1: Add the Shoppable image section
- In the theme editor, open the page you want and click Add section under Template.
- Search for Shoppable image and select it (1).
Step 2: Set the image
- Choose an Image (1) and a Mobile image, and the ratios.
Step 3: Place hotspots
- Add Hotspot blocks: pick a Product, then move the dot with Horizontal position and Vertical position (separate positions on mobile).
Settings reference
Shoppable image
| Image | |
|---|---|
| Image | An image from your files. |
| Mobile image | An image from your files. |
| Ratio | Options: Wide (16:9), Cinema (21:9), Landscape (4:3), Square. |
| Mobile ratio | Options: Portrait (4:5), Tall (3:4), Square. |
Hotspot block
| Product | A product. |
|---|---|
| Title | Used when no product is selected. |
| Detail | |
| Horizontal position | Slider. |
| Vertical position | Slider. |
| Mobile horizontal position | Slider. |
| Mobile vertical position | Slider. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Positions are percentages of the image, so hotspots stay on the product when the image resizes.