How to build shoppable images that drive purchases

Add a dot, open Content, and select Product. Add its title, description, product image, and destination link. Put any displayed price in the card content and keep it up to date yourself; Interactive Image does not synchronize store inventory or run checkout. The marker can match the Product type automatically, or you can customize it in Appearance. Preview the card, then test its link to the actual product page.

A shoppable image is a regular photo — usually a lifestyle shot showing a product in context — with clickable hotspots placed directly on each item. Instead of a caption explaining "sofa, coffee table, and rug shown," each object becomes its own tappable target that opens a popup with the product name, price, and a link to purchase. The photo does the selling; the hotspots remove the friction of finding what's in it.

• Pick photos where individual products are visually distinct and not overlapping heavily.
• Favor natural, well-lit lifestyle shots over flat product-on-white photos — shoppable images work best when they sell a scene, not a single item.
• Make sure the photo resolution is high enough that hotspots don't need to sit on blurry or compressed areas.
• Avoid photos with more than 8–10 potential products; split a busy scene into two images if needed.

Each hotspot popup is a miniature product listing. Keep it tight and scannable:

A few practical details separate a shoppable image that converts from one that just looks interactive:

1. Position hotspots on the item itself, not floating nearby — ambiguity about what's being sold kills trust fast.
2. Use a subtle pulsing or static dot indicator so shoppers notice the image is interactive on first glance.
3. Link each CTA to a product page that matches the price and variant shown in the popup — mismatches erode trust and increase bounce.
4. Track which hotspots get clicked most; that data tells you which products in a scene are actually driving interest.

Shoppable images aren't limited to product detail pages. They work well in:

• Blog posts and lookbooks that round up an outfit, room, or gift guide.
• Homepage hero banners that highlight seasonal collections.
• Email newsletters (linking out to a hosted shoppable image page, since most email clients don't support embedded iframes).
• Link-in-bio pages, where a single shoppable image replaces a long list of separate product links.

Start with the shoppable image maker if you're building your first one, or browse the clickable image maker for a more general hotspot workflow.

Because the shoppable image is delivered as a single iframe, it drops cleanly into most storefront themes and page builders — including Wix, WordPress, and Webflow sites. Updating a price or swapping a product later means editing the hotspot once; every page with the embed reflects the change immediately.

Track hotspot clicks the same way you'd track any on-page CTA. If one product in a scene consistently gets clicked far more than others, that's a signal worth acting on — feature it more prominently elsewhere, restock it, or use the same photo angle for a follow-up shoppable image. For more general context on how interactive images fit into a page's content strategy, see our blog and the tool comparison hub.