Image hotspot

Section overview

The Hotspot section displays an image with interactive overlay points that customers can click to reveal products or navigate to specific URLs.

Common use cases

• Showcase product features by highlighting specific areas of a product image

• Create an interactive lookbook where customers can shop directly from model images

• Display floor plans or maps with clickable navigation points

• Build guided tours highlighting important elements within an image

Usage tips

• Use high-resolution images that provide clear visibility of the hotspot areas

• Ensure sufficient contrast between the image and hotspot indicators

• Limit the number of hotspots to avoid overwhelming customers

• Position hotspots strategically to avoid overlap on mobile screens

• Test thoroughly on mobile to ensure hotspots remain accessible when the image scales down

• Consider using a gradient overlay to improve text visibility when placing content over images

Section settings

Setting	Description
Image background desktop	The main background image displayed on desktop devices
Image background mobile	A separate image optimized for mobile devices
Show entire image	When enabled, displays the entire image without cropping
Vertical spacing	Controls the height of the section from extra small to extra large
Color scheme	Sets the background and text color theme for the section
Text color	Determines the text color, with options for default, force light, or force dark
Border color	Sets the color for section borders
Enable gradient	Adds a gradient overlay to improve visibility of content over images
Enable background overlay	Adds a background color behind text content for improved readability
Border position	Controls where borders appear (none, top, bottom, or both)
Vertical alignment	Positions content at the top, middle, or bottom of the section
Horizontal alignment	Aligns content to the left, center, or right of the section
Enable margin	When enabled, adds horizontal margin to the section content
Enable max width	Limits the content width for improved readability
Visibility	Controls whether the section appears on all devices, only mobile, or only desktop

Block settings

Heading

Adds a primary heading to the section.

• Block limit: 1

Setting	Description
Content	The text to display as the heading

Image

Adds an image to the section content area.

• Block limit: 3

Setting	Description
Image	The image to display within the content area
Image height	Controls the height of the image in pixels

Content

Adds formatted text content to the section.

• Block limit: 3

Setting	Description
Content	Rich text content that can include formatting, lists, and basic HTML

Buttons

Adds primary and secondary buttons to the section.

• Block limit: 1

Setting	Description
Button label	The text displayed on the primary button
Button URL	The destination URL for the primary button
Button color	The style and color of the primary button
Secondary button label	The text displayed on the secondary button
Secondary button URL	The destination URL for the secondary button
Secondary button color	The style and color of the secondary button

Product

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

• Block limit: 20

Setting	Description
Product	The Shopify product to display when the hotspot is activated
Vertical position	The vertical position of the hotspot as a percentage from the top
Horizontal position	The horizontal position of the hotspot as a percentage from the left

Link

Creates a hotspot that navigates to a URL when clicked.

• Block limit: 20

Setting	Description
Title	The text shown in the tooltip when hovering over the hotspot
URL	The destination URL when the hotspot is clicked
Vertical position	The vertical position of the hotspot as a percentage from the top
Horizontal position	The horizontal position of the hotspot as a percentage from the left