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

![Product hotspots section with 3 hotspots and a product card on the Gizmo preset homepage](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ph1_vggfjp.jpg)

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

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Product hotspots**. The section comes with 3 hotspots.
3. Under **Image**, select an **Image**.
4. Under **General**, enter a **Section subheading**, **Section heading** and **Section description**, or leave them empty to hide them.
5. 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

1. In the left sidebar, under **Product hotspots**, click a **Hotspot item** block.
2. Under **General**, select a **Product**.
3. Under **Position**, drag **Top offset** and **Left offset** until the marker sits on the product in the image.
4. To add another hotspot, click **Add block** > **Hotspot item**. You can add up to 5.
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

1. 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.
2. 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

1. Under **Button**, enter a **Label**. Leave it empty to hide the button.
2. Select a **Link**.
3. 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.
![Selected hotspot highlighted with its product card shown on the right](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ph2_ys7sr3.jpg)


## 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](https://help.ecomx.co/en/article/electro-how-to-use-electro-text-hotspot-7wiikb/)
- [How to use Electro Featured product](https://help.ecomx.co/en/article/electro-how-to-use-electro-featured-product-ljozz3/)
- [How to use Electro Product list](https://help.ecomx.co/en/article/electro-how-to-use-electro-product-list-18087u0/)
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)