Aperture Goods
DTC apparel · 8-figure run-rate
Replatformed a script-bloated Shopify theme to Hydrogen on a written perf budget
Move a slow, theme-bloated Shopify storefront to a fast Hydrogen build.
A growing DTC brand was throttled by a heavy Shopify theme with too many third-party scripts. Mobile LCP was over 4 seconds. We replatformed to Shopify Hydrogen on Vercel, kept the merchandising team's daily workflow intact, and aggressively trimmed the script payload.
New · DTC E-commerce
Shopify Hydrogen replatform.
Move a slow, theme-bloated Shopify storefront to a fast Hydrogen build.
Sample mockup · illustrative only
- Industry
- DTC E-commerce
- Timeline
- 5 weeks
- Team
- 3
- Service
- Web
- Project tier
- Marketing Site / $7,995 (extended scope)
The Problem
What was broken.
The brand's existing Shopify theme had been customized by three agencies in four years. Mobile LCP was 4.1s, INP was visibly janky on PDPs, and the merchandising team's content edits required a developer to push code more often than not. Cart abandonment was rising in step with page weight.
Our Approach
How we framed it.
Replatformed to Hydrogen + Vercel. Kept Shopify as the source of truth for products, inventory, checkout. Moved editorial blocks (hero, lookbook, story pages) into Sanity so the merch team could ship without engineering. Audited every third-party script — kept the ones that drove revenue (Klaviyo, reviews), deferred the rest behind interaction.
Capability proof
What this case demonstrates.
This case makes the hidden work visible: strategy, architecture, delivery control, quality evidence, and handoff.
01 / Product judgment
Problem framed before UI
The brand's existing Shopify theme had been customized by three agencies in four years. Mobile LCP was 4.1s, INP was visibly janky on PDPs, and the merchandising team's content edits required a developer to push code more often than not. Cart abandonment was rising in step with page weight.
02 / Technical depth
7 stack decisions
Shopify Hydrogen, Remix, Vercel, Tailwind v4, Sanity (editorial CMS), Klaviyo
03 / Delivery discipline
4 delivery checkpoints
Audit + perf budget / Hydrogen scaffold + Sanity schema / PDP / PLP / cart parity
04 / Handoff quality
5 shipped artifacts
Hydrogen storefront on Vercel with Cloudflare in front / Sanity schema + studio deploy for the editorial team / PDP, PLP, cart, account, story-page templates at parity
Production artifacts
Inspect the work behind the visible result.
Each case exposes the surfaces, systems, evidence, and handoff package that make the shipped product usable after launch.
Experience layer
Buyer or user surface
Custom Hydrogen theme on Vercel. Editorial team self-serves hero/lookbook updates via Sanity. Revenue-driving scripts kept; everything else deferred behind interaction. Lighthouse CI gates every PR against the agreed budget.
Proof 01
Move a slow, theme-bloated Shopify storefront to a fast Hydrogen build.
Proof 02
Lighthouse and WebPageTest snapshots of every template. Wrote a one-page perf budget the team agreed to.
Proof 03
Hydrogen storefront on Vercel with Cloudflare in front
Production signals
Instrumented
Events and funnels named before handoff.
Risk-aware
Security and compliance boundaries named.
Release-ready
Deployment or store-release path included.
Handoff-ready
Owner can keep operating after delivery.
Before / after · product UI mockup
Industry · DTC E-commerce
Before:Default Shopify theme. Multi-second LCP on mobile, no post-purchase upsells, no SMS cart-recovery, single-page checkout flow.
After:Custom Hydrogen theme on Vercel. Editorial team self-serves hero/lookbook updates via Sanity. Revenue-driving scripts kept; everything else deferred behind interaction. Lighthouse CI gates every PR against the agreed budget.
How the engagement ran.
- 01Week 1
Audit + perf budget
Lighthouse and WebPageTest snapshots of every template. Wrote a one-page perf budget the team agreed to.
- 02Week 2
Hydrogen scaffold + Sanity schema
Stood up the Hydrogen project, modeled editorial content in Sanity, gave the merch team a sandbox.
- 03Week 3-4
PDP / PLP / cart parity
Rebuilt the three highest-traffic templates with parity to existing UX. Side-by-side QA against the live site.
- 04Week 5
Cutover + redirect map
DNS cutover behind Cloudflare with a comprehensive 301 map. Watched search console and Klaviyo for 10 days.
- 1
Week 1
Audit + perf budget
Lighthouse and WebPageTest snapshots of every template. Wrote a one-page perf budget the team agreed to.
- 2
Week 2
Hydrogen scaffold + Sanity schema
Stood up the Hydrogen project, modeled editorial content in Sanity, gave the merch team a sandbox.
- 3
Week 3-4
PDP / PLP / cart parity
Rebuilt the three highest-traffic templates with parity to existing UX. Side-by-side QA against the live site.
- 4
Week 5
Cutover + redirect map
DNS cutover behind Cloudflare with a comprehensive 301 map. Watched search console and Klaviyo for 10 days.
Deliverables
What we shipped.
- ✓Hydrogen storefront on Vercel with Cloudflare in front
- ✓Sanity schema + studio deploy for the editorial team
- ✓PDP, PLP, cart, account, story-page templates at parity
- ✓301 redirect map covering every legacy URL
- ✓Perf budget + Lighthouse CI on every PR
Outcomes.
engagement targetsGoal: mobile LCP under 1.5s on a throttled 4G profile
Goal: INP comfortably in the green on PDP and PLP
Plan: editorial team self-serves all hero / story / lookbook updates
Plan: klaviyo and review-widget tags retained — everything else deferred
Plan: cart-to-checkout flow unchanged for shoppers (no UX surprise)
Honest challenges
What we got wrong (or almost wrong).
The pretty version of any case study skips this part. We don't.
- 01
One legacy app (subscriptions) didn't have a Hydrogen-friendly SDK; wrote a thin REST wrapper and contributed it back to the brand's repo.
- 02
Image CDN swap broke a few hand-edited product photos — added a fallback resolver that gracefully falls through to the original Shopify CDN.
- 03
Klaviyo segment events were tightly coupled to old DOM — re-wired to data-layer events instead, gave the marketing team a sturdier hook.
In our own words
A perf budget is a cultural artifact more than a technical one. Once the merch and engineering team both agreed in writing on what the storefront was allowed to weigh, every ‘can we just add this script' conversation got 10x easier.
From the Hayaiti team
Engineering · design · security
Technical blueprint
How the work holds together.
Buyers should see that the visual layer is backed by architecture, quality gates, and operational ownership.
Experience
1Application
2Data
3Operations
4Security
5Stack used
7 technologiesRelated
Other cases like this.
Northwind Studios
Onboarding rebuild · Series A SaaS
Cut signup-to-aha-moment from 9 minutes to under 90 seconds.
HealthcareHelix Health
HIPAA-ready intake portal
Replace clipboard intake with a 7-minute, accessible, HIPAA-ready web flow.
Climate / ESGSentinel Operating
Scope 1-2-3 emissions dashboard
Produce defensible Scope 1-2-3 emissions reports without an army of consultants.
Want a case study like this?
Want this level of production quality on your project?
Send a short brief and we'll reply with scope, timeline, price direction, and the first technical recommendation.