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

# Blum Product Hotspot

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

A Product hotspots section shows one lifestyle image with up to 3 dots (hotspots), each linked to a product. Customers see the products in the photo and can open or buy them right from the section.

> **Note:** You can add this section to any template, except the header and footer. Each section holds up to 3 **Hotspot item** blocks.
![Product hotspots section with 3 dots on the image and a product card beside it](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/hs-1_h9cx4f.png)

**What you can do**
- Add the section and your image
- Link products and place the hotspots
- See what customers see
- Change the Product hotspots 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 **Hotspot item** blocks.
3. Under **General**, enter a **Section subheading**, **Section heading**, and **Section description**. Leave a field empty to hide it.
4. Under **Image**, select an **Image**. An 800 x 500 px PNG is recommended.
5. Click **Save**.

> **Tip:** Choose a photo where the products are clearly visible and not too close to the edges, so the dots don't cover important details.

## Link products and place the hotspots
1. In the left sidebar, under **Product hotspots**, click a **Hotspot item** block.
2. Select a **Product**.
3. Drag **Top offset** and **Left offset** until the dot sits on the product in the image.
4. Repeat for each hotspot.
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. |

> **Tip:** The image keeps its own shape on every screen, so a dot stays on the same spot of the photo on desktop and mobile. Still check the mobile preview, because small dots can cover small products.

## What customers see
- **Large screens:** the image appears on the left and a product card on the right. When customers hover over a dot, a tooltip shows the product name and price. When they click a dot, the card on the right changes to that product.
- **Product card:** customers use the arrows and the counter above the card (for example 1 / 3) to move between the hotspot products, and click the card to open the product. The card follows **Theme settings** > **Product card**, including quick shop.
- **Mobile:** the product card appears below the image. Tooltips don't appear. Customers tap a dot or swipe the card to change products. The arrows appear only when **Show navigation on mobile** is selected.
![Hovering a dot shows the product name and price, and the card changes to that product](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/hs-2_144wmtc.png)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. Edit the schemes in Theme settings > Colors. |
| Section subheading | Adds a short line above the heading. |
| Section heading | Adds the section title. |
| Section description | Adds a short text below the heading. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Show navigation on mobile | Shows the previous and next arrows and the counter on mobile. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Image
| Setting | What it does |
| ---- | ---- |
| Image | Selects the image for the hotspots. The image keeps its original shape. |

### Prominent badge
| Setting | What it does |
| ---- | ---- |
| Text | Sets the badge text. Leave it empty to hide the badge. |
| Accent scheme | Uses the Main or Extra accent color. Appears after you enter a Text. |
| Position | Places the badge on the Left or Right. Appears after you enter a Text. |
| Shape | Shows the badge as a Star, Diamond, or Asterisk. Appears after you enter a Text. |

### Hotspot item block settings
| Setting | What it does |
| ---- | ---- |
| Product | Selects the product linked to the dot. |
| Top offset | See "Link products and place the hotspots" above. |
| Left offset | See "Link products and place the hotspots" above. |

## Troubleshooting
**I can't add a fourth hotspot.**
Each section holds up to 3 **Hotspot item** blocks. To show more products, add a second Product hotspots section.

**The hotspot isn't on the product.**
Open the **Hotspot item** block and adjust **Top offset** and **Left offset**. Both are percentages of the image size.

**The card shows a sample product.**
The **Hotspot item** block has no product. Select a **Product** in the block.

**Customers don't see the product name when they hover on mobile.**
Tooltips appear only on large screens. On mobile, customers tap the dot to see the product card.

## Related articles
- [Blum Featured Product](https://doc.ecomx.co/en/article/blum-featured-product-1euueqp/)
- [Blum Featured Product Carousel](https://doc.ecomx.co/en/article/blum-featured-product-carousel-t3g24r/)
- [Blum Product Card](https://doc.ecomx.co/en/article/blum-product-card-okpp7q/)
- [Blum Image Banner](https://doc.ecomx.co/en/article/blum-image-banner-jzf00j/)