ShopGrid — Headless Commerce
Headless storefront and admin that cut page loads by 60% and lifted conversion 23% for a multi-brand retailer.
- Timeline
- 9 months, brand by brand
- Team
- 3 frontend · 2 backend · 1 designer · 1 DevOps
- Scope
- 6 storefronts + shared admin
- Approach
- Incremental, no big-bang cutover
Six brands, one ageing monolith, and a conversion rate that had been flat for two years. Everyone knew the platform was the problem. Nobody wanted to be the one who broke checkout.
- Sector
- Multi-brand retail
- Region
- Latin America
- Engagement
- Replatform + design system
Every brand ran on the same monolithic platform with theme overrides stacked on theme overrides. A change to one storefront could surface somewhere else, so nothing shipped without a full manual regression pass. Deploys happened roughly monthly, at night, with the team on standby.
Performance was the visible symptom. Time to first byte was measured in seconds because every page assembled itself from a chatty ORM on request. On mobile — the majority of their traffic — pages felt broken before they finished loading, and the analytics showed exactly what you would expect at the top of the funnel.
The real risk was not technical, it was commercial. A replatform that takes the store down, or quietly loses SEO rankings on category pages that have been indexed for a decade, costs more than the slow site did. So a clean-slate rebuild with a launch-day switch was off the table.
How the work was actually sequenced
Strangle the monolith, one route at a time
We put the new Next.js storefront in front of the old platform and moved routes across in order of risk: content pages first, then category, then product, then checkout last. At every point traffic could be routed back to the monolith per-route, so a problem was a config change rather than a rollback.
A commerce API layer the brands could share
Catalogue, pricing, inventory and cart moved behind a typed API with brand as a first-class parameter, instead of six divergent forks of the same logic. That is what made the shared admin possible — one place to manage products across all six storefronts.
Rendering strategy chosen per page type
Category and product pages are statically generated and revalidated on stock and price changes, which is where the 60% came from — most requests never touch application code. Cart and checkout stay dynamic. Canonical URLs and redirects were mapped one-to-one from the old site before any route moved, so rankings carried over.
A design system, so six brands stopped diverging
One component library, themed per brand with tokens rather than forked templates. A change to the product card ships to all six at once. Containerised builds and preview deploys per pull request meant the merchandising team could review a real storefront instead of a screenshot.
Migrating to a headless stack sounded risky, but their team de-risked every step. Page loads dropped 60% and conversion jumped. Real business impact.
Frontend
- Next.js
- TypeScript
- Tailwind CSS
- Design system
Backend
- Node.js
- PostgreSQL
- Redis
- Typed commerce API
Infrastructure
- Docker
- CI/CD
- Preview deploys
- CDN + edge cache
Vantage — Support AI Assistant
AI · Automation
Got something like this in mind?
Tell us what you're building. We'll come back within one business day with a clear plan and an honest estimate.