Chapter 01
The challenge
Years of apps and scripts had made the store slow on mobile, and product bundles the business depended on needed a workaround for every promotion.
Getting from there to a working product was not only a matter of writing code. A few things made this project harder than it first looked:
- Third-party scripts accounted for most of the page weight
- Bundle pricing was held together by theme code nobody wanted to touch
- Marketing needed to launch landing pages without waiting on engineering
- Thousands of indexed URLs had to keep their rankings
Chapter 02
What we did
A custom Next.js storefront on the existing commerce backend, with bundles modelled properly and content editable by the marketing team.
1.Server-rendered storefront
Cached product and collection pages with a script budget enforced in CI, so performance cannot quietly regress.
2.Bundles as first-class data
A bundle model with its own pricing and stock rules, managed from an admin screen instead of theme code.
3.CMS-driven pages
Landing pages assembled by marketing from approved components, with live preview.
4.Careful cutover
Every URL mapped and redirected, structured data carried over and search performance monitored through launch.
Chapter 03
The outcome
Headline result
Faster mobile product and listing pages
- Bundles and promotions configured without developer time
- Search rankings preserved through the migration
Chapter 04
Built with
The tools chosen for this project, each for a reason specific to the problem rather than out of habit.
- Next.js
- TypeScript
- Shopify Storefront API
- Sanity
- Vercel
