Back to resources

Playbook

Shopify shoppable video setup guide — 30‑day launch playbook

Step-by-step 30-day playbook to add shoppable video on Shopify for non-technical teams: downloadable PDF with file specs, naming templates, SKU tagging, QA test cases, a day-by-day recording plan, and rollback steps.

Hyper Team
16 min read
Shopify shoppable video setup guide — 30‑day launch playbook

Key takeaways

  • This 30-day playbook gives a prioritized, day-by-day checklist that non-technical teams can execute to prepare catalog data, record video assets to exact file specs, tag SKUs, run QA test cases, and perform a safe launch with rollback steps.

  • Follow the asset naming, file-format, and SKU tagging templates precisely on days 3–10 to avoid upstream QA failures that cause last-minute re-records.

  • The launch runbook (day 29–30) contains explicit verification steps and a single-step rollback you can run without dev support.

  • Download the printable PDF checklist and the pre-filled SKU tag spreadsheet to hand to copy, ops, and creators for immediate work.

As of October 2026

Quick answer: what this playbook gets you and who should run it

If you follow this guide you will have shoppable videos integrated into Shopify, with tagged products, tested widgets on desktop and mobile, and a one-click rollback option if the widget causes a site problem. This is written for non-technical merchants, store managers, and agency project managers who will coordinate product teams, creators, and QA rather than write code.

Why this is practical: it forces early catalog work (titles, SKUs, primary images), gives exact video file specs so creators don’t re-export, and frames QA in user journeys that match how buyers move from ad or landing page to checkout. Use Hyper Shoppable Videos to host and serve the shoppable widgets; the app page documents the in-app tagging UI you’ll use on days 15–21.

What you need at start: admin access to Shopify, a complete product CSV or the product export from Shopify, a short editorial brief for creators, and one person who can run checklist items and communicate with Shopify support or your agency if needed.

30-day prioritized checklist (high level; printable steps)

This is the single most useful sequence: catalog → creative brief & assets → tag mapping → test & QA → launch. Use the downloadable PDF for task assignment and signoffs. The sequence assumes no developer time; if you have a developer, parallelize steps noted as parallel.

Days 1–3: Catalog lock and export

  • Export products via Shopify admin (Products > All products > Export). Save CSV as products-export.csv.

  • Fix required fields: titles, vendor, product type, primary image present, and a single canonical variant SKU for the video tag to reference. If you use variant-level tagging in your store, mark variant_sku in the CSV.

  • Rule: any product that will be tagged in a video must have a descriptive title of 6–12 words and a distinct SKU. If a title contains marketing fluff (sale copy, emojis), replace it with a neutral buyer-facing title.

Days 4–7: Asset spec, naming, and creative brief

  • Deliver to creators the file spec (below) and naming convention. Require a label sheet or on-screen slate for every shot with SKU and scene number.

  • Required files: raw camera master (for archive), web-optimized MP4 for each published clip (see exact settings section), and a 20–60 second cut for each shoppable moment.

Days 8–14: Map tags and prepare SKU tag sheet

Days 15–21: Tagging in the app and staging tests

  • Use Hyper Shoppable Videos to upload the web-optimized MP4s and apply the SKU mapping from the sheet.

  • Publish to a staging page (never live first). Run the test cases below across devices.

Days 22–28: Pre-launch QA, analytics wiring, and merchandising copy

  • Verify that pixel events (AddToCart, ViewContent) fire from the widget. If you don’t manage pixels, confirm that the widget sends product-level events to your analytics person.

  • Write or update product descriptions and FAQs to match the video practices; link to relevant sections using the product’s canonical URL.

Days 29–30: Launch and rollback window

  • Launch on a low-traffic weekday morning. Use the rollback steps in this guide if the widget causes a performance regression.

  • After 72 hours, review the initial analytics metrics described in the metrics resource and decide whether to expand placement.

Exact file specs, naming, and deliverables for creators (copy into briefs)

This section is a binder you can paste into an email to creators. If the creators don’t follow these specs, you will re-export and lose time.

Master file (archive):

  • Format: .mov or .mp4 (H.264 or ProRes), resolution at least 1920×1080, framerate native to camera (commonly 23.976, 24, or 30 fps).

Web-optimized publish file (for upload to the shoppable app):

  • Container: MP4 (H.264)
  • Resolution: 1080p (1920×1080) for product pages; prepare 1080×1920 vertical versions for Stories/TikTok placements if you intend to reuse.
  • Bitrate: 3,000–6,000 kbps for 1080p (VBR). If using ProRes master, export final MP4 at 4,000 kbps as a reasonable balance.
  • Audio: AAC, 128 kbps, 48 kHz.
  • Max file length per published clip: 180 seconds. Break long content into named scenes.

Naming convention (must match tagging sheet):

  • Format: brand_SKU_sceneXX_lengthXXs_v1.mp4
  • Example: acme_ABC123_scene02_25s_v1.mp4

Deliverables checklist per video asset:

  • Master file (archival) stored in your cloud bucket.
  • Web-optimized MP4s named per convention.
  • Image still (1920×1080 JPG) for fallback thumbnail.
  • Scene CSV row: scene_id, filename, sku, variant_sku, start_time, end_time, caption, creator_name.

Why these matter: consistent naming and exact durations make it possible for a non-technical person to tag the product inside Hyper Shoppable Videos without guessing which file matches which SKU.

Tagging templates and SKU governance (how to tag products inside videos)

Conclusion first: always tag by SKU (variant-level when needed) and use a single canonical identifier per on-screen product. Do not tag by title or collection because titles change and collections are not unique.

Template you can paste into a spreadsheet (column order):

  • scene_id | video_filename | sku | variant_sku | start_time (mm:ss) | end_time (mm:ss) | on_screen_label | CTA_text

How to decide sku vs variant_sku

  • If the video calls out color or size attributes and the buyer expects to land on that exact variant, include variant_sku. Example: a jacket in 'Olive, size M' should tag the variant SKU for Olive-M.

  • If the video shows a product without a specific variant (e.g., an accessory shown generically), tag the product-level SKU and ensure the product's default variant maps to a buyable option.

Common mistakes and fixes

  • Mistake: tagging product title instead of SKU. Fix: export the Shopify product CSV and use the SKU column to map.

  • Mistake: multiple SKUs in one scene without scene-level differentiation. Fix: split the clip into shorter scenes and tag each separately using sceneXX naming.

Where to do the tagging

  • Upload your MP4s into Hyper Shoppable Videos. The app UI asks for the SKU or variant SKU when you create a tappable hotspot. Use your prepared CSV so the person doing tagging copies values rather than searching the store manually.

QA test cases and performance checks (do these before any live publish)

Run these tests on a clean browser and on a mobile device. Assign pass/fail and attach screenshots to the checklist.

Functional tests (user journeys):

  • Play from product page: the video should autoplay (if your theme allows) or show the play control; tap a hotspot and it must open the product quick view or product page with the SKU selected.

  • Checkout flow: from the video, add the tagged SKU to cart, go to checkout, and confirm the SKU/variant is present in the order summary.

  • Deep link from ad: a UTM-tagged landing page should load the shoppable video and preserve UTM parameters when the buyer clicks through to product page.

Cross-device and browser tests:

  • Desktop (Chrome latest), Safari latest, Edge latest.

  • Mobile Safari and Chrome on iOS and Android (test the widget inside the store’s mobile theme and in PWA wrappers if present).

Performance checks:

  • Page load: measure First Contentful Paint and Time to Interactive with and without the video widget on a staging page. If the widget adds more than 1.5s to Time to Interactive on desktop or 2.0s on mobile, consider lazy-loading the video until user scroll.

  • Network fallback: verify that if the video fails to load due to network, the thumbnail and CTA still function.

Acceptance criteria (pass rule):

  • All functional tests pass, no JavaScript console errors directly tied to the widget, and analytics events for AddToCart fire with product_id or sku.

Table: priority QA criteria to check before launch

CriterionWhat to checkWhy it matters
Zero-result rateShare of searches returning nothingDirect lost revenue

(Use the table above to add your store-specific metrics. If you track zero-result rate elsewhere, include a column for the shoppable widget search if applicable.)

Launch day runbook and rollback steps

Launch day is Day 29–30 in the checklist. Keep the window narrow and staff the channels below.

Pre-launch: 30 minutes before publish

  • Slack or phone chain ready: store manager, ops lead, analytics owner, and person who prepared the CSV.

  • Snapshot: take a staging page URL and a screenshot of product pages before publish.

  • Analytics: ensure the analytics person can watch live events in Real-Time view.

Publish steps

  1. Move the widget from staging to production via the Hyper Shoppable Videos publish control.

  2. Immediately run the three smoke tests: open product page, click hotspot to add to cart, complete checkout to payment step (cancel before final payment). Confirm SKU in cart.

Rollback (single-step) if anything fails

  • Action: disable the shoppable widget in Hyper Shoppable Videos (toggle OFF) or unpublish the widget from the placement you used.

  • Why this works: [Hyper Shoppable Videos] serves widgets from the app; toggling off removes widget code without a theme edit in most setups. If your store uses a theme-injected script, have the theme editor ID ready to revert to the previous snippet.

Post-launch 24–72 hour checks

  • Monitor 404s and console errors for the first 72 hours. If you see repeated errors tied to the widget, perform the rollback and run a root-cause meeting.

How long does setup take?

Short answer: a focused non-technical team will complete the core setup in 10–14 active working days (catalog prep, asset delivery, and tagging in app), with final QA and launch occupying the remaining days up to 30 for scheduling and signoffs.

Why the range: the biggest time sinks are (1) cleaning product data and (2) re-exporting video assets when creators miss file specs. If you enforce SKU governance and the deliverables checklist on day 1, you compress the timeline to two weeks of active work.

Staffing assumptions and parallelization

  • Single non-technical coordinator: expect 30–60 hours of coordination across 30 days.

  • With an internal media producer and one QA tester: the active work compresses to 10–14 days because asset delivery and tagging can run in parallel.

Decision rule: if you have more than 50 tagged SKUs planned for initial launch, budget developer or agency time to automate the SKU mapping import rather than tagging everything manually inside the app.

Integrations, analytics, and what to measure in first 30 days

Set expectations: the first 30 days are about quality, not scale. Measure these three metrics daily for the first week:

  • Click-to-product rate: percent of video views that produce at least one hotspot click.

  • Add-to-cart rate from video-originated sessions.

  • Error rate: JS exceptions or failed network requests tied to video assets.

Where to find help and reference docs

FAQ

What do I need to prepare before adding shoppable videos to Shopify?

You need: admin access to Shopify, a clean product CSV with SKUs, web-optimized MP4s following the file specs above, and a SKU-to-scene mapping sheet. Prepare a single coordinator to own the checklist and a creator brief with the naming convention so assets arrive ready to tag.

Having these items prevents last-minute rework: if your product titles are inconsistent or SKUs are missing, tagging will be unreliable and QA will fail.

How do I tag products inside videos?

Tag products by SKU (or variant SKU for size/color-specific items) and use a mapping spreadsheet to copy values into the tagging UI in Hyper Shoppable Videos.

Do not tag by title or collection. Use short scenes so each hotspot maps to a single SKU; if a frame shows multiple items, split it into separate scene clips.

How long does setup take?

A non-technical team following this playbook should allow 10–14 active days to complete core setup and up to 30 days including QA, scheduling, and signoffs.

If you already have clean SKUs and a content team that follows the file spec, expect the lower end of that range; missing SKUs and wrong file formats push you toward 30 days.

What if the video widget slows my site or breaks checkout?

If the widget affects performance or causes errors, disable the widget toggle in Hyper Shoppable Videos as the immediate rollback. Then run the performance checks in this guide to identify whether the issue is large file sizes, synchronous loading, or a theme script conflict.

After rollback, re-run the QA test cases on a staging copy before republishing.

Can I reuse TikTok or Instagram videos for Shopify?

Yes, but re-export to the web-optimized MP4 specs above and create a landscape 1080p version for product pages; vertical masters can be uploaded separately for social placements. Always re-check duration, crop, and on-screen labels to match the naming convention.

Where can I get the printable 30-day PDF checklist?

Download the PDF and spreadsheet templates from the Shopify Shoppable Video Setup Checklist for Non-Technical Merchants. The PDF includes an editable sign-off column and the scene mapping CSV you can upload into Hyper Shoppable Videos.

Next steps and resources to hand to teams

  • Immediately: export products, assign the coordinator, and send creators the asset spec and naming convention (copy the section "Exact file specs" above into your brief).

  • Within 24 hours: create the SKU mapping sheet and pre-fill the first five videos so tagging can be a copy/paste exercise.

  • Before any upload: open a free trial of Hyper Shoppable Videos to confirm the app's tagging UI and publish controls; this avoids surprises on days 15–21.

Related reading and tools on NiagaraT

If you want the printed 30-day plan, downloadable CSV templates, and the pre-filled tagging spreadsheet, click the primary CTA and get the PDF checklist to hand to your creators and QA team.

Popular with readers

Popular with Shopify teams

View all resources
How to Filter Shopify Products by Metafield
Shopify Search & Filters8 min

How to Filter Shopify Products by Metafield

Learn how to create Shopify metafield filters for products, variants, collections, and search results, with setup steps and troubleshooting fixes.