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

Setting	Description
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

Setting	Description
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

Setting	Description
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

Setting	Description
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

Setting	Description
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

Setting	Description
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

Setting	Description
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)