Shoppable image

Shoppable image pairs one styled photo with a numbered list of the products in it. Each Product hotspot block places a numbered dot on the image and adds the product to the list beside it, with its price and an add button. You can add up to six hotspots.

Selecting a dot highlights its product in the list, and the reverse works too: hovering or focusing a product highlights its dot. On phones and tablets, tapping a dot scrolls to its product. Single-variant products go straight into the cart; products with options open quick view.

Best practices#

• Use an 1800 × 1440 px photo where each product is clearly visible. Room scenes, outfits and flat lays work well.
• Three to five hotspots. Enough to shop the look, not so many that the dots cover the photo.
• Place each dot on its product. Set Horizontal position and Vertical position as a percentage of the image. Check the result on a phone, where the image is smaller.
• Mind the crop. Image ratio crops the photo. If a dot ends up off the product, adjust the ratio or the focal point, then move the dot.
• Write a heading that sets the scene, like "The reading corner", so the list reads as one look rather than a random set of products.

Preset tips#

• Vellora uses it on the home page with the image on the left, in its bone scheme.
• It suits Sorrel for a shelfie or routine photo, and Graphite for a full outfit.

Handle

shoppable-image

Group

Products and collections

Where

Add it to any template with Add section in the theme editor. Up to 6 blocks.

Settings#

Blocks#

Add blocks to this section from the theme editor, then drag them to change their order. A section can have up to 6 blocks.

Product hotspot#