Does Shopify have a built-in hotspot tool?

No. Shopify's native image blocks only support one link per image. To get multiple clickable regions with popups, you need a Custom Liquid block holding an embed like Interactive Image.

Will the hotspot image slow down my Shopify store's speed score?

The iframe loads independently of your theme's JS bundle, so it doesn't add to your Liquid render-blocking scripts. It does add one additional request, same as any embedded video or app widget.

Can I link a hotspot straight to a product page or variant?

Yes. Each hotspot's CTA button accepts any URL, including a specific Shopify product page, a collection, or a pre-selected variant link.

Does this work with Shopify's Online Store 2.0 themes?

Yes. Any theme that supports a Custom Liquid section or an app embed block — which is effectively every OS 2.0 theme — can host the iframe.

For Shopify

Shoppable hotspot images for Shopify stores.

Turn one product photo into a clickable map of colors, features, and bundled SKUs. Paste the embed into a Custom Liquid block and it's live.

Start free See the live editor

Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace

Custom Liquid, not an app

No app install, no theme edits beyond one Liquid block. Fewer moving parts to break during a theme update.

Hotspot-to-product links

Point each hotspot's CTA at a specific product, collection, or variant URL so shoppers check out in one click.

Same photo, more selling

Use the lifestyle photo you already have instead of shooting six separate product images for six features.

What you get

Works in any Online Store 2.0 theme via Custom Liquid
No app subscription or storefront API access needed
Hotspot CTAs can link to products, variants, or collections
Percentage-based positioning survives theme width changes
Update hotspots without touching the theme again
Pairs well with size charts, ingredient lists, or spec callouts

Where the Custom Liquid block actually lives

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.

Design your hotspot image in the Interactive Image editor and place your hotspots.
Open Embed and copy the iframe code.
In the Shopify theme editor, open the page (product, page, or section group) and click Add block → Custom Liquid.
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.

What this replaces on a product page

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.

Setup at a glance

Shopify · Custom Liquid section on product, collection, or page templates

Time: About 7 minutes
Requirement: Online Store 2.0 theme (Dawn and most modern themes)

Section: Custom Liquid
Theme: Online Store 2.0
App required: None

Step by step

How to add an interactive image to Shopify

Five steps, no developer. Everything below happens once — after that you edit hotspots in Interactive Image and your Shopify page updates on its own.

01
Upload your product visual
Use a hero product photo, exploded diagram, or lifestyle shot — whatever you want shoppers to explore.
02
Annotate the features
Add a hotspot per feature with a photo, a short benefit line, and a CTA that links straight to the variant or collection.

Copy the embed

Copy the responsive iframe from the Embed panel.

<div style="position:relative;width:100%;padding-top:56.25%">
  <iframe src="https://interactiveimage.com/embed/YOUR-ID"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    scrolling="no" loading="lazy"></iframe>
</div>

The Embed panel showing the responsive iframe snippet and a copy button

04
Add a Custom Liquid section
In Online Store → Customize, open the template, click Add section → Custom Liquid, and paste the snippet into the code field.
05
Position it and save
Drag the section above or below the product description, preview on mobile, then Save. Shoppers can now tap any hotspot to see the detail and jump to the right product.

Troubleshooting

Fixes for the Shopify issues people hit

I can't find Custom Liquid

Your theme is likely a vintage (pre-2.0) theme. Either update to a 2.0 theme or paste the snippet into a page's HTML source via the rich text editor's code view.

The embed pushes my Add to Cart below the fold on mobile

Place the section below the product form, or use a taller-than-wide crop of your image so the embed stays compact on phones.

The embed looks cropped or has scrollbars

The iframe height doesn't match the image aspect ratio. Copy a fresh snippet from the Embed panel — it bakes the exact ratio into a padding-based wrapper — or set the iframe height to width ÷ aspect ratio.

Hotspots look slightly offset from the artwork

That happens when the container letterboxes the image. Interactive Image measures the rendered image box, so hotspots stay glued to the artwork — just make sure you didn't force a fixed height that differs from the image ratio.

Changes aren't showing on the live site

Save in the editor, then hard-refresh the published page. The embed always renders the latest saved version — you never need to re-paste the snippet unless the aspect ratio changed.

Guides for other platforms

The same embed works anywhere you can paste an iframe or a link.

Turn any image into a guided experience.

Free forever plan. Paste one iframe into your site and ship.

Create your interactive image