Make your product photos shoppable.

Add a dot, select Product inside Content, upload its image, and enter the product details and destination link. Prices in descriptions are maintained by you; checkout and inventory stay with your store. Preview the card and test its purchase link. Customize an individual marker in Appearance or use shared map defaults for a consistent collection.

1. Upload the lifestyle photo. A room scene, outfit shot, or lookbook flat lay works best — anywhere products are visible and separated enough to tag one at a time.
2. Place a hotspot on each product. Click directly on the item; drag afterward to nudge it if the product shifts under a marker.
3. Add name, price, and a product photo. Keep the popup copy short — it's a teaser, not the full product listing.
4. Set the buy link. Point the CTA at the product page or an add-to-cart URL (see the platform section below).
5. Embed on your store. Paste the iframe into a Shopify page section, a WordPress block, or any custom HTML area.

Shopify shoppable images almost always use one of two link types in the hotspot's CTA field:

Always use the absolute URL, including https:// and your store's domain — relative paths like /products/handle resolve against the embed's own domain, not your store, and will 404. The same pattern works for a Shopify Plus or headless storefront: swap in whatever URL that storefront serves for a product or cart action.

Every platform reduces to the same rule — put the full product or checkout URL in the hotspot's CTA field:

• WooCommerce / WordPress: use the product page permalink, or a ?add-to-cart=ID query URL if the theme supports it.
• Wix Stores / Squarespace / Webflow: these don't expose cart-permalink query params reliably, so link to the product page and let the shopper add to cart there. See Interactive Image for Wix and for Squarespace.
• Any custom storefront: use whatever canonical product URL the storefront already generates — the hotspot CTA is just a link, so anything a normal anchor tag could open works.

Full embedding notes by platform are on Interactive Image for Shopify.

On desktop you can set hotspots to open on hover for a fast, glanceable browsing feel, or on click if you want the shopper to deliberately choose to see the product card. On phones and tablets — where most shoppable-image traffic actually happens — every hotspot opens on tap automatically, since hover has no equivalent on a touchscreen.

Hotspot positions are stored as percentages of the image, so a dot on a shopper's shoe in a lifestyle photo stays on the shoe whether the embed renders at 1400px on a laptop or 360px on a phone. The popup becomes a full-width card with the product photo, name, price, and buy button stacked for easy tapping.

Hotspots are reachable with Tab and open with Enter or Space, and product names and prices render as real text inside the card rather than baked into an image, so screen readers announce them normally. Use a clear, descriptive alt text on the source photo describing the scene, not each product — the hotspot cards carry the per-product detail.

Because the shoppable image is an iframe, the product names and prices inside its hotspot popups are not part of your page's own crawlable HTML. That's a neutral trade-off, not a penalty: keep your theme's normal product text, price, and structured data on the page as usual, and treat the shoppable image as a discovery layer on top of content that's already indexable. See image map SEO for more on how iframe embeds and page SEO interact.

The free plan supports one saved map with a limited hotspot allowance and a small watermark on the published embed. Pro is $5/month and removes the watermark — most stores upgrade once a shoppable image goes live on a real product or campaign page.