Shop the Look

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce23.tsx instead.

Usage

The file also exports ecommerce23Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Ecommerce23, ecommerce23Demo } from "@/components/blocks/ecommerce/ecommerce23";

export default function Page() {
  return <Ecommerce23 {...ecommerce23Demo} />;
}

Props

Types

type MediaSlotImage = { src: string; alt: string };

type Hotspot = {
  name: string;
  price: string;
  image?: MediaSlotImage; // thumbnail in the bundle strip; falls back to a placeholder icon when omitted
  top: string; // CSS percentage, e.g. "22%"
  left: string; // CSS percentage, e.g. "42%"
};

Behavior notes

• Each hotspot dot is a real button with useState tracking which single hotspot's product card is open; clicking an open dot again closes it, and clicking a different dot swaps to that one, only one card is ever open at a time.
• The pulsing ring behind each dot is a decorative CSS animation (animate-ping), not tied to any state.
• Hotspot product cards open with a fixed offset below their dot and aren't edge-aware, so a hotspot placed very close to the image's left/right edge can render its card partially clipped by the viewport on narrow screens.
• The bundle strip's "Add all to cart" button and each hotspot card's "Add" button are both inert, there's no cart in this demo.
• top and left are plain CSS percentage strings rather than numbers so they can be dropped straight into an inline style without unit conversion.