E-commerce

Interactive Product Hotspots

A shop-the-look room photo with pulsing hotspots on every piece. Hover or tap a dot for a product popover with price, rating and add to bag, tick pieces in the look panel to build a bundle, and switch on merchant edit mode to drag hotspots into place.

Full screen Add this to my project

Use the Live / Loading / Empty / Error switch at the top of the demo to see every state.

Why it matters

Lifestyle photos stop being decoration and start selling: shoppers buy straight from the scene, and buying the whole look raises average order value with an automatic bundle discount.

How it works

01Each hotspot stores its position as a percentage of the image, so it stays pinned to the product at any screen size.
02Hover, tap or keyboard-select a dot to open a popover that adds the piece to the bag; the look panel totals selected pieces and unlocks 10% off at three or more.
03Merchants toggle edit mode and drag dots (mouse or touch) or nudge them with arrow keys; positions save instantly.