Puffy Headless Commerce Migration

Context

Puffy is a $100M+ direct-to-consumer mattress and bedding brand running its flagship storefront on Shopify with a custom Liquid theme. By 2024, the theme was hitting structural limits: page speed and Core Web Vitals were soft, the team was hitting walls on what Liquid could support compared to a modern framework, and deeper customisation work cost disproportionate engineering effort.

Our engineering lead proposed migrating to a headless setup on Next.js + Vercel, with Shopify retained purely as the commerce backend (products, inventory, checkout). I sponsored the project and led delivery.

Why Next.js + Vercel

This was a deliberate two-part bet:

1. Best-in-class for the problem.Vercel's runtime (ISR, edge caching, image optimisation) is built for what we needed — fast pages, predictable performance, and a stack that doesn't fight us when we want to ship something the Liquid theme couldn't.
2. A capability investment in the engineering team. Our head of engineering specifically wanted the team to learn a modern frontend framework — not because they were behind, but because getting good at Next.js makes them better engineers overall. The migration was the vehicle.

Worth naming because the easy choice would've been Shopify's own Hydrogen (less risk, less learning). We chose the harder option intentionally.

The Biggest Risk

The headline risks were the usual ones — SEO regression, third-party Shopify apps that lived in Liquid templates, payment funnel integrity. We had plans for all three.

The risk we actually lost sleep over was integrating with the Shopify Storefront API for live product and inventory data. PDP and cart behaviour both depend on data that's accurate, fast, and consistent with the checkout — and we didn't fully know which edge cases would surface only under production traffic. A bad cart or wrong stock count is a direct conversion killer; getting this wrong would erase the speed gains overnight.

We de-risked it by building the PDP and cart against the Storefront API early, in isolation, before committing to the full migration.

The Phased Rollout — and the Lesson

We ran a phased migration: main pages (home, PDP, cart, key landing pages) shipped first, with everything else continuing to render from the Liquid theme behind the same domain. Vercel handled routing.

This is an MVP and prioritisation story, not a “we made a mistake” story. The instinct to ship complete-and-perfect is the wrong instinct when the value distribution is skewed.

Team & Delivery

• 5–6 internal engineers (no agency)
• ~2 months from kickoff to phase-1 cutover
• Zero post-launch incidents on the migrated pages
• My role: sponsor, delivery lead, cross-functional coordination with marketing/CRO, scope and phase decisions, stakeholder management with leadership

What It Unlocked

The migration was foundation work. It paid off in four ways:

• Performance. Meaningfully faster page loads, especially on mobile (where most of our traffic lives).
• Velocity. Marketing/CRO collaboration in 2023–2024 had already driven a 20% YoY revenue lift on the Liquid site — the headless foundation made the next round of that work easier and faster to ship, without the Liquid ceiling.
• Resilience.Less dependence on Shopify's frontend stability. Vercel's uptime and edge network are more predictable than a Shopify theme during peak events.
• Team capability. The engineering team came out of the project genuinely fluent in modern frontend.

What I'd Do Differently

Honestly — very little on the structural decisions. The phased approach was right; the stack choice was right; the team scope was right.

The thing I'd push harder on next time is baselining Core Web Vitals before the project startsso we have a defensible before/after delta. We shipped speed improvements that I can describe directionally but can't quote as a clean number — which weakens the story externally even when the impact was real.