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

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

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Text hotspots. The section comes with 5 hotspots.
Under Image, select an Image.
Under General, enter a Section subheading, a Section heading, and a Section description, and choose a Heading size.
Optional: under Button, enter a Label and a Link to show a button below the description.
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

In the left sidebar, under Text hotspots, click a Hotspot block, or click Add block > Hotspot.
Under Text, enter a Heading and a Description.
Under Position, drag Top offset and Left offset until the icon sits on the feature.
Choose a Content position on large screen: Left or Right of the image.
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

Click a Hotspot block.
Under Icon, choose an Icon source: Theme library, Custom image, or Custom SVG.
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.
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

Click the Text hotspots section.
Under Layout, choose a Display type: List or Slideshow.
With Slideshow, turn Show pagination for slideshow and Show navigation for slideshow on or off.
Choose a Content alignment for the section heading.
Under Hotspot items, choose a Card color scheme for the notes.
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

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.

Updated on: 30/10/2026

Was this article helpful?

Thank you!