Hotspots is a Shopify theme block in the Section Star library. Highlight key details with interactive hotspots that grab attention and bring your images to life.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the block is published.
Hotspots
Set the display of the hotspots
| Setting | Type | Default |
|---|---|---|
| Caption Background Color | Color or gradient | linear-gradient(177deg, rgba(255, 255… |
| Media Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, Auto) | 4 / 3 |
| Image | Image | — |
Hotspots
Set the display of the hotspots
| Setting | Type | Default |
|---|---|---|
| Show Caption on Hover | Checkbox | Off |
| Text Size | Range | 13 |
| Text Color | Color | #111 |
| Hotspot Text 1 | Inline rich text | 1 |
| Hotspot Caption 1 | Rich text | <h3>Sample Product</h3><p>Sample desc… |
| Optional Link 1 | URL | — |
| Horizontal Offset 1 | Range | 0 |
| Vertical Offset 1 | Range | 0 |
| Hotspot Text 2 | Inline rich text | 2 |
| Hotspot Caption Text 2 | Rich text | <h3>Sample Product</h3><p>Sample desc… |
| Optional Link 2 | URL | — |
| Horizontal Offset 2 | Range | 0 |
| Vertical Offset 2 | Range | 0 |
| Hotspot Text 3 | Inline rich text | 3 |
| Hotspot Caption Text 3 | Rich text | <h3>Sample Product</h3><p>Sample desc… |
| Optional Link 3 | URL | — |
| Horizontal Offset 3 | Range | 0 |
| Vertical Offset 3 | Range | 0 |
| Custom CSS | Liquid | — |
How to add this block to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and find “Hotspots” in the blocks library.
- Publish it to the theme you want to use it in.
- In the Shopify theme customizer, add the block inside a compatible section.
- Configure it with the settings listed above.