Theme section
Product hotspots
Highlight product details with clickable markers on an image.
Where to configure thisIn Shopify, go to Online Store → Themes → Customize and choose Add section → Products → Product hotspots. Availability depends on template context.
What this section does
Choose a product or image, then add feature blocks with desktop/mobile marker coordinates, feature titles, descriptions and optional specifications. On tablets, longer copy can use more horizontal space.
How to set it up
- Open your Shopify theme editor and select the appropriate template.
- Configure the section settings in the tables below.
- Add or reorder the relevant blocks.
- Check the result on desktop and mobile, then save.
Exact Theme Editor settings
Verified against sections/product-hotspots.liquid from the supplied theme archive.
| Group | Setting | Type | Default | Options / visibility |
|---|---|---|---|---|
| Content | Eyebrow | text | THE DETAILS | — |
| Content | Heading | text | A closer look. | — |
| Content | Description | text | Explore the details that make this product different. | — |
| Content | Product | product | — | — |
| Content | Custom product image | image_picker | — | — |
| Content | Image alt text | text | — | — |
| Content | Marker hint | text | Select a point to explore the details | — |
| Content | Details label | text | DESIGNED WITH PURPOSE | — |
| Content | Product link label | text | Discover the product | — |
| Content | Optional custom button link | url | — | — |
| Image and layout | Image aspect ratio | select | square | Square / Portrait / Landscape |
| Image and layout | Image fit | select | contain | Contain full image / Fill frame (crop) |
| Image and layout | Image horizontal position (desktop) | range | 50 | — |
| Image and layout | Image vertical position (desktop) | range | 50 | — |
| Image and layout | Image horizontal position (mobile) | range | 50 | — |
| Image and layout | Image vertical position (mobile) | range | 50 | — |
| Image and layout | Maximum section width | range | 1320 | — |
| Image and layout | Corner radius | range | 24 | — |
| Colors | Use theme colors | checkbox | On | — |
| Colors | Section background | color | #FFFFFF | — |
| Colors | Card background | color | #F5F5F7 | — |
| Colors | Text color | color | #17181B | — |
| Colors | Secondary text | color | #61646B | — |
| Colors | Hotspot accent | color | #3F35F1 | — |
| Colors | Hotspot label color | color | #17181B | — |
| Spacing | Top spacing | range | 64 | — |
| Spacing | Bottom spacing | range | 64 | — |
Blocks
Feature hotspot (hotspot)
| Setting | Type | Default | Options / visibility |
|---|---|---|---|
| Feature title | text | Product feature | — |
| Marker label | text | — | — |
| Small label | text | HIGHLIGHT | — |
| Feature description | textarea | Describe this feature and why it matters to your customers. | — |
| Optional specification | text | — | — |
| Feature icon | select | sparkle | None / Camera / Battery / Processor / Design / Audio |
| Horizontal position | range | 50 | — |
| Vertical position | range | 50 | — |
| Horizontal position | range | 50 | — |
| Vertical position | range | 50 | — |
Add section category: Products.
Related documentationSee the complete section reference and section overview.