Multipurpose theme documentation
Multipurpose Fashion Theme
Image Hotspots
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Image & Media Sections > Image Hotspots
Overview
The Image hotspots section displays an image with clickable hotspot icons. Each hotspot reveals a product popover (image, title, price, add to cart). Use it for lookbooks, room scenes, or styled shots where customers can discover products by clicking or tapping. Ideal for fashion, home, or lifestyle stores.
How it works
Desktop:
- Hover a hotspot to preview the product card.
- Click a hotspot to select a product.
- The selected product appears beside the image.
Mobile:
- Tap a hotspot to open a product popup.
- Tap outside or press ESC to close.
Where to Add This Section
- Go to Online Store > Themes > Customize.
- Select Homepage or desired template.
- Click Add section.
- Choose Image hotspots.
- Save.
📷 Image placeholder: Add a screenshot of Image hotspots section with product popover open.
Quick Setup (3 Steps)
Recommended image size: 2000 × 2000 px or larger.
Maximum hotspots: 10
- Upload image — Add your main image (lookbook, room scene) in section settings.
- Add hotspot blocks — Add Product hotspot blocks; select product and set position.
- Style hotspots — Choose hotspot icon style, color, and size.
Section Settings
| Setting | Description | Default |
|---|---|---|
| Heading | Section title | Shop the look |
| Heading size | Small, Medium, Large | Medium |
| Heading position | Left, Center, Right | Left |
| Image | Main hotspot image | — |
| Full width | Stretch to viewport | Off |
| Image position | Left, Right (if not full width) | Left |
| Hotspot icon style | Dot, Plus, Tag, Bag | Dot |
| Hotspot color | Icon color | #000000 |
| Hotspot size | Small, Medium, Large | Medium |
| Border radius | Image corner radius (px) | 0 px |
| Tap to open on mobile | Tap hotspot to show product popup on mobile | On |
| Product card animation | None, Fade, Scale, Slide up | Fade |
| Image overlay opacity | Overlay on image when popup open (mobile) | 30% |
| Show vendor | Show vendor in popover | Off |
| Show cents as superscript | Price display | Off |
Blocks: Product Hotspot
Each hotspot is a Product hotspot block.
| Setting | Description |
|---|---|
| Product | Product to display in popover |
| Vertical position | Position (percentage, 0–100) |
| Horizontal position | Position (percentage, 0–100) |
Step-by-Step Setup
- Add Image hotspots section; upload Image.
- Add Product hotspot blocks; select Product and set Vertical and Horizontal position.
- Set Hotspot icon style, Hotspot color, and Enable mobile tap mode.
- Save.
For merchants
- Use a clear image where product locations are obvious.
- Limit to 5–10 hotspots for usability.
- Match hotspot positions to where products appear in the image.
Keyboard Controls
- Tab — Focus hotspots and popup content.
- Enter / Space — Activate hotspot.
- ESC — Close mobile popup.
Image Hotspots is an interactive section that allows you to place clickable product markers on an image. Customers can hover (desktop) or tap (mobile) on hotspots to preview related products.
Go to the Theme Editor → Add “Image Hotspots” section → Add blocks → Select a product → Adjust horizontal and vertical position sliders to place the hotspot on the image.
You can add up to 10 product hotspots per section.
If “Tap to open on mobile” is enabled, tapping a hotspot opens a popup product preview. If disabled, the product card will appear below the image instead.
Yes. You can choose between Dot, Plus, Tag, or Bag styles from the section settings. You can also adjust the hotspot size and color.
Yes. Available animations include None, Fade, Scale, and Slide Up. You can configure this in the section settings.
Yes. The section includes keyboard navigation support, focus trapping for popups, ESC key close functionality, and proper ARIA attributes for accessibility compliance.
Yes. It is fully compatible with Shopify Online Store 2.0 architecture and supports dynamic blocks.
Yes. Enable the “Full width” option in section settings to stretch the section across the entire screen.
Make sure a product is selected in the hotspot block settings. Also confirm that the image is uploaded and that the hotspot position is within the visible area.
The section uses the theme’s existing product-card snippet.
You can modify the snippet to adjust layout, vendor visibility, price
styling, or other product display elements.
Yes. The section respects the user’s prefers-reduced-motion
system setting and disables animations accordingly.