How We Built Shoppable Video Feeds for Shopify with Remix and React

SwipeReel — Wed, 11 Mar 2026 13:00:09 +0000

We recently launched SwipeReel — a Shopify app that turns Instagram Reels and TikTok videos into shoppable video feeds embedded directly in online stores. Here's a look at how we built it and the technical decisions behind it.

The Problem

Shopify merchants spend hours creating video content for Instagram and TikTok, but that content lives and dies on social platforms. There was no easy way to repurpose those videos as shoppable experiences on their own store — without hiring a developer or dealing with complex embed code.

Tech Stack

We chose Remix 2.16 (with Vite) as our framework, paired with:

React 18 + Shopify Polaris 13 for the admin UI
MongoDB (Mongoose 8) for video metadata and feed configurations
Google Cloud Run for hosting
Shopify App Bridge for seamless embedded admin experience

Why Remix?

Remix gave us server-side rendering, nested routing, and great data loading patterns out of the box. Since Shopify's app framework already uses Remix as the default template, it was a natural fit. The loader/action pattern keeps our data fetching clean and colocated with routes.

Key Technical Challenges

1. Video Import Pipeline

We built a one-click import flow for Meta (Instagram/Facebook) videos. The OAuth flow connects the merchant's account, and we sync their Reels and video posts. Each video gets:

Metadata extraction (thumbnail, duration, dimensions)
Cloud storage via Shopify's Files API
Product tagging with tap-to-buy overlays

2. Multiple Layout Modes

We support 4 layout types, each with different rendering strategies:

Stories — vertical swipe, TikTok-style fullscreen player
Carousel — horizontal scroll using Embla Carousel
Inline Feed — grid layout embedded in page sections
Overlay Popup — floating button that opens a modal player

Each layout is delivered as a Shopify Theme App Extension block, so merchants drag-and-drop it into their theme — zero code needed.

3. Performance

Video is inherently heavy, so we implemented:

Lazy loading — videos only load when they enter the viewport
Poster images — static thumbnails until the user interacts
Preload metadata — preload="metadata" to get duration/dimensions without downloading the full video
Intersection Observer — pause videos when they scroll out of view

The result: near-zero impact on Lighthouse scores.

4. Analytics

We built a lightweight analytics system that tracks:

Video views and watch time
Product click-through rates
Add-to-cart events from video overlays
Per-feed and per-video breakdowns

All events are batched and sent via navigator.sendBeacon() to avoid blocking the main thread.

What's Next

We're working on TikTok direct import, A/B testing for feed layouts, and AI-powered product tagging suggestions. If you're building Shopify apps with Remix, happy to chat about our experience.

Check it out: SwipeReel on Shopify App Store | Website

Have you built shoppable video experiences? What challenges did you run into? Let's discuss in the comments!

Forem: SwipeReel