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.
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
- 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 Hotspot item blocks.
- Under General, enter a Section subheading, Section heading, and Section description. Leave a field empty to hide it.
- Under Image, select an Image. An 800 x 500 px PNG is recommended.
- 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
- In the left sidebar, under Product hotspots, click a Hotspot item block.
- Select a Product.
- Drag Top offset and Left offset until the dot sits on the product in the image.
- Repeat for each hotspot.
- 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.
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
Updated on: 23/10/2026
Thank you!