turbo-start-shopify

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.

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.

How we use it

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