Image hotspot

Section overview

The Image hotspot section is a banner-style element that displays interactive hotspot links overlaid on an image. Users can hover or click on these hotspots to view product information or navigate to specific URLs.

Common use cases

• Showcase product features with interactive points highlighting specific details

• Create interactive lookbooks where users can shop directly from an image

• Build educational content with clickable points revealing more information

• Display room or space setups with purchasable items marked by hotspots

Usage tips

• Use high-quality images with good contrast to ensure hotspots are visible

• Position hotspots strategically to avoid overcrowding and ensure good mobile experience

• Consider the placement of text content relative to hotspots to prevent overlap

• For mobile, limit the number of hotspots as smaller screens make interaction more challenging

• Test different color schemes to ensure hotspots stand out against your background image

Section settings

Setting	Description
Image background desktop	The background image displayed on desktop devices
Image background mobile	The background image displayed on mobile devices
Show entire image	If enabled, displays the entire image without cropping
Y spacing	Controls the vertical height of the section
Color scheme	Sets the background and text color theme for the section
Text color	Controls the text color with options for default, force light, or force dark
Border color	Determines the color of section borders
Enable gradient	Adds a gradient overlay to enhance text visibility
Enable background overlay	Adds a background behind the content for better readability
Border position	Sets where borders appear around the section
Y alignment	Controls vertical positioning of content within the section
X alignment	Controls horizontal positioning and text alignment within the section
Enable margin	Adds horizontal margin to the section content
Enable max width	Limits the content width for better readability
Visibility	Controls whether the section appears on mobile, desktop, or both

Block settings

Heading

A customizable text heading for the section content.

• Block limit: 1

Setting	Description
Content	The text to display as the heading

Image

Displays an image within the content area of the section.

• Block limit: 3

Setting	Description
Image	The image to be displayed
Image height	Controls the height of the image in pixels

Content

Adds rich text content to the section.

• Block limit: 3

Setting	Description
Content	Rich text content to display in the section

Buttons

Adds one or two clickable buttons to the section.

• Block limit: 1

Setting	Description
Button label	Text for the primary button
Button URL	URL for the primary button
Color button	Style and color theme for the primary button
Secondary button label	Text for the secondary button
Secondary button URL	URL for the secondary button
Secondary color button	Style and color theme for the secondary button

Product

Creates a hotspot that displays a product card when clicked or hovered.

• Block limit: 20

Setting	Description
Product	The product to display when the hotspot is activated
Y alignment	Vertical position of the hotspot as a percentage
X alignment	Horizontal position of the hotspot as a percentage

Link

Creates a hotspot that links to a URL when clicked.

• Block limit: 20

Setting	Description
Title	Text displayed in the tooltip when hovering over the hotspot
URL	Destination URL when the hotspot is clicked
Y alignment	Vertical position of the hotspot as a percentage
X alignment	Horizontal position of the hotspot as a percentage