> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.
![Text hotspot section with two hotspot dots on a product page](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/hotspot-1_17yt6qi.jpg)

**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

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Text hotspot**. The section comes with 1 hotspot.
3. Under **Image**, select an **Image**.
4. Optional: select a **Mobile image**. If you don't add one, mobile shows the main image.
5. 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

1. In the left sidebar, under **Text hotspot**, click **Add block** > **Hotspot**.
2. Under **Content**, enter a **Heading** (the feature name) and a **Description**.
3. Under **Large screen position**, drag **Top offset** and **Left offset** until the dot sits on the feature.
4. Switch to the mobile preview. Under **Mobile screen position**, set the offsets again.
5. 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.
![An open hotspot note on large screens](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/hotspot-1_1pmeohz.jpg)

## 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