Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Product hotspots. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Select Product for the purchase area and choose whether to show its image, description, vendor, quantity and product link.
- Choose Custom image and optional Mobile image for the annotated scene. Adjust image side, width, ratios and crop positions.
- Add a Feature hotspot for each product feature. Write its Title and Text and optionally select an icon image.
- Place each marker using horizontal/vertical coordinates, configure its panel direction and give it a useful Accessible label.
- Set mobile marker coordinates and test the feature panels and product purchase controls separately.
Main settings to review
| Setting | Choices or control |
|---|---|
| Product | Choose a product |
| Custom image | Choose an image |
| Mobile image | Choose an image |
| Marker style | Plus · Number · Dot |
| Mobile image ratio | Portrait (4:5) · Square (1:1) · Landscape (4:3) |
| Show quantity | On / Off |
Blocks and content
This section allows up to 8 direct blocks. Nested blocks have their own parent-specific choices and limits.
- Feature hotspot: configure this inside the section. Its available controls are listed below.
Content and media
- Use a clear photo of the selected product, with details large enough to identify. Feature icons are optional supporting media.
- These hotspots describe features of one product. Use Shoppable image for markers linked to several different products.
Check the mobile layout
- Check marker positions against the mobile crop, panel opening directions and the stacked purchase area.
Common questions and fixes
- The purchase area is missing: select an available Product.
- A marker's panel lacks copy: complete the Feature hotspot Title and Text.
- Features are misplaced on mobile: configure the mobile coordinates rather than reusing a changed desktop 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 (41)
| 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 / Image position | Left · Right | Default: Left. |
| Layout / Desktop image width | 45–70 %; step 5 | Default: 60. |
| Layout / Desktop gap | 0–48 px; step 4 | Default: 20. |
| Layout / Corner radius | 0–40 px; step 2 | Default: 12. |
| 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. |
| Product / Product | Choose a product | Default: Not set. |
| Product / Show product image | On / Off | Default: Off. |
| Product / Show vendor | On / Off | Default: Off. |
| Product / Show product description | On / Off | Default: On. |
| Product / Show quantity | On / Off | Default: Off. |
| Product / Show product link | On / Off | Default: On. |
| Image / Custom image | Choose an image | Default: Not set. Uses the selected product image when left blank. |
| Image / Mobile image | Choose an image | Default: Not set. Uses the desktop image when left blank. |
| Image / Image alt text | Text | Default: Not set. Leave blank to use the image or product alt text. |
| Image / Desktop image ratio | Square (1:1) · Portrait (4:5) · Landscape (3:2) · Wide (16:9) | Default: Square (1:1). |
| Image / Mobile image ratio | Portrait (4:5) · Square (1:1) · Landscape (4:3) | Default: Portrait (4:5). |
| Image / Desktop image position | Left · Center · Right | Default: Center. |
| Image / Mobile image position | Left · Center · Right | Default: Center. |
| Hotspots / Marker style | Plus · Number · Dot | Default: Plus. |
| 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 / Feature panel width | 220–420 px; step 20 | Default: 300. |
| Content / Eyebrow | Text | Default: Why it stands apart. |
| Content / Heading | Formatted inline text | Default: Explore every detail. |
| Content / Description | Formatted text | Default: Highlight the materials, craftsmanship and features that make this product special.. |
| 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. |
Feature hotspot block controls (11)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Eyebrow | Text | Default: Material. |
| Title | Text | Default: Premium materials. |
| Text | Formatted text | Default: Explain the quality, function or craft shown at this point.. |
| Icon image | Choose an image | Default: Not set. |
| Accessible label | Text | Default: Not set. Leave blank to use the hotspot title. |
| Desktop position / Horizontal position | 0–100 %; step 1 | Default: 35. |
| Desktop position / Vertical position | 0–100 %; step 1 | Default: 40. |
| Desktop position / Panel opening direction | Right · Centered · Left | Default: Right. |
| Desktop position / Panel vertical position | Below marker · Above marker | Default: Below marker. |
| Mobile position / Horizontal position | 0–100 %; step 1 | Default: 35. |
| Mobile position / Vertical position | 0–100 %; step 1 | Default: 40. |