Image hotspot

One photo, with numbered markers pinned to the things in it. A shopper taps a marker and the product behind it slides up, ready to buy — so a styled room, a made-up bed or a dog's corner becomes a shoppable page.

Use it when the scene is the sales pitch. On the Gaoth preset it becomes "Shop the den" — a warm pet-at-home photo in a soft-cornered frame, with amber pins that gently breathe.

Try it

Change the settings and the preview updates live. Click a pin — the tooltip is the real one, running the same code your storefront runs. Switch to the mobile view to see it open as a bottom-sheet.

←Image hotspot

Color scheme

Heading

Marker style

DotPinNumbered

←Hotspot 1

Horizontal position (%)

35

Vertical position (%)

50

Label (if no product)

Shown when no product is selected. Leave blank to use the product title.

Storefront preview

Shop the den

Section settings

Setting	What it does
Color scheme	Which of your five colour schemes this section paints with.
Heading	The title above the photo.
Image	The scene. Use a lifestyle photo with your products actually in it, not a plain product shot.
Marker style	Dot (a small pulsing dot), Pin (a map-style drop pin), or Numbered (1, 2, 3 — the clearest when you have several).

Blocks

Hotspot

One block per marker. Each one can carry up to three products — useful when a marker points at a shelf rather than a single item.

Setting	What it does
Horizontal position	Where the marker sits, left to right (0–100% of the image width).
Vertical position	Where it sits, top to bottom (0–100% of the image height).
Product 1/2/3	The products revealed when the marker is tapped.
Label	What a screen reader announces for this marker. Describe the thing — "His dinner bowl" — not "Hotspot 1".

Placing markers well

• Three to five markers is the ceiling. More than that and they crowd each other, especially on a phone.
• Positions are percentages, not pixels, so a marker stays on its object as the image scales. But it can't know the image crops on narrow screens — check your placements in the mobile preview before you publish.
• Don't pin near the very edge. A marker at 97% will have half its tooltip off-screen.

Per-preset signature

Only Gaoth carries the "Shop the den" skin:

• The scene sits in a soft asymmetric frame with a warm shadow, and a wind-trail seam under the heading.
• Amber numbered pins with a soft halo that breathes out from them, like a gust drifting past.
• A warm, frosted tooltip card with the same playful corners.
• A warm bottom-sheet on mobile.

The other four presets render clean, unadorned markers in their own scheme colours.

Accessibility and behaviour

• Markers are real <button>s: Tab to them, Enter or Space to open, Escape to close — and focus returns to the marker you came from.
• Clicking anywhere outside closes the open tooltip.
• Each marker announces its Label to a screen reader, which is why the label should describe the object.
• The pins are 44 px targets on the Gaoth preset, comfortable under a thumb.
• On a phone the tooltip opens as a native bottom-sheet (<dialog>), dimming the page behind it, rather than a cramped tooltip floating over the photo.
• The pin's halo only animates for visitors who haven't asked their system to reduce motion.

Tips

• Pick the photo first, then the products. A scene shot for this section — with the products genuinely in it — outperforms a stock room you pin approximately.
• Number your markers when there are more than two. Shoppers scan them in order.
• Write the label as a person would say it. "His dinner bowl" tells a screen-reader user what they're about to open; "Hotspot 1" tells them nothing.