Video Commerce Integration

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

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:

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';
}

// 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:

async function createLiveShoppingEvent(title: string, productIds: string[]) {
  const stream = await muxClient.Video.LiveStreams.create({
    playback_policy: 'public',
    new_asset_settings: { playback_policy: 'public' },
  });

  return db.liveShoppingEvents.create({
    title,
    streamKey:        stream.stream_key,   // configure in OBS/Restream
    playbackUrl:      `https://stream.mux.com/${stream.playback_ids[0].id}.m3u8`,
    featuredProducts: productIds,
    status:           'scheduled',
  });
}

// Broadcast the currently featured product to all live viewers
async function featureProductInLive(eventId: string, productId: string) {
  const product = await db.products.findById(productId);
  await wsServer.broadcast(`live:${eventId}`, {
    type:    'feature-product',
    product: { id: product.id, name: product.name, price: product.price,
               imageUrl: product.images[0]?.url },
  });
}

Step 3: Run a live shopping event (platform-native)

For stores already using TikTok Shop or Instagram Shopping, native LIVE is the lowest-friction path:

TikTok LIVE Shopping: 1. Ensure all products you plan to feature are in Active status in TikTok Seller Center (review takes 24–48 hours) 2. Open the TikTok app → tap + → Go LIVE → tap the shopping cart icon → select products to feature 3. During the LIVE, pin and unpin products in real time — viewers tap the pinned product card to purchase without leaving the app 4. See @tiktok-shop-integration for full TikTok Shop setup

Instagram Live Shopping: 1. Connect your Meta product catalog via the Facebook & Instagram channel (see @social-commerce) 2. Open Instagram → create a LIVE → tap the shopping bag icon → add products from your catalog 3. Tag products during the LIVE; they appear as tappable links for viewers

On-site LIVE with Firework: 1. Sign up for Firework and install the embed script on your storefront 2. Go to Firework → Live Events → Schedule and create a new live event 3. Connect your product catalog in Firework → Catalog → Import (supports Shopify, WooCommerce, and custom feeds) 4. During the event, host controls the product spotlight from the Firework producer dashboard — viewers see the featured product card on your site in real time

Step 4: Measure video commerce performance

Best Practices

• Trigger hotspots 1–2 seconds after a product appears on screen — premature hotspots feel random; delayed ones feel responsive and contextual
• Keep hotspot cards compact — a card covering more than 20% of the video frame reduces watch time; use a minimal 200×120px card with product name, price, and add-to-cart
• Pre-load product data for all hotspots on video load — avoids API latency mid-playback; fetch all hotspot products in one batch request when the video player initializes
• Use HLS for all video delivery — adaptive bitrate streaming ensures smooth playback across all network conditions; upload MP4 source files and transcode to HLS via Mux or Cloudflare Stream
• Run LIVE events at consistent times — Tuesday/Thursday evenings at 7pm in your primary timezone builds a returning audience; ad hoc live events get low attendance
• Keep live shopping events under 60 minutes — attention drops sharply after 30–45 minutes; plan your product lineup and demo order in advance

Common Pitfalls

Related Skills

• @tiktok-shop-integration
• @tiktok-ads-integration
• @ugc-campaign-management
• @product-launch-campaigns
• @social-commerce

Live Shopping Event Platform Backend

Problem/Feature Description

A fashion retailer wants to launch weekly live shopping events where hosts showcase new collections in real time. Viewers watch the live stream and see featured products highlighted on screen the moment the host calls them out — with one click to add to cart. The business expects 2,000–5,000 concurrent viewers per event and has had WebSocket infrastructure fall over in the past when serving at scale.

The engineering team needs a backend implementation plan and working code stubs for the live shopping system. They need guidance on the streaming infrastructure choices (they currently use Mux but are open to alternatives), how to fan out product featuring events to all viewers in real time, and how to ensure the system holds up under load. The team also wants documentation on event scheduling best practices to maximize attendance.

Your task is to write a TypeScript implementation of the live shopping backend, including the event creation flow, the host-side product featuring function, and the viewer-side WebSocket client component. Write an architecture.md document explaining the infrastructure choices you recommend, particularly for WebSocket scaling and live stream latency.

Output Specification

• live-shopping-backend.ts — TypeScript implementation covering:
• createLiveShoppingEvent() function
• featureProductInLive() function
• Data model interfaces for the live event
• live-viewer-client.tsx — React component for the viewer side receiving real-time product features
• architecture.md — Document covering streaming infrastructure choice, WebSocket scaling approach, latency recommendations, and event scheduling guidance

Shoppable Video Player Component

Problem/Feature Description

A beauty brand has 15 product demo videos hosted on their e-commerce site, but customers keep dropping off to search for products mentioned in the videos. The marketing team wants to keep customers engaged by surfacing the exact product being shown at any given moment — directly overlaid on the video — so viewers can add it to their cart without leaving the player.

The team has noticed that on mobile, pixel-based overlays are breaking layout because the video renders at different sizes across devices. They also have concerns about lag: when a hotspot appears, there's a noticeable delay while the app fetches the product data, causing the card to pop in visibly late after the relevant product has already left the frame.

Your task is to design and implement a ShoppableVideoPlayer React component in TypeScript that solves these problems. Use the provided sample data to demonstrate the component working correctly. Write the implementation to shoppable-player.tsx, and include a brief notes.md explaining the key design decisions you made.

Output Specification

• shoppable-player.tsx — TypeScript React component implementing the shoppable video player with hotspot overlays
• notes.md — A short document (bullet points are fine) explaining the key technical decisions in your implementation, particularly around hotspot display timing and product data loading strategy

Input Files

The following data is provided for use in your implementation. Extract the files before beginning.

=============== FILE: inputs/sample-video.json =============== { "id": "vid-001", "title": "Summer Skincare Routine", "videoUrl": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", "thumbnailUrl": "https://example.com/thumbnails/vid-001.jpg", "duration": 180, "type": "recorded", "status": "published", "products": [ { "productId": "prod-sunscreen", "featuredAt": 12 }, { "productId": "prod-moisturizer", "featuredAt": 45 }, { "productId": "prod-serum", "featuredAt": 90 } ], "hotspots": [ { "id": "hs-1", "videoId": "vid-001", "productId": "prod-sunscreen", "timestamp": 13, "displayDuration": 8, "position": { "x": 70, "y": 15 } }, { "id": "hs-2", "videoId": "vid-001", "productId": "prod-moisturizer", "timestamp": 46, "displayDuration": 10, "position": { "x": 20, "y": 60 } }, { "id": "hs-3", "videoId": "vid-001", "productId": "prod-serum", "timestamp": 91, "displayDuration": 12, "position": { "x": 55, "y": 30 } } ], "createdAt": "2026-01-15T09:00:00Z" }

=============== FILE: inputs/sample-products.json =============== [ { "id": "prod-sunscreen", "name": "SPF 50 Daily Shield", "price": 28.00, "images": [{ "url": "https://example.com/images/sunscreen.jpg" }] }, { "id": "prod-moisturizer", "name": "Hydra-Boost Moisturizer", "price": 42.00, "images": [{ "url": "https://example.com/images/moisturizer.jpg" }] }, { "id": "prod-serum", "name": "Vitamin C Brightening Serum", "price": 65.00, "images": [{ "url": "https://example.com/images/serum.jpg" }] } ]

Video Commerce Analytics Dashboard and Embed Compatibility

Problem/Feature Description

A home goods retailer has been running shoppable videos on their product pages for three months. The head of e-commerce wants a report on which videos are actually driving purchases — not just views — and needs a reusable analytics function that the data team can call per-video. They also discovered a bug: customers using the embedded player on their blog (hosted on a separate subdomain) can't complete add-to-cart actions because of browser security errors. A few product managers using iPhones have also complained that videos won't load at all.

The engineering team needs to address all three issues: build the analytics function, fix the cart integration in the embedded player, and document the video encoding requirements to prevent the iOS playback problem from happening again. Write a brief technical report (technical-report.md) documenting the root causes and fixes for the embedded player cart failures and the iOS loading problem, and implement the analytics function in video-analytics.ts.

Output Specification

• video-analytics.ts — TypeScript implementation of a getVideoCommerceMetrics(videoId: string) function that returns video commerce KPIs
• technical-report.md — A concise technical document covering:
• Root cause and fix for the add-to-cart failures in the embedded player
• Root cause and fix for videos not loading on iOS devices
• Recommended video encoding settings going forward