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

Install Tolstoy from the Shopify App Store
Go to Tolstoy → Videos → Upload and upload your product videos or import from TikTok/Instagram
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
Go to Tolstoy → Widgets → Floating Button to add a shoppable video bubble to product pages (appears in the lower corner, auto-plays)
Go to Tolstoy → Widgets → Video Carousel to add a horizontal scroll of shoppable videos above the product description
In Shopify Theme Editor: search for "Tolstoy" in the app sections list and drag the widget to the desired position
Go to Tolstoy → Analytics to track play rate, add-to-cart rate, and revenue attributed to each video

Shopify with YouTube Shopping

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

WooCommerce

For shoppable video carousels: install VideoSuite or WP Video Popup from the WordPress plugin directory, then use shortcodes to embed videos on product pages
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)
For native live shopping: use TikTok for WooCommerce plugin and run TikTok LIVE events (see @tiktok-shop-integration for setup)
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

For YouTube Shopping: go to BigCommerce Admin → Channel Manager → Google & Meta and connect Google Merchant Center; then enable YouTube Shopping in YouTube Studio
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)
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:

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

Instagram Live Shopping:

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

On-site LIVE with Firework:

Sign up for Firework and install the embed script on your storefront
Go to Firework → Live Events → Schedule and create a new live event
Connect your product catalog in Firework → Catalog → Import (supports Shopify, WooCommerce, and custom feeds)
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

Metric	Where to Find
Video play rate	Tolstoy Analytics / Firework Dashboard
Hotspot click-through rate	Tolstoy Analytics → Interactions
Add-to-cart from video	Tolstoy / Firework → Conversions
Revenue attributed to video	Tolstoy → Revenue (uses UTM attribution)
LIVE shopping orders	TikTok Seller Center → Analytics / Firework → Live Reports

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

Problem	Solution
Hotspot position drifts on mobile	Use percentage-based positioning (% from top-left), not pixel coordinates — percentages scale with the video element
Live stream delay causes product reveal mismatch	Use low-latency RTMP settings in OBS (5s latency) or enable WHIP for sub-second latency
Video not loading on iOS Safari	Ensure videos use H.264 codec and AAC audio; VP9 is not universally supported on iOS
Tolstoy video slowing page load	Tolstoy lazy-loads by default — ensure you are using the Tolstoy Shopify app block, not a custom embed that bypasses their performance optimizations
LIVE shopping products not showing	Products must be in Active status before the event; for TikTok, review takes 24–48 hours — activate products the day before

Related Skills

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

video-commerce-integration