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, and it opens anchored under the marker you clicked. Click anywhere else to dismiss it.

On a phone the same tooltip becomes a bottom-sheet instead. That switch is driven by the real browser width, so it shows up on an actual narrow screen rather than through the preview's viewport buttons.

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).
Products	Up to 3 products revealed when the marker is tapped. Each gets its title, price and an Add to cart button, plus a thumbnail when the product has an image — the card fills the space either way.
Hotspot label	Describes what the marker points at — "His dinner bowl", not "Hotspot 1". Screen readers announce it, and it appears when no product is set.

The label is always available, whether or not you've picked a product. When both are set, the products fill the tooltip and the label becomes the marker's spoken name — which is why it's worth writing even on a marker that sells something.

Add to cart adds the first available variant and opens the cart drawer. A sold-out product shows a View product link to its page instead.

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.
A marker near the edge is safe. Its card slides back inside the frame rather than hanging off the side, so it stays readable at 5% or 95%. Very low markers still open downward, so leave a little room under the last row.
The marker carries a two-tone rim, so it stays visible on any photo. A plain coloured disc dissolves into a photograph of similar tone; the pin is ringed in a light colour inside and a dark one outside, so whichever your scene is, one of the two rings shows. You should not have to hunt for a dark corner to put a marker in — put it on the product.
An empty marker doesn't publish. A hotspot with no product and no label has nothing to reveal, so it's skipped on the live storefront — it stays visible in the theme editor while you're still placing it. Markers are numbered by the ones that actually render, so the sequence a shopper scans is never 1, 3, 4.

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 pins with a soft halo that breathes out from them, like a gust drifting past.
A warm, solid tooltip card with the same playful corners. It is deliberately opaque: the card floats over your own scene photo, and a see-through card would let that photo sit behind the product name and price, where a pale patch makes them hard to read.
A warm bottom-sheet on mobile.

The skin follows the Marker style you choose — dot, drop pin or numbered all wear the amber and the halo, so switching style never costs you the Gaoth look.

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 Hotspot label to a screen reader, which is why the label should describe the object. The tooltip that opens carries the same name, so it's clear which marker you're in.
Every marker is a 44 px target, on every marker style and every preset — comfortable under a thumb, and what target-size audits measure.
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 sheet has a close button, and tapping the dimmed area behind it closes it too — a phone has no Escape key.
On wider screens the tooltip is a plain anchored card, not a modal: the rest of the page stays live behind it, so shoppers can go straight from one marker to the next.
The pin's halo only animates for visitors who haven't asked their system to reduce motion.
The scene photo ships responsive sources, so a phone downloads a phone-sized image rather than the desktop one.

Tips

Sell the thing the marker is on. A marker over a feeding bowl should sell the bowl, not the food that goes in it. It is a tempting shortcut and it reads to a shopper exactly like the mistake above: they tap an object and are handed something else.
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. This is the one rule worth being strict about: a marker labelled "His dinner bowl" on a photo with no bowl in it reads as a mistake, and a shopper who taps it to find something that is not in the picture stops trusting the rest of the page.
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.
Group a shelf into one marker. Three products on one pin reads better than three pins two centimetres apart, which crowd each other's tap targets.

Image hotspot ​

Try it ​

Shop the den

Section settings ​

Blocks ​

Hotspot ​

Placing markers well ​

Per-preset signature ​

Accessibility and behaviour ​

Tips ​