Shoppable video
Shoppable video lets viewers buy products shown on screen without leaving the video, by tapping a product tag, card or link timed to the moment the item appears. Technically, it is a video stream plus a timeline of product cues: timestamps paired with product IDs, delivered as a sidecar file or as timed metadata inside the stream. The player reads the cues against the playhead, draws the overlay, and hands each tap to the store's product page or cart. It works for on-demand clips, vertical feeds and live shopping streams.
How does shoppable video work?
A shoppable video has four moving parts. The video itself is encoded and streamed like any other, ideally as adaptive HLS so it starts quickly on a phone. The product timeline lists which products appear and when, for example a jacket from 0:12 to 0:20, keyed to IDs in the store's catalogue.
The player integration listens to the playhead. When the current time enters a cue, it shows a card or hotspot over the video, using a custom overlay layer that does not cover the player's own controls. A tap opens a product sheet, adds to the cart through the store's API or deep links to checkout, often while the video pauses or shrinks to picture-in-picture.
Events close the loop: impression of each card, taps, add-to-cart and the playback position at each one, sent to analytics so watching can be joined with orders.
How are products synced to a shoppable video timeline?
For on-demand clips, the common approach is a sidecar file: a JSON document of product cues served beside the video and matched to the playhead in the player. It is easy to edit after publishing, so a sold-out product can be swapped without touching the video.
The other approach puts cues inside the stream as timed metadata. In HLS that means ID3 tags in the segments or EXT-X-DATERANGE tags in the playlist; in DASH it means event messages. In-band cues stay in sync even when the player seeks or switches renditions, and they travel with the stream into any player that reads them.
Live shopping needs in-band cues or a real-time push channel, because the host decides on air when a product appears. Stream latency then matters: if the stream runs well behind the host, the card has to wait for the moment to reach the viewer.
Shoppable video vs. live shopping
On-demand shoppable video and live shopping share the overlay and the cart, but stress different parts of the stack. On-demand clips are about startup and feed behaviour. A product demo on a product page or in a vertical feed is often watched for a few seconds, so the first frame must arrive quickly, the next clip should be preloaded, and posters or thumbnails fill the screen before playback.
Live shopping is about latency and scale. A host holding up a product and announcing that only a few are left only works if viewers see it within seconds, so live shopping streams use low-latency formats such as LL-HLS, and product cues are pushed at the moment the host shows the item. Drops create a flash crowd at the start time. After the stream ends, the recording becomes an on-demand shoppable video, with the cues kept at the same timestamps.
What makes shoppable video play well on mobile?
Most shoppable viewing happens on phones, often on mobile networks, so the video has to start before the viewer scrolls past. That rules out large progressive MP4 files with one bitrate. Adaptive HLS with a low rung lets the player start fast and step up when the network allows.
Layout matters as much as bitrate. Feeds are vertical, so content should be shot or reframed to 9:16 and played full-bleed, with the product card placed where it does not hide the product. Tap targets on overlays need to stay clear of the player's own gestures, such as tap-to-pause and swipe-to-next.
Shoppable pages often hold many videos, so lazy-loading players, preloading only the next clip and showing a static poster first keep page weight down. Measuring startup time and exits before start on each device shows whether those choices are working.
How does FastPix handle shoppable video?
FastPix covers the video and the player overlay of shoppable video. It does not hold a cart or take payment: checkout and payment still happen on your own store.
The FastPix web player has two shoppable themes. The shoppable-video-player theme adds a product sidebar, catalogue browsing and timeline-aware product activations; your app passes the product data in through addShoppableData(). The shoppable-shorts theme is mobile-first and features a single product, set through a product-link attribute. Both support clickable products, hotspots and calls to action that hand the viewer to your store.
On-demand clips upload through resumable SDKs for web, iOS, Android and Flutter, get a per-title ladder and stream as adaptive HLS and DASH across 300+ points of presence. FastPix thumbnails and GIF previews work as posters on product pages. The player supports full-bleed 9:16 playback with swipe-to-next, tap-to-pause and double-tap-to-skip, with every control themeable through CSS variables.
For live shopping, the iOS and Android live SDKs go live from a phone camera, the stream is delivered as LL-HLS at 4 to 7 seconds, and auto_archive turns each drop into an on-demand video with the same playback ID.
In-video AI returns one timestamped JSON with the transcript, people and brands, scenes and on-screen text, a starting point for finding when a product appears. Video Data takes a shopper ID as the viewer ID and up to 10 custom dimensions such as campaign or product, and exports events to your warehouse to join with orders.
Standard encoding is free up to 4K, storage is billed per rendition-minute and streaming per minute watched. The free plan, with no card, covers 10 videos and 30 live minutes.
