<div class="not-prose relative my-12 overflow-hidden rounded-3xl border border-white/10 bg-ink-900/40 p-6 md:p-10 reveal">
<div aria-hidden="true" class="absolute inset-0 opacity-70" style="background: radial-gradient(closest-side at 50% 50%, rgba(110,231,224,0.16), transparent 70%);"></div>
<div class="relative mb-6 flex items-center justify-between">
<div>
<p class="text-xs uppercase tracking-eyebrow text-copper-400">Largest Contentful Paint</p>
<h3 class="mt-1 font-display text-lg text-porcelain-100">From sluggish to sub-second</h3>
</div>
<svg width="36" height="36" viewBox="0 0 36 36" class="float-soft text-copper-400" aria-hidden="true">
<path d="M 18 3 L 12 20 L 18 20 L 15 33 L 26 14 L 20 14 Z" fill="currentColor" opacity="0.85"/>
</svg>
</div>
<div class="relative space-y-5">
<div>
<div class="mb-2 flex items-center justify-between text-xs">
<span class="font-mono uppercase tracking-[0.18em] text-ink-300">Before</span>
<span class="font-display text-2xl text-ink-200">4.3s</span>
</div>
<div class="h-3 w-full overflow-hidden rounded-full bg-white/5">
<div class="bar-fill h-full w-[95%] rounded-full" style="background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.4));"></div>
</div>
</div>
<div>
<div class="mb-2 flex items-center justify-between text-xs">
<span class="font-mono uppercase tracking-[0.18em] text-copper-400">After</span>
<span class="font-display text-3xl text-gradient-copper">1.6s</span>
</div>
<div class="h-3 w-full overflow-hidden rounded-full bg-white/5">
<div class="bar-fill h-full w-[35%] rounded-full" style="background: linear-gradient(90deg, rgba(232,149,74,0.5), rgba(232,149,74,1));"></div>
</div>
</div>
</div>
<div class="relative mt-8 grid grid-cols-3 gap-6 border-t border-white/10 pt-6 text-center">
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">+140%</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-ink-300">Conversion</p>
</div>
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">−62%</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-ink-300">LCP</p>
</div>
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">+38%</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-ink-300">AOV</p>
</div>
</div>
</div>
The challenge
The brand had a cult product and a growing press file — and an online store that couldn't keep up with either. Their Shopify theme had been extended by three different agencies over four years. It worked on desktop, on a good connection, in daylight. It fell apart everywhere else.
The numbers we started with:
- 4.3s LCP on mobile. 2.8s on desktop.
- Conversion rate flat at 1.1% — half the category benchmark.
- A checkout that crashed when the customer applied a discount on 3G.
- A brand story told in "about us" page copy but missing entirely from the shopping flow.
Every agency they had spoken to pitched a 4-month replatform. They didn't have 4 months — they had a spring launch on the calendar.
Our roadmap
<div class="not-prose relative my-12">
<div aria-hidden="true" class="pointer-events-none absolute left-6 right-6 top-[3.5rem] hidden h-px bg-gradient-to-r from-transparent via-copper-500/30 to-transparent md:block"></div>
<div class="relative grid gap-5 md:grid-cols-3">
<article class="reveal group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-ink-800/50 via-ink-900/70 to-ink-950/90 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 0ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">01</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 01</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-ink-300">Week 1</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-porcelain-100">Audit & design sprint</h3>
<p class="relative mt-3 text-sm leading-relaxed text-ink-300">Instrumented the old site, ran a full heuristic pass, designed the new PDP + cart in a 3-day sprint.</p>
</article>
<article class="reveal group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-ink-800/50 via-ink-900/70 to-ink-950/90 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 120ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">02</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 02</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-ink-300">Week 2</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-porcelain-100">Build & migrate</h3>
<p class="relative mt-3 text-sm leading-relaxed text-ink-300">Shipped the Hydrogen storefront, migrated products and content, kept Shopify Checkout untouched to preserve Apple Pay / PayPal.</p>
</article>
<article class="reveal group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-ink-800/50 via-ink-900/70 to-ink-950/90 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 240ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">03</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 03</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-ink-300">Week 3</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-porcelain-100">Launch & optimise</h3>
<p class="relative mt-3 text-sm leading-relaxed text-ink-300">Staged DNS cut-over, live A/B the first week, performance budgets enforced in CI.</p>
</article>
</div>
</div>
How we shipped it
Week 1 — Audit first, opinions later
We instrumented the live store with real user monitoring for 48 hours before touching anything. That surfaced three unglamorous truths:
- 72% of traffic was mobile, but the theme loaded 1.4MB of JavaScript before the first product image.
- A single badge-rendering script was blocking the main thread for 680ms on every page.
- The checkout crash was a Klaviyo snippet silently throwing on slow connections.
With the data in hand, we ran a 3-day design sprint with the founder. We re-designed the product detail page around the thing that actually converted — the photography and the founder's voice — and stripped every module that wasn't earning its page weight.
Week 2 — Hydrogen, but with restraint
We rebuilt the storefront on Shopify Hydrogen (Remix + Oxygen) — React on the edge, with native Shopify APIs and no headless-CMS tax. Key decisions that paid off:
- Left the checkout on Shopify. Apple Pay, PayPal, and the brand's negotiated payment rates all survived untouched. Nobody cares that your homepage is fast if your checkout breaks on launch day.
- Responsive images via Shopify CDN, properly sized, AVIF first, with
loading="lazy"only below the fold. The product hero loads before any JavaScript runs. - No client-side data fetching on PDPs. Product data is rendered server-side in under 50ms. The only JS that ships is the add-to-cart button.
- Klaviyo, re-integrated properly. Deferred, non-blocking, with a local fallback so the checkout never waits on a third party again.
Content migration ran in parallel — we wrote a one-off script to pull products, collections, and metafields into the new storefront's content layer, preserving every URL for SEO.
Week 3 — Launch with a safety net
Go-live was a staged DNS cut-over with a 2% canary for the first three hours. Real user monitoring was live from minute one. We ran a visible A/B against the old store for the first week — same traffic, same campaigns — to measure lift honestly rather than taking credit for seasonal lift.
Performance budgets were baked into CI from day one:
- LCP budget: 1.8s on a simulated 3G mobile connection. PRs that breach it fail the build.
- JavaScript budget: 120KB gzipped on the critical path.
- Third-party tag budget: 5 — anything beyond that needs a written justification in the PR description.
The architecture
Fast, standard, and owned by the client.
- Storefront: Shopify Hydrogen (Remix) deployed on Oxygen — React on the edge.
- Checkout: Native Shopify Checkout — kept intentionally untouched.
- Content: Shopify metafields + Sanity for editorial, with structured content reused across the site.
- Images: Shopify CDN, AVIF + WebP, responsive
srcset, lazy-loaded below the fold. - Analytics: First-party via Shopify + self-hosted Umami for privacy-respecting page analytics.
- Tracking: Meta CAPI and GA4 server-side, never blocking the critical path.
- Performance: Lighthouse + real-user monitoring in CI, enforced budgets that fail the build.
The results
Measured over the 60 days after launch, same traffic sources, same campaigns:
- Conversion rate from 1.1% to 2.64% — a 2.4× lift.
- Mobile LCP from 4.3s to 1.6s — a 62% improvement, comfortably inside Google's "good" threshold.
- Average order value up 38% — the editorial PDP surfaces complementary products the old theme buried.
- Checkout drop-off cut in half — turns out asking your store not to crash on 3G is good for business.
- Core Web Vitals green on 97% of sessions. The old store sat at 41%.
The brand's next campaign launched the following month on the new storefront. It was the first campaign where the site wasn't the bottleneck.
What's next
We're rolling a lightweight subscription flow (Shopify's native one, customised) and a loyalty tier that reuses the same component library. Because the storefront is code the client owns — not a theme marketplace plugin — those additions ship as pull requests, not procurement cycles.
If you're running a storefront that feels slow, looks dated, and makes you apologise to your customers — it doesn't take a four-month replatform to fix. Talk to us. We'll audit it honestly, and if we can't make it meaningfully faster we'll tell you that too.