ShopifyHeadlessNext.js
Vellum (2026)
A headless Shopify storefront rebuilt on Hydrogen and Next.js — keeping Shopify's admin while delivering sub-second loads and a higher-converting mobile experience.
Vellum — hero mockup
— The Challenge
What needed
solving.
Vellum's Liquid theme had grown into a tangle of apps, and the storefront was slow — especially on mobile, where most of their sales happened.
They wanted the speed and flexibility of a headless build without losing the parts of Shopify their team relied on every day.
— The Approach
How I
built it.
I rebuilt the storefront headless on Shopify's Hydrogen and Next.js, keeping Shopify as the commerce backend and admin while moving the front end to a fast, cached, edge-rendered layer.
A custom cart and checkout, aggressive image optimisation and a lean component library brought mobile load times under a second.
— Process
How the work got done.
Lighthouse audit
01
Audit & performance budget
Profiling the existing theme to find exactly what was dragging load times down.
Architecture diagram
02
Headless architecture
Wiring Shopify's Storefront API to a Next.js front end running on the edge.
Storefront UI
03
Storefront & cart build
Building product, collection and a custom cart and checkout flow.
Launch checklist
04
Migration & launch
Content migration, redirects, QA and a zero-downtime cutover.
— Selected Screens
A closer look.
Home
Collection
Product detail
Cart drawer
Checkout
Search
— Outcomes
The work moved the numbers.
−58%
page load time
+24%
mobile conversion
98
Lighthouse performance
0
downtime at launch
Measured against the previous Liquid theme over the first month post-launch.
— Next Project