Electro How to Use Electro Product Hotspot
Theme: Electro · Section type: All-template section
The Product hotspots section shows one image with up to 5 markers (hotspots). Each hotspot is linked to a product, and its product card shows next to the image, so customers can shop the products they see in a lifestyle or setup photo.
Note: You can add this section to any template, but not to the header or footer. Each section holds up to 5 hotspots.
What you can do
- Add the section and your image
- Link hotspots to products and place them on the image
- Let customers buy from the card
- Add a button under the heading
- See what customers see
- Change the section settings
- 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 > Product hotspots. The section comes with 3 hotspots.
- Under Image, select an Image.
- Under General, enter a Section subheading, Section heading and Section description, or leave them empty to hide them.
- Click Save.
Tip: Use a wide, uncluttered image where each product is easy to see. The image keeps its own shape, so it isn't cropped.
Link hotspots to products and place them on the image
- In the left sidebar, under Product hotspots, click a Hotspot item block.
- Under General, select a Product.
- Under Position, drag Top offset and Left offset until the marker sits on the product in the image.
- To add another hotspot, click Add block > Hotspot item. You can add up to 5.
- Click Save.
Setting | What it does |
|---|---|
Top offset | Moves the marker up or down, from 0 % (top edge) to 100 % (bottom edge) of the image. |
Left offset | Moves the marker left or right, from 0 % (left edge) to 100 % (right edge) of the image. |
Tip: The offsets are percentages of the image, so the markers stay on the same spot on every screen size. Check the mobile preview anyway: markers close together can overlap on a small image.
Let customers buy from the card
- Under Layout, choose Quick buy:
- Don't use hides the quick buy button.
- Standard (variant picker) opens a popup where customers choose one variant.
- Bulk order (all variants) opens a popup where customers enter quantities for several variants at once.
- Click Save.
The other card options, such as vendor, swatches, badges, quick view, product description and image ratio, come from Theme settings > Product card and apply to all product cards in your store.
Add a button under the heading
- Under Button, enter a Label. Leave it empty to hide the button.
- Select a Link.
- Click Save.
What customers see
- Image and card: on large screens, the image is on the left and one product card is on the right. On tablets and phones, the card shows under the image.
- Hotspots: each hotspot is a round + marker. The marker of the product that's shown is highlighted.
- Switching products: customers click a marker to show its product card. They can also use the arrows (Show navigation) or dots (Show pagination) above the card, or swipe the card on touch screens. The highlighted marker follows the card.
- Product card: customers click the card to open the product page, or use quick view and quick buy if they're on.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the colors of the section. |
Section subheading | Sets a short line above the heading. Leave it empty to hide it. |
Section heading | Sets the section heading. Leave it empty to hide it. |
Heading size | Sets the heading size from H2 to H5. |
Section description | Sets the text under the heading. |
Layout
Setting | What it does |
|---|---|
Show pagination | Shows dots above the product card, one per hotspot. |
Show navigation | Shows previous and next arrows above the product card. |
Content alignment | Aligns the subheading, heading, description and button Left or Center. |
Quick buy | Sets the quick buy button on the cards: Don't use, Standard (variant picker) or Bulk order (all variants). See "Let customers buy from the card" above. |
Image
Setting | What it does |
|---|---|
Image | Sets the image the hotspots sit on. |
Button
Setting | What it does |
|---|---|
Label | Sets the button text. Leave it empty to hide the button. |
Link | Sets the page the button opens. |
Hotspot item block
Setting | What it does |
|---|---|
Product | Sets the product shown when customers select this hotspot. |
Top offset | Sets the vertical position of the marker. See "Link hotspots to products and place them on the image" above. |
Left offset | Sets the horizontal position of the marker. |
Troubleshooting
I can't add a sixth hotspot.
Each section holds up to 5 hotspots. To show more products, add a second Product hotspots section.
A hotspot shows an empty card.
The Hotspot item block has no product. Click the block and select a Product.
I can't find the card style, vendor or badge settings in the section.
These settings are in Theme settings > Product card. They change all product cards in your store, not only this section.
The quick buy button doesn't appear.
It's hidden on sold-out products and when Quick buy is set to Don't use.
I want hotspots with text notes instead of products.
Use the Text hotspots section.
Related articles
- How to use Electro Text hotspot
- How to use Electro Featured product
- How to use Electro Product list
- Electro Theme settings
Updated on: 30/10/2026
Thank you!