Headless Fashion: From 3.8s to 0.7s, +$340K Annual Revenue
Industry: Fashion & Apparel (DTC) Annual Revenue at Start: $4.2M Platform Before: Shopify Advanced Platform After: Next.js headless + Shopify backend (Storefront API) Project Duration: 12 weeks Team: 1 architect, 2 frontend developers, 1 backend developer
The Brand and the Problem
A sustainable fashion DTC brand — $4.2M annual revenue, 65% mobile traffic, known for editorial-quality product photography and a strong brand voice.
Their problem wasn't operational. Shopify handled orders fine. The problem was competitive.
The performance gap was costing them:
- Mobile LCP: 3.8 seconds (industry standard: under 2.5s for "good")
- Mobile conversion rate: 1.9%
- Desktop conversion rate: 3.4%
- Gap: desktop converts at 79% higher rate
That 1.5-point mobile conversion gap isn't normal. Industry parity is usually within 30-40%. The gap was performance — mobile shoppers were hitting slow pages and leaving.
The design constraint:
Their creative director had a lookbook concept that needed CSS animations, full-screen video backgrounds, and a custom product carousel that Shopify's Liquid theme system couldn't support without extreme performance penalties. Every theme modification made the site heavier.
The fee reality:
At $4.2M revenue and ~35% international (non-Shopify Payments) orders: $1.47M × 0.5% = $7,350/month in transaction fees. $88,200/year. Moving to headless with Shopify backend preserves Shopify Payments but captures the international transaction savings.
Architecture Decision: Headless Shopify vs Full Custom
We evaluated three options:
Option A: Headless Shopify (Next.js frontend + Shopify Storefront API backend)
- Preserves Shopify admin (team knows it)
- Shopify Payments still works → eliminates international transaction fees
- Faster build (no backend engineering)
- Cost: $18,000
Option B: Full custom (Next.js + custom commerce engine)
- Maximum control
- Eliminates all platform fees
- 2x longer build time
- Cost: $32,000
Option C: Shopify with performance optimization (stay on platform)
- Headless-adjacent (Shopify Hydrogen)
- Still requires significant engineering
- Less design freedom than true headless
- Cost: $12,000
We chose Option A. The brand needed design freedom and performance. They didn't need to replace Shopify's operational layer — it was working well. Headless Shopify delivered the frontend benefits without the backend rebuild cost.
What We Built
Rendering Strategy
Different content types need different rendering approaches:
| Page Type | Strategy | Why | Result |
|---|---|---|---|
| Product pages | ISR (5min revalidation) | High traffic, semi-static | 0.4s LCP |
| Collection pages | ISR (30min) | Changes less often | 0.3s LCP |
| Lookbook pages | Static | Editorial, changes per season | 0.2s LCP |
| Cart / checkout | Client-side via Shopify | Personalized, must be Shopify | Instant |
| Search results | SSR | Real-time query | 0.9s |
Product Page Architecture
The product page was the highest-priority engineering effort. It's where 60% of the mobile conversion gap existed.
Previous (Shopify Liquid) structure:
- 47 JavaScript files loaded on page
- Images: JPEG, not WebP, not optimized for viewport
- Largest Contentful Paint element: main product image at 3.8s
- Layout Shift: 0.41 CLS (poor)
New (Next.js) structure:
- Critical CSS inlined, non-critical deferred
- Images: Next.js Image component (WebP, AVIF, responsive sizes)
- Product image preloaded with
<link rel="preload"> - No layout shift (reserved space for all elements)
- LCP: 0.4s
The Lookbook Experience
The creative director's vision: a full-screen editorial experience where you scroll through campaign imagery and can add products to cart without leaving the editorial flow.
This required:
- Intersection Observer API for scroll-triggered animations
- Framer Motion for smooth transitions
- Shopify Storefront API cart mutation (add to cart without page reload)
- Mobile-optimized touch gestures
Performance discipline: Every animation is GPU-accelerated (transform, opacity). No layout-triggering animations. Result: 60fps on mid-range Android devices.
International Handling
65% of traffic is mobile. 35% of revenue is international. The new architecture handles both:
- Currency detection: Shopify Markets for pricing,
next-intlfor formatting - Shipping estimates: Real-time DHL/FedEx API integration on product page
- Tax compliance: Shopify's built-in tax engine (preserved from headless)
The Migration: 12 Weeks
Weeks 1-2: Audit and content strategy
- Performance audit of every template (product, collection, cart, blog)
- Image audit: 4,200 product images needed WebP conversion
- SEO audit: URL structure, canonical tags, structured data mapping
Weeks 3-5: Core templates
- Product page (highest priority)
- Collection page
- Cart integration (Shopify Storefront API)
Weeks 6-8: Brand pages
- Lookbook experience
- About and sustainability pages (high SEO value)
- Blog (migrated from Shopify Blog to headless Sanity CMS)
Weeks 9-10: Search and discovery
- Shopify Predictive Search integration
- Custom filter UI (replaces third-party app)
Week 11-12: QA, performance, and cutover
- Mobile device testing (real devices, not emulator)
- Core Web Vitals verification in Chrome UX report
- DNS cutover with monitoring
Results
Performance (Mobile)
| Metric | Before | After | Change |
|---|---|---|---|
| LCP | 3.8s | 0.7s | -82% |
| FID | 420ms | 38ms | -91% |
| CLS | 0.41 | 0.06 | -85% |
| Lighthouse (mobile) | 51 | 94 | +43pts |
| Lighthouse (desktop) | 72 | 98 | +26pts |
Conversions
| Metric | Before | After | Change |
|---|---|---|---|
| Mobile conversion rate | 1.9% | 3.4% | +79% |
| Desktop conversion rate | 3.4% | 4.1% | +21% |
| Mobile/Desktop parity | 56% | 83% | Closed gap |
| Cart abandonment (mobile) | 78% | 61% | -17pts |
| Time on site (mobile) | 1:42 | 2:58 | +74% |
Revenue Impact
| Source | Calculation | Annual Impact |
|---|---|---|
| Mobile conversion lift | $4.2M × 65% mobile × 1.5% lift | +$491,400 |
| Desktop conversion lift | $4.2M × 35% desktop × 0.7% lift | +$103,740 |
| Transaction fee savings | $1.47M intl × 0.5% fee eliminated | +$88,200 |
| Estimated total uplift | +$683,340 |
Note: Revenue attribution modeling. Actual results may vary — multiple factors affect conversion rate. We used a 90-day post-launch comparison with year-over-year adjustment for seasonality.
What We Got Wrong
Image optimization took longer than planned.
4,200 product images needed to be processed, WebP-converted, and re-uploaded to Shopify's CDN. We estimated 3 days. It took 8 days because:
- Shopify's bulk upload API has rate limits
- Some source images were too low resolution (needed re-sourcing from brand)
- WebP conversion pipeline needed debugging for PNG images with transparency
AVIF browser support was overstated.
We shipped AVIF images for Chrome users (85%+ support). Fallback to WebP for Safari. This added complexity but delivered additional 12-15% file size reduction for Chrome users.
The Ongoing Relationship
Post-launch, we handle:
- Monthly performance monitoring (Lighthouse CI on every deploy)
- A/B testing infrastructure (Vercel Edge Middleware for experimentation)
- New collection launches (lookbook templates, seasonal campaigns)
- Quarterly technical SEO audits
The creative director now ships new editorial pages without developer involvement — the Sanity CMS integration gives them that autonomy.
Should You Go Headless?
Headless is right for this brand because:
- Revenue above $1M annual (ROI justified)
- Brand differentiation requires custom frontend
- Performance gap was measurably hurting conversions
- Creative team needs editorial flexibility
Headless is wrong if:
- You're under $500K annual revenue
- Standard product display is sufficient
- You need fast launch over perfect experience
Explore further:
- Headless vs Traditional E-Commerce — full architecture comparison
- Fashion E-Commerce Showcase — more fashion examples
- E-Commerce Cost Estimator — 3-year cost model