Plugin Details
Home / Plug-in market / Image Hotspot Decoration Module
Image Hotspot Decoration Module
Image Hotspot Decoration Module
Overview
Image Hotspot is a plugin that adds an image hotspot annotation module to the admin "Design → Decoration" builder. After uploading PC and mobile banner images, you can overlay multiple drag-sortable hotspot markers on the image. Each hotspot can have its own independent position, icon, title, and description. Visitors click on a hotspot to expand a rich text bubble with detailed content. Perfect for product feature explanations, scenario-based shopping guides, diagram annotations, and similar use cases.
Key Features
🖼️ Interactive Hotspot Annotation
| Feature | Description |
|---|---|
| Dual-device images | Supports separate background images for PC and mobile – adapts automatically |
| Drag-and-drop sorting | Hotspot list supports drag-and-drop reordering |
| Independent coordinates | PC and mobile positions can be set independently for each hotspot (percentage-based coordinates) |
| Custom icons | Supports using default system icons or uploading custom images as hotspot markers |
| Adjustable icon size | Hotspot marker size can be set independently (16–120px) |
💬 Rich Text Bubble Content
| Feature | Description |
|---|---|
| Title | Multi-language title support |
| Short description | Rich text description support – can include formatted content and links |
| Bubble position | Independent bubble popup direction (Left / Center / Right) |
| Close button | Bubble comes with a built-in close button – clicking outside closes all expanded hotspots |
📐 Module Configuration Options
| Option | Description |
|---|---|
| Title | Main module title (multi-language support) |
| Description | Module description text (rich text support) |
| PC image | Recommended size: 1920×600px |
| Mobile image | Recommended size: 1242×900px |
| Mask color | Semi-transparent overlay on the image (supports opacity) |
| Module width | Narrow (container) / Wide (container-fluid) / Full (w-100) |
Technical Features
-
✅ Dual-device independent coordinates : PC and mobile hotspot positions are independently configurable – perfect device adaptation
-
✅ Percentage-based positioning : Uses percentage coordinates – hotspot positions automatically scale with image proportions
-
✅ Elegant interaction : Click hotspot to expand bubble, click again to close – clicking outside closes all
-
✅ Visual feedback : Hotspot markers feature a pulse animation (when not expanded) and hover/click scaling effects
-
✅ Custom icons : Supports uploading custom icons to replace the default "+" marker
-
✅ Adaptive bubble : Bubble content auto-wraps when too long – supports rich text and links
-
✅ Responsive design : Automatically switches coordinates on mobile – bubble size appropriately shrinks
-
✅ Any theme compatible : Frontend views are plugin-bundled – styles use CSS variables to adapt to themes
-
✅ Full design editor support : Real-time preview – hotspot positions can be precisely adjusted
Use Cases
-
Product feature/benefit annotations (explaining the function of each component)
-
Scenario-based shopping guides (clothing outfits, furniture arrangement, etc.)
-
Diagram/instruction manual annotations (user guides, installation instructions)
-
Store/exhibition hall navigation (labeling different areas)
-
Campaign/promotional poster key point annotations
