The Image hotspots section allows you to create interactive, shoppable images by placing clickable points (hotspots) over a main background image. This section is designed to increase engagement by letting customers discover product details directly from a lifestyle or promotional photo.
You can customize how the section interacts with your overall page design:
Feature | Standard Layout | Layered Layout |
Visual Style | Features a large Image hotspots display as the primary focus. | Uses a smaller Image hotspots display for a more compact look. |
Background Media | Constraint: You cannot set a separate background image. | Enhanced: Supports None, Image, or Video backgrounds. |
Header Behavior | Make header inside: Places the header inside the main hotspots image. | Header remains standard unless manually adjusted. |
Responsive Media | Uses the primary hotspot image. | Supports unique background images for Desktop and Mobile. |
Visual Effects | Fixed presentation. | Supports Ambient movement and Background overlays. |
Image / Mobile Image | Select the main background image. If no Mobile image is set, the desktop version will scale automatically. |
Max width | Controls the maximum size of the hotspot image container. |
Spacing to header | Adjusts the vertical gap between the top of the image and the section header. |
Color scheme | Select a predefined theme color palette for the hotspot points. |
Primary / Secondary Color | Manually override colors for the hotspot icon and its background/border. |
Hotspot icon | Choose between a Circle or a Plus (+) sign as the visual trigger. |
Glassy hotspot content | Toggle this to apply a modern, semi-transparent "frosted glass" effect to the product card popups. |
Always show content | If enabled, the product info stays visible on the desktop without needing a click/hover. |
The Product Hotspot block allows you to tag specific products directly onto your media, creating an interactive "Shop the Look" experience.
Hotspot Configuration:
Positioning (Desktop) | Adjust the Horizontal and Vertical sliders to pin the hotspot exactly over the item in your image. |
Positioning (Mobile) | Fine-tune the coordinates specifically for mobile screens to ensure accuracy on smaller displays. |
Product Selection | Choose the product you want to link to this specific hotspot. |
Enable Quick View | Toggle this on to allow customers to view product details in a pop-up without leaving the current page. |