# 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)    |