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!
SOCIAL SHARE CARD GENERATOR