Can I create customizable image hotspots with hyperlinks?

Shopify Apps

Topic summary

Goal: add multiple clickable hotspots on a single image with customizable content and hyperlinks.

Solution offered: a free Shopify section (“Tooltips”) with demo and GitHub code. Hotspot popups accept HTML (links, images) and have some color options. Works on product pages via {% section “tooltips” %} and on the homepage through the Theme Editor.

Setup highlights:

  • Copy tooltips.liquid (sections) and tooltips.js (assets).
  • For custom pages, create a new page template (e.g., page.tooltips.liquid) that includes the section, then assign that template to the page.
  • Configure the image and hotspot content in the Theme Editor.

Styling fixes shared: change tooltip title color via CSS (preferred over inline styles). Limit oversized desktop images by setting a max-width on the section and centering.

Feature requests and limits: customer-created hotspots and sending their inputs to checkout aren’t built-in, but may be custom-coded (e.g., line item properties). Requests for hover-in/out behavior and replacing numeric markers with symbols were raised without provided solutions.

Current status: works for many with CSS tweaks, but several unresolved issues—especially with the Dawn theme (non-responsive image, text not appearing). Thread remains open with pending answers.

Summarized with AI on January 8. AI used: gpt-5.
3

Hi @Mircea_Piturca - your https://sections.design/blogs/shopify/product-tooltips seems to have great promise, but I can’t figure out how to configure my image in Shopify.

On a Shopify custom page, do I add something like this?

<div id="shopify-section-tooltips" class="shopify-section sd-tooltips" label="Main image"><img src="https://cdn.shopify.com/s/files ... .jpg?v=1000099300"></div>

Or do I configure the .jpg in tooltips.liquid somehow? I’ve read your instructions and the code a few times, but Shopify is new to me and I can’t figure this out :frowning: