Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Interactive image. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Choose the main Image and optional Mobile image, then set desktop and mobile ratios and crop positions.
- Add a Hotspot block for each point of interest. Give the marker a short Marker text and a meaningful Accessible label.
- Set horizontal and vertical marker positions, then choose which direction its panel opens.
- Add Heading, Text, Image or other supported child blocks inside the Hotspot panel.
- Configure mobile marker positions independently and test opening and closing every panel.
Main settings to review
| Setting | Choices or control |
|---|---|
| Image | Choose an image |
| Mobile image | Choose an image |
| Desktop image ratio | Wide (16:9) · Landscape (3:2) · Landscape (4:3) · Square (1:1) |
| Mobile image ratio | Portrait (4:5) · Square (1:1) · Landscape (4:3) · Wide (16:9) |
| Marker size | 32–60 px; step 2 |
| Panel width | 240–520 px; step 20 |
Blocks and content
This section allows up to 12 direct blocks. Nested blocks have their own parent-specific choices and limits.
The following content blocks have their own setup and control reference. Nested blocks belong inside their parent, such as Slide, Tab, Tile or Story chapter.
Content and media
- Use an image with clear points of interest and enough room for markers. A large scene around 1600–2400 px wide is a useful starting point.
- This section explains content. Choose Shoppable image when each marker should directly represent a selected product.
Check the mobile layout
- Separate mobile crops require separate marker coordinates. Check that panels stay inside the screen and do not cover all navigation controls.
Common questions and fixes
- A marker opens an empty panel: add child content blocks inside that Hotspot.
- A marker points at the wrong place on a phone: adjust the mobile coordinates after choosing the final crop.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (32)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Layout / Content width | 50–100 %; step 5 | Default: 100. 100% uses the selected width. |
| Layout / Color scheme | Choose a color scheme | Default: background. |
| Layout / Top padding | 0–160 px; step 4 | Default: 64. |
| Layout / Bottom padding | 0–160 px; step 4 | Default: 64. |
| Layout / Mobile padding top | 0–100 px; step 4 | Default: 40. |
| Layout / Mobile padding bottom | 0–100 px; step 4 | Default: 40. |
| Image / Image | Choose an image | Default: Not set. |
| Image / Mobile image | Choose an image | Default: Not set. Uses the desktop image when left blank. |
| Image / Image alt text | Text | Default: Not set. Describe informative images. Leave blank for decorative images. |
| Image / Desktop image ratio | Wide (16:9) · Landscape (3:2) · Landscape (4:3) · Square (1:1) | Default: Wide (16:9). |
| Image / Mobile image ratio | Portrait (4:5) · Square (1:1) · Landscape (4:3) · Wide (16:9) | Default: Portrait (4:5). |
| Image / Desktop image position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Image / Mobile image position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Image / Image corner radius | 0–40 px; step 2 | Default: 12. |
| Hotspots / Marker size | 32–60 px; step 2 | Default: 42. |
| Hotspots / Marker background | Choose a color | Default: #ffffff. |
| Hotspots / Marker icon | Choose a color | Default: #222222. |
| Hotspots / Panel width | 240–520 px; step 20 | Default: 340. |
| Hotspots / Gap from marker | 4–32 px; step 2 | Default: 10. |
| Hotspots / Panel corner radius | 0–32 px; step 2 | Default: 12. |
| Content / Heading | Text | Default: Explore the details. |
| Content / Description | Formatted text | Default: Add helpful context to specific areas of an image.. |
| Content / Heading alignment | Left / Center / Right | Default: left. |
| Media / Section background image | Choose an image | Default: Not set. |
| Media / Section background position | Image focal point · Top · Center · Bottom | Default: Image focal point. This control appears only when the relevant layout or related option is selected. |
| Media / Section background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Media / Section background overlay | 0–80 %; step 5 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |