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