Headless Commerce Storefront on Next.js & Shopify

The situation

Many retailers start on a Shopify theme and add apps for reviews, bundles, filters and pop-ups as they grow. Each app injects its own scripts, and over time product pages become heavy and slow on mobile. Content changes need someone who knows Liquid, and search struggles once the catalog reaches thousands of variants. The team knows a rebuild would help, but a previous redesign dropped rankings for months, so nobody wants to risk it again.

Our approach

1. Audit before we build

We start with a two-to-three-week audit. Our SEO team crawls the current site, exports every indexed URL from Search Console and analytics, and flags the pages that drive organic revenue. In parallel, engineers profile Core Web Vitals on real devices and list every installed app, deciding which ones to replace with native code, which to keep through their APIs and which to drop. The result is a URL inventory, a performance budget and a scope that everyone agrees on.

2. Keep Shopify for what it does well

Shopify stays the system of record for products, inventory, pricing, customers and orders. The Next.js storefront reads catalog data through the Storefront API over GraphQL, builds carts through the Cart API and hands off to Shopify’s hosted checkout. That keeps payments, taxes and order processing on a platform the business already trusts, and avoids rebuilding checkout from scratch.

3. Give content its own home

Editorial content, landing pages, lookbooks and navigation move to a headless CMS such as Sanity. Our designers build a library of page sections that editors assemble visually, with live previews of unpublished changes. Product references in the CMS point to Shopify handles, so a campaign page always shows current prices and stock.

4. Cache at the edge, revalidate on change

Pages are rendered with React Server Components and cached at the edge with incremental static regeneration. When a product, price or CMS entry changes, a webhook triggers on-demand revalidation for only the affected pages. Shoppers get static-page speed with near-real-time data. Images are resized and served in modern formats, fonts are self-hosted and third-party scripts load after interaction, so the performance budget holds as the site grows.

5. Make search a merchandising tool

Products sync to Algolia with variants, attributes and inventory. Search handles typos, synonyms and faceted filtering, and the ecommerce team manages boosting, pinned results and seasonal rules from a dashboard without engineering help. Collection pages use the same index for filtering and sorting, which keeps listing pages fast even for large catalogs. Search analytics show which queries return nothing, so the team can add synonyms, fix product data or spot demand for items the store does not carry yet.

6. Migrate without losing rankings

Every legacy URL gets a mapped destination and a permanent redirect, served at the edge. Structured data for products, breadcrumbs and reviews is generated from the same data that renders the page. Canonical tags, XML sitemaps and hreflang are tested in CI, along with Lighthouse budgets and Playwright checks on the purchase path.

How we deliver it

We launch in stages. Content pages and blog go first, then collections, then product pages, with the old theme serving remaining routes until each section is ready. After cutover we monitor crawl errors, indexing and rankings daily for several weeks and fix issues quickly. Because each section switches over separately, a problem affects only part of the site and can be rolled back by changing a routing rule. Learn more about our SEO services and how we plan migrations.

Is this relevant to you?

If your storefront is slow, your marketing team waits on developers and a replatform feels too risky, this approach is a good fit. See our web design service or talk to us about your store.