Image hotspot
Section overview
The Hotspot section allows you to create an interactive image with clickable hotspots that can reveal product information or link to other pages. This creates an engaging and interactive shopping experience.
Common use cases
Showcasing featured products on a lifestyle or context image
Creating interactive lookbooks where customers can explore different items
Highlighting specific features or details of complex products
Building shoppable banners with multiple points of interest
Usage tips
Use high-quality images that contrast well with the hotspot indicators
Position hotspots strategically to highlight key areas of the image
Keep mobile users in mind when positioning hotspots - ensure they're not too close together
Consider using the gradient overlay option to improve text readability
Test the section on both desktop and mobile to ensure hotspots remain accessible and visible
Section settings
Image background desktop
The main background image displayed on desktop devices
Image background mobile
An alternative image optimized for mobile devices
Show entire image
When enabled, displays the full image instead of cropping it to fill the container
Y spacing
Controls the vertical height of the section
Color scheme
Sets the overall color theme for the section
Text color
Determines the text color, with options to force light or dark regardless of scheme
Border color
Sets the color for any borders applied to the section
Enable gradient
Adds a gradient overlay to improve text visibility over images
Enable background overlay
Adds a background color behind text content for better readability
Border position
Determines where borders appear (top, bottom, both, or none)
Vertical alignment
Controls where content appears vertically (top, middle, bottom)
Horizontal alignment
Controls where content appears horizontally (left, center, right)
Enable header overlap
Allows the section to overlap with the header
Enable margin
Controls whether the section content has horizontal margins
Enable max width
Limits the width of text content for better readability
Visibility
Controls whether the section appears on all devices, mobile only, or desktop only
Block settings
Heading
This block adds a prominent heading to the section.
Block limit: 1
Content
The text to display as the heading
Image
This block allows you to add additional images on top of the background image.
Block limit: 3
Image
The image to display
Image height
Controls the height of the image in pixels
Content
This block adds rich text content to the section.
Block limit: 3
Content
Rich text content that can include formatting and multiple paragraphs
Buttons
This block adds one or two call-to-action buttons.
Block limit: 1
Button label
Text displayed on the primary button
Button URL
Destination link for the primary button
Button color
Style and color variant for the primary button
Secondary button label
Text displayed on the secondary button
Secondary button URL
Destination link for the secondary button
Secondary button color
Style and color variant for the secondary button
Product
This block creates a hotspot that reveals a product card when clicked or hovered.
Block limit: 20
Product
The product to display when the hotspot is activated
Y alignment desktop
Vertical position of the hotspot on desktop (percentage)
X alignment desktop
Horizontal position of the hotspot on desktop (percentage)
Y alignment mobile
Vertical position of the hotspot on mobile (percentage)
X alignment mobile
Horizontal position of the hotspot on mobile (percentage)
Link
This block creates a hotspot that links to another page and displays a tooltip.
Block limit: 20
Title
Text displayed in the tooltip when hovering over the hotspot
URL
Destination link when the hotspot is clicked
Y alignment desktop
Vertical position of the hotspot on desktop (percentage)
X alignment desktop
Horizontal position of the hotspot on desktop (percentage)
Y alignment mobile
Vertical position of the hotspot on mobile (percentage)
X alignment mobile
Horizontal position of the hotspot on mobile (percentage)
Last updated
Was this helpful?