Skip to content
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 |