Shoppable hotspot images for Shopify stores.

Shopify doesn't give merchants an HTML widget by default the way some builders do — you reach it through the theme editor's Custom Liquid section, which every Online Store 2.0 theme includes. It renders raw HTML, so an iframe drops in cleanly without fighting the theme's CSS.

1. Design your hotspot image in the Interactive Image editor and place your hotspots.
2. Open Embed and copy the iframe code.
3. In the Shopify theme editor, open the page (product, page, or section group) and click Add block → Custom Liquid.
4. Paste the iframe, wrap it in a container with a max-width if you want it narrower than full bleed, and Save.

If your theme doesn't expose Custom Liquid on product pages specifically, add the block to a regular Page template instead and link to it from your navigation or a product description.

Merchants often stack five or six annotated images to explain fit, materials, and included accessories — each one a static crop with an arrow drawn on top. One interactive image with five hotspots covers the same ground, loads once, and lets the shopper explore at their own pace instead of scrolling past images they don't care about. It's a good fit for apparel size and material callouts, electronics with multiple ports, and bundle listings where a single hero photo represents several SKUs. See the shoppable image maker for more on hotspot-to-checkout flows.

Most merchants point hotspot CTAs at product pages, which is right when the shopper still needs to choose a size. When the shot already shows the exact variant, you can skip a step with a Shopify cart permalink — no app, no Storefront API:

https://your-store.myshopify.com/cart/40123456789012:1

https://your-store.myshopify.com/cart/40123456789012:1?checkout

The long number is the variant ID (visible at the end of the URL when you open a variant in the Shopify admin) and the number after the colon is the quantity. The first form adds and shows the cart; adding ?checkout goes straight to checkout. Add UTM parameters to the same URL and every hotspot click becomes attributable in your analytics.

Wrap the snippet so it never outgrows your theme's content column, and give it the same aspect ratio as your image so nothing jumps while it loads:

<div style="max-width: 1100px; margin: 0 auto;">
  <div style="position:relative; aspect-ratio: 16 / 9;">
    <!-- paste the iframe here, then add: -->
    <!-- style="position:absolute; inset:0; width:100%; height:100%; border:0" -->
  </div>
</div>

Set aspect-ratio to your actual image ratio. If a section-width setting in the theme conflicts, set the theme section to full width and control the width in this wrapper instead.

Placement changes results more than hotspot count does. What tends to work on Shopify product pages:

• Below the buy box, above reviews. Shoppers who scroll past price are looking for detail — that is exactly what the hotspots answer.
• Replace the "features" image stack. One embed instead of five annotated crops means less scrolling and one thing to update.
• On collection landing pages. A single lifestyle shot hotspotted to six products works as a visual collection menu.
• In the size or spec section. Pair it with the real spec text in Liquid so search engines still see the numbers.

More patterns on the shoppable image maker and product diagrams.