34% Conversion Increase with Headless Commerce
We re-architected Cartflow's checkout system with a headless Next.js storefront, Redis-based cart persistence, and edge functions for geo-personalized pricing. Their next Black Friday handled 50x normal traffic without a hiccup.
34.2%
Conversion Increase
Overall conversion rate went from 2.4% to 3.22% within 30 days of launch
0.8s
LCP (Mobile)
Down from 4.2 seconds — a 5.25x improvement in largest contentful paint
$183M
GMV Processed (Year 1)
Handled Black Friday 2025 peak of 12,400 concurrent carts with zero downtime
73%
Faster Mobile Page Loads
Total JavaScript reduced from 380KB to 67KB on product pages
The Challenge
What We Were Up Against
Cartflow was running a heavily customized Shopify Plus theme that had been modified by four different agencies over two years. The Liquid template layer had become a performance bottleneck — 47 render-blocking scripts on the product page alone. Their 2024 Black Friday was a disaster: the checkout flow crashed under load, and they estimated $200K in abandoned carts during a 3-hour outage window. Beyond performance, the Shopify theme couldn't support the personalization features their marketing team wanted: geo-based pricing, dynamic bundles, and A/B testable checkout flows.
Checkout Crashes Under Load
Shopify's shared checkout infrastructure was fine, but Cartflow's custom Liquid-based pre-checkout flow (cart drawer, upsells, discount logic) was server-rendering on every interaction and timing out at 800+ concurrent carts.
Mobile Performance
Product pages had a Largest Contentful Paint of 4.2 seconds on mobile. 47 render-blocking scripts from various Shopify apps accumulated over two years. Mobile conversion rate was 1.2% vs 3.8% on desktop.
No Personalization Capability
Marketing wanted geo-based pricing (USD/EUR/GBP with region-specific promotions), dynamic product bundles, and A/B testable checkout flows. None of this was possible with the Liquid theme architecture.
Developer Velocity
Simple copy changes required a theme deploy cycle. The Liquid codebase had no TypeScript, no tests, and no component reuse — every page was a monolithic template.
Constraints & Requirements
Must keep Shopify as the backend for inventory, orders, and fulfillment — switching platforms wasn't an option
Black Friday 2025 was the hard deadline (11 weeks away)
Existing discount codes, gift cards, and loyalty integrations must continue working
SEO rankings couldn't regress — 40% of traffic was organic search
Our Approach
How We Built It
We went headless with Next.js on Vercel, keeping Shopify as the commerce backend via the Storefront API. This gave us full control over the frontend while preserving Shopify's battle-tested inventory, order management, and fulfillment workflows. The key architectural decision was using Vercel Edge Functions for geo-personalization — pricing and promotions are resolved at the edge in < 10ms, before the page even starts rendering.
Discovery & API Mapping
Weeks 1–2Audited all Shopify Storefront API capabilities vs. what the current theme used. Identified 3 features requiring the Admin API (loyalty points, custom metafields, bundle pricing). Mapped all 23 discount code types to ensure compatibility.
Component Library & Design System
Weeks 3–5Built a headless commerce component library in React with Tailwind. Every component was performance-budgeted — no component could add more than 5KB to the JavaScript bundle.
Storefront Build
Weeks 6–9Built the product listing, product detail, collection, cart, and checkout pages. Implemented ISR for product pages (revalidate every 60 seconds) and edge-rendered personalization for pricing.
A/B Testing & Black Friday Prep
Weeks 10–11Set up A/B testing infrastructure using Vercel Edge Config for instant flag propagation. Load tested the checkout flow to 50x normal traffic. Ran the SEO redirect migration.
Key Features
What We Built
Edge-Based Geo-Personalization
Pricing, promotions, and currency are resolved at the CDN edge in under 10ms, delivering a fully localized experience without any client-side loading state.
Technical Detail
Vercel Edge Middleware reads the cf-ipcountry header, looks up the pricing tier from Edge Config (instant reads, no cold start), and injects localized pricing into the server-rendered page. Currency conversion uses daily-updated rates stored in Edge Config. No external API calls on the hot path.
Resilient Cart with Redis Persistence
Carts survive browser refreshes, device switches, and even Shopify API hiccups, with a 72-hour TTL and automatic recovery.
Technical Detail
Cart state is dual-written to both Shopify's cart API and a Redis cluster (Upstash). If Shopify's API is slow or down, the storefront reads from Redis and syncs back when Shopify recovers. This prevented cart loss during a 12-minute Shopify API degradation on launch day.
Performance-Budgeted Component Library
Every component is bundled under a strict 5KB JavaScript budget, with automatic CI checks that fail the build if any component exceeds its budget.
Technical Detail
Custom webpack analyzer plugin runs in CI. Product images use AVIF with WebP fallback and responsive srcset. Below-the-fold components use dynamic imports with Suspense boundaries. Total JavaScript payload for the product page: 67KB (down from 380KB).
Flicker-Free A/B Testing
A/B test variants are assigned at the edge, so users never see a flash of the wrong variant — a common problem with client-side A/B tools.
Technical Detail
Edge Middleware assigns a variant cookie on first visit using a deterministic hash of the visitor ID. Vercel Edge Config stores active experiments and traffic splits. Variant assignment happens before the page renders, eliminating the CLS penalty of client-side tools like Optimizely.
Tech Stack
Why We Chose What We Chose
Frontend
Next.js 14 (App Router)
ISR for product pages, Server Components for zero-JS product listings, Edge Runtime for personalization middleware.
Tailwind CSS
Purged CSS output was 12KB vs 340KB from the previous theme's CSS. Consistent design tokens across all components.
Framer Motion
Micro-interactions on add-to-cart and checkout transitions. Tree-shaken to only import used animation primitives.
Commerce Backend
Shopify Storefront API
Kept Shopify for inventory, orders, and fulfillment. The Storefront API gave us read access without the rate limits of the Admin API.
Shopify Admin API
Used only for 3 features requiring write access: loyalty points, custom metafields, and bundle pricing rules.
Upstash Redis
Serverless Redis for cart persistence. Chose over Vercel KV for lower latency in EU regions where 40% of Cartflow's traffic originates.
Infrastructure
Vercel
Edge Functions + ISR + Image Optimization in one platform. Build times stayed under 90 seconds for 2,400 product pages.
Vercel Edge Config
Instant reads for feature flags and A/B test configuration. No cold starts, no external API calls on the critical path.
Cloudflare Images
AVIF/WebP transformation on the fly. Product images served from 200+ edge PoPs with < 50ms TTFB globally.
Impact
Before & After
Metric
Before
After
Mobile LCP
4.2 seconds
0.8 seconds
Mobile Conversion Rate
1.2%
2.84%
Cart Abandonment
71%
52.3%
JavaScript Bundle (Product Page)
380KB
67KB
Black Friday Downtime
3 hours
0 minutes
Render-Blocking Scripts
47
0
Engineering Quality
How We Ship
Test Coverage
91% on checkout flow, 78% overall with Playwright E2E for critical paths
CI/CD Pipeline
Vercel CI with bundle size checks, Lighthouse CI gates (LCP < 1s required to merge)
Monitoring
Vercel Analytics + Sentry for error tracking with cart-value context on every error
Deploy Frequency
Preview deploys on every PR, production deploys 4x/week
“Last Black Friday cost us $200K in lost sales. This Black Friday, we processed more orders in 4 hours than we used to handle in a week. The edge-based geo-pricing alone increased our EU conversion rate by 22% — customers were finally seeing prices in their currency without a 3-second loading spinner.”
Marcus Webb
VP of Engineering, Cartflow
Ongoing
What's Next
Implementing AI-powered product recommendations based on browsing behavior
Building a loyalty program dashboard with points tracking and reward redemption
Expanding to 12 additional currency/region combinations