Migrated a 200k-SKU Shopify store to a headless Next.js + custom checkout stack, cutting page load by 73% and boosting conversion.
A D2C fashion brand with 200k+ SKUs was losing customers to a slow Shopify storefront. Core Web Vitals were in the red, mobile conversion was 1.4%, and the checkout flow had 7 steps. The brand needed a faster experience without losing the Shopify backend they depended on for inventory and order management.
Decoupled the frontend from Shopify entirely using the Storefront API. Built a Next.js App Router storefront with ISR for product pages (revalidation every 5 min), a custom 3-step checkout backed by Stripe, and a Redis-powered cart that survives session loss. Shopify remains the source of truth for inventory and fulfilment.
LCP dropped from 4.8s to 1.3s. Conversion rate increased from 1.4% to 1.71% (+22%). The new checkout has a 31% lower abandonment rate. All 200k+ SKUs migrated with zero inventory discrepancies.
TECHNICAL DEPTH
Product pages use Next.js ISR with a 5-minute revalidation window. High-velocity SKUs (top 1k by traffic) are pre-generated at build time. Search uses client-side fetching against a deduplicated Algolia index synced from Shopify webhooks.
3-step checkout: Address → Shipping → Payment. Each step is an independent route with state persisted to Redis (7-day TTL). Stripe Elements for card input. Apple Pay and Google Pay enabled via the Payment Request API. Cart recovery emails trigger on step 1 abandonment.
All 200k+ product records migrated via a custom ETL script that reconciled Shopify's metafields, variant options, and media assets. Migration ran in parallel across 8 workers in 4 hours with zero downtime using Shopify API rate-limit awareness.