Skip to content



turbo-start-shopify

Our open-source headless Shopify starter: Shopify + Sanity + Next.js with visual editing and a type-safe Storefront API.

entry 06 of 15 · starter · updated 2026-10-07



What it is

turbo-start-shopify is the starting point for stores that have outgrown a theme. It puts a Next.js 16 front end in front of Shopify, with Sanity Studio v5 handling the editorial content the Shopify admin was never designed for, and a type-safe Storefront API layer connecting the two.

Three systems that are often bolted together awkwardly are set up here to work as a single project: commerce data from Shopify, editorial content from Sanity, and a React front end that renders both. Visual editing works across the Sanity-managed pages, and the Storefront API integration covers products, collections, cart, and checkout.

It is the template behind our headless Shopify development work, open-sourced so you can see exactly how the pieces fit together.

What you get

  • Products, collections, cart, and checkout wired to the Shopify Storefront API 2025-01.
  • Sanity Studio v5 with a page builder for marketing and content pages, visual editing, and live preview.
  • Auto-generated Sanity TypeScript types and Zod environment validation so type errors surface before deployment.
  • Tailwind CSS v4 with OKLCH color tokens, dark mode, and Shadcn UI components.
  • Dynamic OG images, sitemaps, JSON-LD structured data, and automatic redirects when a slug changes.
  • Seed and verify scripts for the Shopify side: pnpm seed:shopify populates a dev store with demo products and pnpm verify:shopify reports on the connection health.
  • Turborepo monorepo with React Compiler and Turbopack for fast local development, plus a GitHub Action that deploys a preview Studio for every pull request.

How to use it

Initialize a new project with the Sanity CLI. It scaffolds the monorepo and connects to both your Sanity account and your Shopify store credentials.

bash
npx create-sanity@latest -- --template robotostudio/turbo-start-shopify

Add your Shopify Storefront API token and Sanity project ID to the environment variables, then run pnpm dev to get the front end on port 3000 and the Studio on port 3333. You'll need Node 22 or later. There's a live demo at turbo-start-shopify-web.vercel.app (opens in new tab).

How we use it

It is the starting point for our headless Shopify engagements. Slingshot Bio is one project that shipped on this stack.



Projects already using this



Common questions

FAQs

What people ask before picking up turbo-start-shopify

When is headless Shopify worth it over a theme?
When the store has outgrown what a theme can express. This template exists for exactly that case: Next.js in front of Shopify, with Sanity handling the editorial content the Shopify admin was never designed for.
Which parts does Shopify still own?
Commerce data: products, collections, cart and checkout, through the Storefront API 2025-01. Sanity owns the marketing and content pages with a page builder, visual editing and live preview. The front end renders both.
How do I get it running?
Scaffold with 'npx create-sanity@latest -- --template robotostudio/turbo-start-shopify', add your Shopify Storefront API token and Sanity project ID to the environment, then 'pnpm dev'. You need Node 22 or later. There is a live demo at turbo-start-shopify-web.vercel.app.
Can I test it without a real store full of products?
Yes. 'pnpm seed:shopify' populates a dev store with demo products and 'pnpm verify:shopify' reports on the connection health, so you can confirm the wiring before any real catalogue exists.
Has anything shipped on this?
Yes. Slingshot Bio is a live build on this stack, converging a WordPress marketing site and a separate Shopify store into one headless platform.


Get in touch

Tell us what you're building. We reply within one working day. Jono or someone on the team picks up every message personally.

By sending this you agree to our privacy policy. We only use your details to reply.