video-commerce-integration

What this skill does

# Video Commerce Integration

## Overview

Video commerce transforms passive video content into direct purchase experiences by embedding product links, interactive hotspots, and one-click checkout into video players and live streams. Shoppable video on-site increases product page conversion by up to 40% compared to static image PDPs. Live shopping events — popularized by TikTok and Instagram LIVE — create urgency and interactivity that no static page can replicate. Dedicated video commerce platforms (Tolstoy, Videowise, Firework) handle the embedding, hotspot authoring, and analytics without custom development for most stores.

## When to Use This Skill

- When wanting to add shoppable product hotspots to existing on-site video content
- When planning live shopping events for product launches or flash sales
- When TikTok Shop or Instagram Shopping LIVE is too limiting and you need a native on-site experience
- When UGC video content needs to be shoppable on product pages
- When measuring the contribution of video content to purchase conversion rates

## Core Instructions

### Step 1: Choose the right video commerce platform

| Platform | Best For | Shopify | WooCommerce | BigCommerce | Price |
|----------|---------|---------|-------------|-------------|-------|
| **Tolstoy** | Shoppable video stories and feeds, Shopify-native | App Store | Via JS embed | Via JS embed | Free tier; $19+/mo |
| **Videowise** | High-performance shoppable video with LCP optimization | App Store | — | — | $99+/mo |
| **Firework** | Enterprise live shopping + shoppable short video | Via JS | Via JS | Via JS | Custom pricing |
| **YouTube Shopping** | Link YouTube videos to product catalog | Google & YouTube channel | Via Google Listings & Ads plugin | Via Channel Manager | Free |
| **TikTok Shop** | Native TikTok LIVE shopping + video product tags | TikTok channel | TikTok plugin | Via TikTok channel | Free (commission-based) |

**Recommendation:** Use **Tolstoy** for Shopify if your goal is shoppable video stories and product page embeds — it requires no code and integrates with your Shopify catalog automatically. Use **YouTube Shopping** if you already have a YouTube channel with product review or tutorial content. For enterprise live shopping experiences, use **Firework**.

### Step 2: Set up shoppable video on your store

---

#### Shopify with Tolstoy

1. Install **Tolstoy** from the Shopify App Store
2. Go to **Tolstoy → Videos → Upload** and upload your product videos or import from TikTok/Instagram
3. In the video editor, click **Tag Products** → search your Shopify catalog → click the point in the video where the product appears to set the hotspot timestamp
4. Go to **Tolstoy → Widgets → Floating Button** to add a shoppable video bubble to product pages (appears in the lower corner, auto-plays)
5. Go to **Tolstoy → Widgets → Video Carousel** to add a horizontal scroll of shoppable videos above the product description
6. In Shopify Theme Editor: search for "Tolstoy" in the app sections list and drag the widget to the desired position
7. Go to **Tolstoy → Analytics** to track play rate, add-to-cart rate, and revenue attributed to each video

---

#### Shopify with YouTube Shopping

1. Go to **Shopify Admin → Sales Channels → + → Google & YouTube**
2. Connect your Google Merchant Center and YouTube channel
3. Under **YouTube Shopping**, enable product tagging for your videos
4. In YouTube Studio, go to **Shopping** and link your Merchant Center account
5. Edit any YouTube video → click **Products** → search your catalog → tag the product
6. Tagged products appear as a product shelf below your YouTube video and as clickable overlays during playback

---

#### WooCommerce

1. For shoppable video carousels: install **VideoSuite** or **WP Video Popup** from the WordPress plugin directory, then use shortcodes to embed videos on product pages
2. For YouTube Shopping integration: install **Google Listings & Ads** plugin (official Google plugin) → connect your Google Merchant Center → enable product tagging in YouTube Studio (same process as above)
3. For native live shopping: use **TikTok for WooCommerce** plugin and run TikTok LIVE events (see @tiktok-shop-integration for setup)
4. For a full shoppable video experience without custom code: use **Firework** via their JavaScript embed — add the embed script to your WooCommerce theme's `functions.php` via `wp_enqueue_script()`

---

#### BigCommerce

1. For YouTube Shopping: go to **BigCommerce Admin → Channel Manager → Google & Meta** and connect Google Merchant Center; then enable YouTube Shopping in YouTube Studio
2. For shoppable video widgets: add the **Tolstoy** or **Firework** JavaScript snippet via **BigCommerce → Storefront → Script Manager** (Scripts section → Create Script → All pages or specific page)
3. Configure product tagging from within the Tolstoy or Firework dashboard — both platforms connect to your BigCommerce catalog via API credentials generated in **BigCommerce → Advanced Settings → API Accounts**

---

#### Custom / Headless

For headless stores, build shoppable video with a custom player component and product hotspot overlay:

```typescript
interface VideoHotspot {
  id:              string;
  productId:       string;
  timestamp:       number;     // seconds into video when hotspot appears
  displayDuration: number;     // how long it stays visible (seconds)
  position:        { x: number; y: number };  // % from top-left (0–100)
}

interface ShoppableVideo {
  id:           string;
  videoUrl:     string;        // HLS (.m3u8) or MP4 URL from CDN
  thumbnailUrl: string;
  hotspots:     VideoHotspot[];
  type:         'recorded' | 'live';
}
```

```typescript
// React shoppable video player with time-based hotspot detection
import { useRef, useState, useEffect } from 'react';

function ShoppableVideoPlayer({ video }: { video: ShoppableVideo }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [activeHotspot, setActiveHotspot] = useState<VideoHotspot | null>(null);
  const [hotspotProduct, setHotspotProduct] = useState<Product | null>(null);

  useEffect(() => {
    const el = videoRef.current;
    if (!el) return;

    const onTimeUpdate = () => {
      const t = el.currentTime;
      const active = video.hotspots.find(h =>
        t >= h.timestamp && t <= h.timestamp + h.displayDuration
      ) ?? null;

      if (active?.id !== activeHotspot?.id) {
        setActiveHotspot(active);
        if (active) {
          fetch(`/api/products/${active.productId}`)
            .then(r => r.json())
            .then(setHotspotProduct);
        } else {
          setHotspotProduct(null);
        }
      }
    };

    el.addEventListener('timeupdate', onTimeUpdate);
    return () => el.removeEventListener('timeupdate', onTimeUpdate);
  }, [video.hotspots, activeHotspot]);

  return (
    <div style={{ position: 'relative' }}>
      <video ref={videoRef} src={video.videoUrl} poster={video.thumbnailUrl}
             controls playsInline style={{ width: '100%' }} />
      {activeHotspot && hotspotProduct && (
        <div style={{
          position: 'absolute',
          left: `${activeHotspot.position.x}%`,
          top: `${activeHotspot.position.y}%`,
          transform: 'translate(-50%, -100%)',
          background: 'white',
          padding: '12px',
          borderRadius: '8px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
          zIndex: 10,
          minWidth: '200px',
        }}>
          <p style={{ fontWeight: 600 }}>{hotspotProduct.name}</p>
          <p style={{ color: '#666' }}>${hotspotProduct.price.toFixed(2)}</p>
          <button onClick={() => addToCart(hotspotProduct.id)}>Add to cart</button>
        </div>
      )}
    </div>
  );
}
```

For LIVE shopping, use Mux for HLS stream creation and WebSockets to push the currently featured product to all viewers:

```typescript
async function createLiveShoppingEvent(title: string, productIds: string[]) {
  const stream = a