Overlay Image Hotspots Popup

Multipurpose Fashion Theme

Theme: Multipurpose Fashion Theme

Help Center > Overlays > Image Hotspots Popup

Overview

The Image Hotspots Popup appears on mobile when customers tap a hotspot in the Image Hotspots section. It shows a product card in a small dialog near the hotspot. On desktop, hotspots typically show a product card beside the image (no popup). The popup is only used when Enable mobile tap is on.

Where It Appears

Image Hotspots section — When the section is added to a page and Enable mobile tap is turned on
Mobile/tablet only — Desktop uses hover and a side card column instead

Files

File	Purpose
`sections/image-hotspots.liquid`	Section with hotspots, overlay, popup markup, JS

Structure

Image Hotspots Section
├── Overlay (data-overlay) — darkens image; click to close popups
├── Hotspots (data-hotspot) — one per product
└── Popups (data-popup, one per hotspot)
    └── Popup inner — Product card (product-card snippet)

Data Attributes

Attribute	Element	Purpose
`data-overlay`	Overlay div	Click to close all popups
`data-hotspot`	Hotspot button	Opens popup for that product
`data-popup`	Popup div	The product card dialog
`data-product-id`	Hotspot, popup	Links hotspot to popup
`data-block-id`	Hotspot, popup	Block identifier

Section Settings

Setting	Effect
Enable mobile tap	When on, tap hotspot opens popup. When off, product card appears below image on mobile
Overlay opacity	Darkness of overlay when popup is open (0–100%)

Behavior

Desktop

Hover on hotspot → Product card shows in side column (or inline)
No popup; card column toggles active state

Mobile (when Enable mobile tap is on)

Customer taps hotspot
Overlay becomes visible (is-visible)
Popup appears near the hotspot (positioned with JS)
Popup may "flip" to left if too close to right edge (image-hotspots__popup--flip-left)

Closing

Overlay click — closes all popups
Escape key — closes all popups
Tapping same hotspot again toggles (close if open)

Popup is positioned below the hotspot
JS calculates position from hotspot rect and image rect
If near right edge, flip-left class moves popup to avoid overflow

Customization

Via Theme Customizer

Image Hotspots section — Enable mobile tap, overlay opacity, hotspot style, product card options

Via Code

sections/image-hotspots.liquid — Popup markup, overlay, JS for open/close/position

Accessibility

Popup has role="dialog", aria-label with product title
aria-hidden toggled on open/close
aria-controls / aria-expanded on hotspot
Escape and overlay click for close

Multipurpose theme documentation