Shoppable image

Shoppable image places product markers on one large photograph. Pressing a marker opens a small card with the product’s image, title and price, linked to the product page. Under the image, a Shop the look list names every product in the picture, so they can be reached without the markers too.

It can’t be placed in the header or footer groups. The preset starts with three hotspots.

Settings

• Image. The photograph. Without one, a placeholder illustration shows.
• Color scheme. Default: scheme-1.

Spacing

• Top padding / Bottom padding. Range: 0 to 300 px in 5 px steps. Default: 60 px each.

Blocks

Up to eight Hotspot blocks.

Hotspot

• Product. The product this hotspot points to. A hotspot with no product shows nothing on the storefront; in the theme editor it shows a placeholder marker, so you can place hotspots before choosing products.
• Horizontal position / Vertical position. Where the marker sits on the image, measured from the left and top edges. Range: 0% to 100% in 1% steps. Default: 50% each.
• Card side. Which side of the marker the product card opens on. Right (default) or Left. On phones the card spans the image, under the hotspot, or over it when the hotspot is in the lower half.

A card closes when the shopper presses the marker again, presses Escape or clicks elsewhere on the page.

Tips

• Position hotspots with the preview open. Move the sliders and watch the marker; the percentages mean nothing until you see where they land.
• Open cards toward the empty side. A marker near the right edge should use Left, so its card stays inside the image.
• Pick a photograph where every product is visible. A marker on something shoppers can’t make out invites a click that disappoints.
• Four to six hotspots is comfortable. Eight is the maximum, but a picture covered in markers stops being a picture.