How to set up the hotspots section

The hotspots section makes images interactive by adding clickable hotspots that highlight key products or features.

Section settings

Heading: Set a title for this section. This is optional.

Subheading: Set a subtitle for this section. This is optional.

Description: Add a description for the hotspots section.

Hotspots

Open button link in new window: Choose whether the link should open in a new tab or the same tab.

Layout

Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.

Section inner max width (px): Set the maximum width of the content inside this section in pixels.

Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.

Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.

Vertical outer spacing: Adjust the space between this section and the sections above and below it in pixels.

Content position: Select the horizontal placement of the content. Options: Left, Right.

Content width: Select the width of the content relative to the total section width. Options: One half, One third, One fourth.

Show hotspots under content: Enable this option to display hotspots below the content.

Styles

Image: Select or upload an image for the hotspots section. You can also browse free images via the “Explore free images” link.

Section background color: Choose the background color for the section.

Heading color: Choose the color for the heading.

Text color: Choose the color for the subheading, description, and hotspot heading.

Hotspot

Horizontal position: Adjust the horizontal position of the hotspot on the image.

Vertical position: Adjust the vertical position of the hotspot on the image.

Image: Select or upload an image to display within the hotspot. You can also browse free images via the “Explore free images” link.

Heading: Set the title for the hotspot.

Description: Add a description for the hotspot content.

Link label: Set the text for the hotspot link.

Link URL: Set the destination for the hotspot link (e.g., page, collection, product, external link, etc.).

Color: Choose the color of the hotspot icon.