A product photo on a category page does one job: grab the customer's focus. Once a shopper clicks through, the product page has to do everything else. Show the product in motion, build confidence, surface variants, and hand off to checkout without losing attention.

A static hero image and copy can only do so much. Shoppable videos close the gap between discovery and purchase. The viewer presses play, products appear on a bar alongside the video, items get highlighted as they appear on screen, and clickable markers on the video frame itself let the viewer jump straight to the product page — without pausing to search for it.

Building this from scratch usually means stitching together a video player, a product overlay system, a state machine to sync product highlights with playback time, and analytics on top. ImageKit's Video Player SDK ships all of it as a single config object.

In this tutorial we'll add a shoppable hero video to a Next.js product page using the SDK. By the end you'll have a working player with a three-product bar, time-based highlighting, clickable hotspots on the frame, and a post-play product carousel.

What we'll cover:

1. Install and configure the ImageKit Video Player SDK
2. Render a basic player on a product page
3. Add the shoppable products bar with time-based highlighting
4. Configure click-through actions
5. Add clickable hotspots on the video frame

Setting up the ImageKit Video Player SDK

Install the package in a Next.js 15+ / React 18+ project:

npm install @imagekit/video-player

Add your ImageKit ID to .env.local:

NEXT_PUBLIC_IMAGEKIT_ID=your-imagekit-id

You can find your ImageKit ID in the dashboard under URL endpoint.

The Player SDK uses browser APIs, so any component that renders it needs "use client" in the App Router. Here's a minimal player to confirm the install works:

"use client";

import { IKVideoPlayer } from "@imagekit/video-player/react";
import "@imagekit/video-player/styles.css";

const ikOptions = {
  imagekitId: process.env.NEXT_PUBLIC_IMAGEKIT_ID!,
};

const source = {
  src: "https://ik.imagekit.io/your-id/field-jacket.mp4",
};

export default function ProductHero() {
  return <IKVideoPlayer ikOptions={ikOptions} source={source} />;
}

Drop this component into your product page and you should see a working player with default controls. If the video doesn't load, double-check that the source URL is publicly accessible from your ImageKit account.

If you're comparing the SDK to the HTML5 <video> element or VideoJS, Adding video player in Next.js walks through those options first.

Adding the shoppable products bar

The shoppable feature is a property on the source object. It takes an array of products, each with a name, image, and timing information that controls when the product gets highlighted in the bar.

Start by defining the product data. Keeping it in a separate file makes the player component easier to read.

// lib/products.ts
export const PRODUCTS = [
  {
    productId: 1,
    productName: "Field Jacket",
    imageUrl:
      "https://ik.imagekit.io/your-id/field-jacket.jpg?tr=w-200,h-200,fo-auto",
    highlightTime: { start: 0, end: 6 },
    productUrl: "https://atlasgoods.example.com/field-jacket",
  },
  {
    productId: 2,
    productName: "Trail Pack",
    imageUrl:
      "https://ik.imagekit.io/your-id/trail-pack.jpg?tr=w-200,h-200,fo-auto",
    highlightTime: { start: 5, end: 12 },
    productUrl: "https://atlasgoods.example.com/trail-pack",
  },
  {
    productId: 3,
    productName: "Trail Cap",
    imageUrl:
      "https://ik.imagekit.io/your-id/trail-cap.jpg?tr=w-200,h-200,fo-auto",
    highlightTime: { start: 11, end: 18 },
    productUrl: "https://atlasgoods.example.com/trail-cap",
  },
];

The product images here use ImageKit's URL-based image transformations directly. tr=w-200,h-200,fo-auto resizes each image to a 200x200 thumbnail with smart crop centered on the subject. No image SDK needed for this.

highlightTime.start and highlightTime.end are seconds into the video. When playback enters the highlight window for a product, the SDK visually emphasizes that product in the bar. Slight overlaps between products are fine and create a smooth handoff as one product fades out and the next fades in.

Now wire the products into the player:

"use client";

import { IKVideoPlayer } from "@imagekit/video-player/react";
import "@imagekit/video-player/styles.css";
import { PRODUCTS } from "@/lib/products";

const ikOptions = {
  imagekitId: process.env.NEXT_PUBLIC_IMAGEKIT_ID!,
};

const source = {
  src: "https://ik.imagekit.io/your-id/field-jacket.mp4",
  shoppable: {
    products: PRODUCTS.map((p) => ({
      productId: p.productId,
      productName: p.productName,
      imageUrl: p.imageUrl,
      highlightTime: p.highlightTime,
      onClick: {
        action: "goto" as const,
        pause: true,
        args: { url: p.productUrl },
      },
    })),
    startState: "openOnPlay" as const,
    autoClose: 3,
    width: 22,
    showPostPlayOverlay: true,
  },
};

export default function ShoppableHero() {
  return <IKVideoPlayer ikOptions={ikOptions} source={source} />;
}

That's the shoppable feature in one config object. Press play and the bar opens on the right side of the player. Each product highlights in turn as playback hits its highlightTime window. Clicking a product pauses the video and navigates to the product page.

Here's what each shoppable option does:

The TypeScript as const annotations on action and startState are intentional. The SDK uses string-literal union types for these options, so the values need to be narrowed. For example 'goto' | 'seek' | 'overlay' | 'switch'.

Choosing the right click-through action

onClick.action controls what happens when a viewer clicks a product in the bar. Four options cover the common patterns:

The example above uses goto for the standard "click product, go to product page" behavior. pause: true pauses the video before navigating so the viewer can resume from where they left off if they come back.

pause also accepts a number. pause: 2 pauses for two seconds, then resumes automatically. Useful when the click triggers an overlay action like "added to cart" and you want playback to continue once the toast fades.

For a more interactive experience, you can combine onHover and onClick. For example, "hover" swaps the product image to an alternate color and "click" navigates:

onHover: {
  action: "switch" as const,
  args: { url: "https://ik.imagekit.io/your-id/field-jacket-olive.jpg" },
},
onClick: {
  action: "goto" as const,
  pause: true,
  args: { url: p.productUrl },
},

Adding clickable hotspots on the video frame

The product bar is one part of the shoppable feature. Hotspots are the other. A hotspot is a clickable marker placed directly on the video frame at a specific timestamp, x/y coordinate, and tooltip position. When a viewer clicks a product in the bar, the video pauses at the hotspot's time and the marker appears on the frame.

This is the difference between "see related products in a sidebar" and "tap the jacket the model is wearing." The interaction maps directly to what the viewer sees on screen.

Update lib/products.ts to add a hotspots array to each product:

// lib/products.ts
export const PRODUCTS = [
  {
    productId: 1,
    productName: "Field Jacket",
    imageUrl: "https://ik.imagekit.io/your-id/field-jacket.jpg?tr=w-200,h-200,fo-auto",
    highlightTime: { start: 0, end: 6 },
    productUrl: "https://atlasgoods.example.com/field-jacket",
    hotspots: [
      {
        time: "00:02",
        x: "42%",
        y: "55%",
        clickUrl: "https://atlasgoods.example.com/field-jacket",
        tooltipPosition: "right",
      },
    ],
  },
  {
    productId: 2,
    productName: "Trail Pack",
    imageUrl: "https://ik.imagekit.io/your-id/trail-pack.jpg?tr=w-200,h-200,fo-auto",
    highlightTime: { start: 5, end: 12 },
    productUrl: "https://atlasgoods.example.com/trail-pack",
    hotspots: [
      {
        time: "00:08",
        x: "60%",
        y: "60%",
        clickUrl: "https://atlasgoods.example.com/trail-pack",
        tooltipPosition: "left",
      },
    ],
  },
  {
    productId: 3,
    productName: "Trail Cap",
    imageUrl: "https://ik.imagekit.io/your-id/trail-cap.jpg?tr=w-200,h-200,fo-auto",
    highlightTime: { start: 11, end: 18 },
    productUrl: "https://atlasgoods.example.com/trail-cap",
    hotspots: [
      {
        time: "00:14",
        x: "50%",
        y: "30%",
        clickUrl: "https://atlasgoods.example.com/trail-cap",
        tooltipPosition: "bottom",
      },
    ],
  },
];

Each hotspot has four key fields:

Pass hotspots through in the player config:

shoppable: {
  products: PRODUCTS.map((p) => ({
    productId: p.productId,
    productName: p.productName,
    imageUrl: p.imageUrl,
    highlightTime: p.highlightTime,
    onClick: {
      action: "goto" as const,
      pause: true,
      args: { url: p.productUrl },
    },
    hotspots: p.hotspots,
  })),
  // ...same options as before
},

That's the full shoppable feature wired up.

Putting it together on a product page

The full page is small. A product header above the player, the shoppable component, and whatever else your product detail page would normally include below.

// app/page.tsx
import ShoppableHero from "@/components/ShoppableHero";

export default function ProductPage() {
  return (
    <main className="max-w-6xl mx-auto px-6 py-10">
      <header className="mb-8">
        <p className="text-sm uppercase tracking-widest text-zinc-500">
          Atlas Goods
        </p>
        <h1 className="text-4xl font-semibold mt-1">Field Jacket</h1>
        <p className="text-zinc-600 mt-2">
          Built for cold mornings and long miles. $248.
        </p>
      </header>

      <ShoppableHero />
    </main>
  );
}

That's the whole tutorial. A working shoppable product page in three files: the player component, the product data, and the page that renders them.

What we built

The page now does what would normally take three or four vendors stitched together. A modern HTML5 video player, a product bar synchronized with playback time, clickable hotspots on the video frame, and a post-play product carousel. All of it from one config object on the source prop.

For the broader picture of what the Video Player SDK supports beyond shoppable, the overview docs cover AI-generated subtitles and chapters, playlists, floating playback, and seek thumbnails, all configurable from the same source config you just used. The full reference for the shoppable options used above lives in the shoppable videos guide.

Sign up for a free ImageKit account and try the shoppable feature on a product video you already have.