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

# Electro How to Use Electro Text Hotspot

**Theme:** Electro · **Section type:** All-template section

A Text hotspots section shows one image with up to 5 icon markers (hotspots). Each hotspot points to a short note with a heading and a description, so customers can learn about a product's features from a single picture.

> **Note:** You can add this section to any template, but not to the header or footer. Each section holds up to 5 hotspots.
![Electro Text hotspots in List mode: 3 hotspot icons on the image, each joined by a line to its note](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/th1_xtz0v1.png)

**What you can do**
- Add the section and your image
- Add hotspots and place them on the image
- Choose the icon for each hotspot
- Show the notes as a list or a slideshow
- See what customers see
- Look up every setting
- 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 hotspots**. The section comes with 5 hotspots.
3. Under **Image**, select an **Image**.
4. Under **General**, enter a **Section subheading**, a **Section heading**, and a **Section description**, and choose a **Heading size**.
5. Optional: under **Button**, enter a **Label** and a **Link** to show a button below the description.
6. Click **Save**.

> **Tip:** The image keeps its original shape. Use an image with a plain background, so the hotspot icons stand out.

## Add hotspots and place them on the image
1. In the left sidebar, under **Text hotspots**, click a **Hotspot** block, or click **Add block** > **Hotspot**.
2. Under **Text**, enter a **Heading** and a **Description**.
3. Under **Position**, drag **Top offset** and **Left offset** until the icon sits on the feature.
4. Choose a **Content position on large screen**: Left or Right of the image.
5. Click **Save**.

| Setting | What it does |
| ---- | ---- |
| Top offset | Moves the icon up or down, from 0 % (top edge) to 100 % (bottom edge) of the image. |
| Left offset | Moves the icon left or right, from 0 % (left edge) to 100 % (right edge) of the image. |
| Content position on large screen | Shows the note on the Left or Right side of the image, joined to the icon by a line. Used with the List display type. |

> **Tip:** Put the notes for hotspots on the left half of the image on the Left, and the others on the Right, so the lines don't cross the picture.

## Choose the icon for each hotspot
1. Click a **Hotspot** block.
2. Under **Icon**, choose an **Icon source**: Theme library, Custom image, or Custom SVG.
3. With Theme library, pick an icon from the **Theme library** list. With Custom image, select a **Custom image** (a square image works best). With Custom SVG, paste SVG code into **Custom SVG**. The icon shows at the theme's icon size.
4. Click **Save**.

The same icon shows on the image and at the top of the note. For the full icon list, see What icons can you use on Electro theme.

## Show the notes as a list or a slideshow
1. Click the **Text hotspots** section.
2. Under **Layout**, choose a **Display type**: List or Slideshow.
3. With Slideshow, turn **Show pagination for slideshow** and **Show navigation for slideshow** on or off.
4. Choose a **Content alignment** for the section heading.
5. Under **Hotspot items**, choose a **Card color scheme** for the notes.
6. Click **Save**.

> **Tip:** List works best with up to 3 hotspots. Use Slideshow for more than 3.

## What customers see
- **List, large screens:** every note shows beside the image, on the side you chose, joined to its icon by a line. Clicking an icon or a note brings that note to the front.
- **Slideshow, large screens:** the image shows on the left and one note at a time on the right. Customers click an icon on the image, the arrows, or the dots to move to another note.
- **Phones and tablets:** the icons stay on the image. With List, all notes show as cards below the image. With Slideshow, customers swipe through the notes below the image.
- **Button:** if you added a button, it shows below the section description.
![Electro Text hotspots on a phone: icons on the image and the notes as cards below it](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/th2_16gde8g.png)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the section background and text colors. |
| Section subheading | A short tagline above the heading. |
| Section heading | The section heading. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Section description | A short text below the heading. Supports bold, italic, and links. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Display type | Shows the notes as a List or a Slideshow. List is recommended for up to 3 hotspots, Slideshow for more. |
| Show pagination for slideshow | Shows dots above the notes. Used with Slideshow. |
| Show navigation for slideshow | Shows previous and next arrows above the notes. Used with Slideshow. |
| Content alignment | Aligns the section heading Left or Center. |

### Hotspot items
| Setting | What it does |
| ---- | ---- |
| Card color scheme | Sets the background and text colors of the notes. |

### Image
| Setting | What it does |
| ---- | ---- |
| Image | The image the hotspots sit on. It keeps its original shape. |

### Button
| Setting | What it does |
| ---- | ---- |
| Label | The button text. Leave it empty to hide the button. |
| Link | The page the button opens. |

### Hotspot block settings
| Setting | What it does |
| ---- | ---- |
| Icon source | Chooses where the icon comes from: Theme library, Custom image, or Custom SVG. |
| Theme library | The theme icon to show. Used with Theme library. |
| Custom image | An image to use as the icon. Use a square image. Used with Custom image. |
| Custom SVG | SVG code for the icon. Used with Custom SVG. |
| Heading | The note heading. |
| Description | The note text. |
| Top offset, Left offset, Content position on large screen | See "Add hotspots and place them on the image" above. |

## Troubleshooting
**I changed the icon but the old one still shows.**
The icon follows **Icon source**. If you selected a **Custom image** or pasted a **Custom SVG**, also set **Icon source** to match.

**I can't add another hotspot.**
A Text hotspots section holds up to 5 hotspots. Add a second Text hotspots section for more.

**The notes overlap on large screens.**
In List mode, notes on the same side can overlap when their icons are close together. Move the icons apart with **Top offset**, switch some notes to the other side, or use the Slideshow display type.

**The pagination or arrows don't show.**
These settings work only with **Display type** set to **Slideshow**.

**A button looks faded and can't be clicked.**
The button has no link. Add a **Link** under **Button**.

## Related articles
- [Electro Product hotspot](https://help.ecomx.co/en/article/electro-how-to-use-electro-product-hotspot-1i9exh2/)
- [What icons can you use on Electro theme](https://help.ecomx.co/en/article/electro-what-icons-can-you-use-on-electro-theme-hdw06b/)
- [Electro Image with text](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-with-text-section-1i58xtt/)
- [Electro Content collage](https://help.ecomx.co/en/article/electro-how-to-edit-electro-content-collage-4yio74/)