Great Image Map Banner: Clickable Hotspots on Images

by great2gether

Let customers explore your lookbook or room shot and jump straight to the product. Up to 10 hotspots with tooltips, five marker styles and a stripes mode.

Expected release: September 2026

Compatible with:

Cloud Self-hosted

Includes:

Free trial month

The subscription starts with a free trial month during which it can be canceled at any time.

All updates

During the subscription all released updates are included for free

Support from the Extension Partner

In case you have any questions or problems with your extension you can always ask the Extension Partner for help during the subscription.

Description

Highlights

Up to 10 clickable hotspots on any banner image
Five marker styles, from a clear pin to fully invisible
Tooltip with title, text, image and link per hotspot
Stripes mode: 2 to 5 clickable columns or rows
Position picker in the frontend, no guessing of coordinates

Features

CMS block for the Shopping Experiences editor
Up to 10 hotspots per banner
Marker styles: pin, pulsing dot, plus, number, invisible
Animations: none, pulse, heartbeat, resonate, energize
Hover tooltip, click tooltip, direct link or permanent label

Tooltip with title, text, image and CTA button or text link
Tooltip position per hotspot: auto, top, bottom, left, right
Five discoverability hints, freely combinable
Stripes mode with 2 to 5 columns or rows
Per stripe: size, link, title, subtitle and colours
Hybrid mode: stripes and hotspots together
Separate desktop and mobile image with your own breakpoint
Mobile list instead of hotspots on small screens
Position picker in the frontend via ?hotspots=editor
All texts are snippet fields, one per language

Show more Show less

About the Extension

Make your best photo shoppable

A lookbook, a furnished room, a workshop scene. Your customer sees something they like but has no idea what it is called or where to find it. Place a hotspot on it and one click takes them to the product.

What you get

Up to 10 hotspots, positioned by percentage so they stay put on every screen
Five marker styles: pin, pulsing dot, plus, numbered circle or invisible
Tooltip with title, text, image and link, on hover or on click
Stripes mode: split the banner into 2 to 5 clickable columns or rows
Optional header and footer, separate desktop and mobile image

Hotspots people actually find

Invisible hotspots look clean but nobody clicks what nobody sees. Five hints help: a short pulse after page load, small permanent dots, outlines on hover, a spotlight effect, and a line of text under the image. Combine them as you like.

Works on the phone too

Small screens and many hotspots do not mix. Switch on the mobile list and the hotspots appear as a tidy list under the image instead. Each hotspot can also be shown on desktop only or mobile only.

Easy to set up

Find the block in the Shopping Experiences editor under "Text and image" and fill in your content in the settings. To position a hotspot, open your page with ?hotspots=editor, click the image, and the X and Y values are copied to your clipboard. All texts are snippet fields, so each language gets its own wording.