Hotspots is a Shopify theme section in the Section Star library. Add an image with hotspots to any page.
About the Hotspots section
The Hotspots section allows you to create interactive image areas on your Shopify store. Each image can have multiple clickable hotspots that display additional information, like product descriptions, ratings, and links. This section is perfect for showcasing detailed product features, interactive guides, or promotional campaigns.
Live demo
Use cases
-
Product Feature Highlights: Use hotspots to draw attention to specific features of a product, such as additional pockets on a backpack, the quality of materials, or unique design elements.
-
Interactive Product Tours: Create a guided tour for more complex products. For example, a hotspot on each significant component of a tech gadget, explaining its function and benefits.
-
Virtual Showrooms: Build a virtual showroom where customers can click hotspots to explore different parts of a room setup or display.
-
Promotions and Offers: Highlight limited-time offers and promotions by adding actionable hotspots that link directly to the promotion page.
-
Educational Content: Use hotspots to provide more information about products in educational or instructional guides.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set the design for the grid
| Setting | Type | Default |
|---|---|---|
| Gap Between Images | Number | 25 |
| Display | Select (Image on Right, Image on Left, Image below Text) | default |
| Gap between columns | Number | 30 |
Media Design
Set the design for the grid
| Setting | Type | Default |
|---|---|---|
| Media Aspect Ratio | Select (9:16, 3:4, 21:9, 16:9, 4:3, 1:1…) | 4 / 3 |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Spacing between Media | Number | 10 |
Caption
Set the display of the caption
| Setting | Type | Default |
|---|---|---|
| Caption Headline Size | Range | 20 |
| Caption Text Size | Range | 15 |
| Caption Text Color | Color | #111 |
| Caption Background | Color or gradient | linear-gradient(164deg, rgba(255, 255… |
| Show Glass Effect? | Checkbox | On |
Content
Set the content for the section
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Text Alignment | Text alignment | left |
| Mobile Text Alignment | Text alignment | left |
| Headline | Inline rich text | <b>Sample headline</b> |
| Content | Inline rich text | This is the placeholder text for the … |
Button
Set content for the buttons.
| Setting | Type | Default |
|---|---|---|
| Show buttons? | Checkbox | On |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |
Secondary Button
Set content for the secondary button
| Setting | Type | Default |
|---|---|---|
| Show Secondary Action? | Checkbox | Off |
| Call to Action | Inline rich text | Secondary Action |
| Call to Action Link | URL | — |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Primary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Secondary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Primary Button Text Color | Color | #fff |
| Secondary Button Text Color | Color | #fff |
| Text Size | Range | 15 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |
| Border Size | Number | 0 |
| Border Color | Color | #111 |
Hotspot block settings
| Setting | Type | Default |
|---|---|---|
| Circle Size | Range | 25 |
| Text Size | Range | 13 |
| Text Color | Color | #111 |
| Background Color | Color | #fff |
| Horizontal Offset | Range | 0 |
| Vertical Offset | Range | 0 |
| Opacity | Range | 75 |
| Hotspot Text | Inline rich text | — |
| Headline | Inline rich text | Sample Headline |
| Text | Inline rich text | Sample text to describe the product |
| Optional Link | URL | — |
| Stars | Select (None, 5 stars, 4.5 stars) | none |
| Show Arrow on Hover? | Checkbox | On |
| Show Caption on Hover? | Checkbox | On |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Hotspots”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.