Shine Text Hotspot
Theme: Shine · Section type: All-template section
A Text hotspot section shows one image with up to 3 clickable markers (hotspots). Each hotspot opens a short note, so customers can learn about a product's features from a single image.
Note: You can add this section to any template, except the header and footer. Each section holds up to 3 hotspots.
What you can do
- Add the section and your image
- Add hotspots and place them on the image
- See what customers see
- Change the heading, layout, and dot colors
- Fix common problems
Add the section and your image
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Text hotspot. The section comes with 1 hotspot.
- Under Image, select an Image.
- Optional: select a Mobile image. If you don't add one, mobile shows the main image.
- Click Save.
Tip: Choose an image with clear space around the features you want to point out. A close-up product shot with a plain background works best.
Add hotspots and place them on the image
- In the left sidebar, under Text hotspot, click Add block > Hotspot.
- Under Content, enter a Heading (the feature name) and a Description.
- Under Large screen position, drag Top offset and Left offset until the dot sits on the feature.
- Switch to the mobile preview. Under Mobile screen position, set the offsets again.
- Click Save.
Setting | What it does |
|---|---|
Top offset | Moves the dot up or down, from 0 % (top edge) to 100 % (bottom edge) of the image. |
Left offset | Moves the dot left or right, from 0 % (left edge) to 100 % (right edge) of the image. |
Large screens and mobile have separate offsets, so you can place the dot on each image.
Tip: Always check the mobile preview after you place a hotspot. A dot that sits on the feature on a wide image can miss it on a narrow one.
What customers see
Each hotspot is a round dot with a + icon. Customers click or tap the dot to read its note.
- Large screens: the note opens next to the dot, and the + turns into ×. The note opens toward the center of the image, so it stays inside the image. Customers close it with × or by clicking anywhere outside the note.
- Tablets and phones: the note opens in a popup. Customers can swipe between all the hotspots in the section, and dots at the bottom show which one they're on.
Settings reference
General
Setting | What it does |
|---|---|
Color schemes | Sets the section colors. To edit schemes, go to Theme settings > Colors. |
Section subheading | A short line above the heading. Leave it empty to hide it. |
Section heading | The section heading. To highlight words, put them in square brackets, for example [built to last]. Set the highlight style in Theme settings > Typography. |
Heading size | The size of the heading: H2, H3, H4, or H5. |
Section description | Text below the heading. Leave it empty to hide it. |
Image
Setting | What it does |
|---|---|
Image | The image on large screens. Mobile also shows it when no mobile image is set. |
Mobile image | An image for small screens only. |
Large screen
Setting | What it does |
|---|---|
Section heading position | Places the heading at Top left or Top center above the image, or Inline beside it. |
Section ordering | Shows the heading before the image (Text first) or after it (Image first). |
Mobile screen
Setting | What it does |
|---|---|
Section heading position | Places the heading at Top left or Top center above the image. |
Section ordering | Shows the heading before the image (Text first) or after it (Image first). |
Hotspot dot
Setting | What it does |
|---|---|
Background | The color of the dot. |
Icon | The color of the + icon inside the dot. |
Tip: Pick a dot color that stands out from your image. On a light image, use a dark Background with a white Icon.
Hotspot settings: Large screen position and Mobile screen position
Setting | What it does |
|---|---|
Top offset | Moves the dot up or down. See "Add hotspots and place them on the image" above. |
Left offset | Moves the dot left or right. |
Hotspot settings: Content
Setting | What it does |
|---|---|
Heading | The feature name at the top of the note. |
Description | The note text. You can use bold, italics, and links. |
Troubleshooting
The hotspot is in the wrong place on mobile.
The mobile offsets are separate from the large-screen offsets. Open the Hotspot block, switch to the mobile preview, and adjust Mobile screen position.
I can't add another hotspot.
A Text hotspot section holds up to 3 hotspots. To show more, add a second Text hotspot section with another image.
The dot is hard to see.
Change Background and Icon under Hotspot dot to colors that contrast with your image.
I want the hotspots to link to products.
Text hotspot shows text only. To let customers shop the items in an image, use Image shoppable instead.
Related articles
- Shine Image shoppable
- Shine Comparison image
- Shine Image banner
- Shine Typography
Updated on: 22/10/2026
Thank you!