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