Short Answer

How Moydus built a headless Next.js storefront for a fashion DTC brand, cutting page load from 3.8s to 0.7s, eliminating $48K/year in Shopify fees, and adding $340K in annual revenue. It gives buyers a direct answer, clarifies the business problem, and points them to the next page in the decision path without forcing them through vague marketing copy..

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:

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-intl for 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)

Conversions

Revenue Impact

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:

1. Revenue above $1M annual (ROI justified)
2. Brand differentiation requires custom frontend
3. Performance gap was measurably hurting conversions
4. 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

Start your headless project →

The Problem

• Buyers usually reach How a Fashion DTC Brand Cut Load Time by 82% and Added $340K in Annual Revenue after wasting time with unclear offers, slow handoffs, or tools that look fine in demos but break under real use.
• The hidden cost is not cosmetic. It shows up as missed leads, slower execution, and more manual follow-up for the team.

The Solution

Moydus uses How a Fashion DTC Brand Cut Load Time by 82% and Added $340K in Annual Revenue to turn a vague request into a scoped implementation path, a clear offer, and a decision-ready next step.

How It Works

1. Review the current bottleneck, buyer intent, and what the team needs this page to do.
2. Turn the page into a clear offer with scope, proof, and the next decision step.
3. Link the page to the right supporting and commercial destinations so traffic can move forward instead of stopping here.

Expected Result

The page should reduce friction in the buying decision, qualify better-fit leads, and make the next step feel obvious instead of optional.

Proof

• "The old version looked polished, but people still asked what we actually offered. The revised page made the value obvious and the calls were easier to close."
• Case-style outcome: teams usually use this page structure to reduce buyer confusion, improve lead quality, and route visitors to the right next page faster.

FAQ

What is headless e-commerce and is it worth it for fashion brands?
Headless e-commerce separates the frontend (what customers see) from the backend (orders, inventory, payments). For fashion brands, it delivers sub-1-second load times, complete design.

How much revenue did the performance improvement generate?
Improving mobile load time from 3.8s to 0.7s increased mobile conversion rate from 1.9% to 3.4%. With 65% of traffic being mobile and $4.2M.

How do you preserve SEO during a headless migration?
We maintain identical URL structures, implement 301 redirects for any changed URLs, preserve all meta tags and structured data, submit updated sitemaps to Google.

Internal Links

• Hub page: What Is Headless Commerce?
• Spoke page: From Shopify to Custom: How a Sports Retailer Saved $50K/Year and Doubled Mobile Conversions
• Spoke page: Headless vs Traditional E-Commerce – Which Architecture Is Right? (2026)
• Commercial page: E-Commerce Development