Shoppable Videos

Companion demo for How to add shoppable videos to your Next.js site with ImageKit.

A minimal Next.js page that renders a hero video with a synchronized product bar, on-frame hotspots, and a post-play product carousel. The blog post covers the why and how; this README covers running the demo and where to look in the code.

Run it

npm install
npm run dev

Open http://localhost:3000.

The demo defaults to ImageKit's public ikmedia ID and a sample video, so it works out of the box. To point at your own account, copy .env.local.example to .env.local and set NEXT_PUBLIC_IMAGEKIT_ID.

Where to look in the code

• lib/products.ts: the three product definitions, with highlight windows, hotspot coordinates, and target URLs.
• components/ShoppableHero.tsx: the only client component. Maps the products into the shoppable.products shape the player expects.
• app/page.tsx: page layout.

Customizing

• Swap HERO_VIDEO_SRC in lib/products.ts for any ImageKit-hosted video URL.
• Replace each product's imageUrl with your own. The transformation: [{ width: 200, height: 200 }] in ShoppableHero.tsx is applied on top of any params already in the URL.
• Add more entries to a product's hotspots array to mark it in multiple frames.

See the shoppable videos guide for the full option reference.

Stack

• Next.js 15+
• React 19, TypeScript
• Tailwind CSS v4
• @imagekit/video-player