Hotspots (PRO)

A hotspot is a clickable dot you place on an image or a video. Hovering reveals a tooltip; clicking triggers an action. Use hotspots to turn a hero image into a product showcase, point out specific features, or run targeted add-to-cart flows.

What a hotspot can do

The hotspot’s Click action dropdown offers:

Link — navigate to any URL (with optional Link target)
Product — open a product detail page (pick the product via the Select product picker)
Category — open a category listing (via the Select category picker)
(Plus the underlying templates support add-to-cart and custom actions via theme integration.)

How to add hotspots

Open a product → Media tab and pick the image or video you want to annotate.
In the Mediaverse side panel, find the Hotspots card.
Click Add hotspot. A new dot appears on the image; drag it to the position you want.
Fill in the hotspot form:
- Icon + Show icon toggle
- Title + Show title toggle
- Tooltip + Show tooltip toggle
- Click action (Link / Product / Category) + target
- Position — vertical and horizontal percentages (drag the dot or type them in)
- Theme, Animation (none / ripple / splash / glow / pulse), Border etc.
- Custom styles section — icon colour, text colour, font size, border colour / width / style / radius, background colour, backdrop filter, box shadow
Repeat for as many hotspots as you need. Use the row actions (Move up, Move down, Move to top, Move to bottom, New before, New after) to reorder.
Save the product.

Styling and animation

Default hotspot appearance is configured globally in Settings → Plugins → Mediaverse → Hotspots. The configuration page splits into tabs:

General / Icon / Tooltip / Theme / Tooltip Theme

The theme can be customised with three palette presets — Default, Light, Dark.

Hotspot tooltips render through Popper.js for correct positioning even on overflow-clipped containers.