A modern e-commerce template built with Next.js 16, Sanity CMS, and Shopify Storefront API. Features a visual page builder, blog system, full cart integration, and more.
- Visual Page Builder — Compose pages with drag-and-drop modules (hero, product grid, image gallery, callout, newsletter, rich text)
- Shopify Integration — Products, collections, variants, and a full cart experience via Hydrogen React
- Blog System — Posts with authors, categories, and featured images
- Embedded Sanity Studio — Content editing at
/studiowith custom structure, draft mode, and live preview - Tailwind CSS 4 — Utility-first styling with dark mode support
- SEO Optimized — Dynamic metadata, Open Graph images, sitemap generation, and CMS-powered redirects
- Analytics Ready — Google Analytics and Facebook Pixel integration
- Gracefully Optional — Shopify, analytics, and CMS content all degrade gracefully when not configured
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| CMS | Sanity v5 (embedded studio) |
| Commerce | Shopify Storefront API + Hydrogen React |
| Styling | Tailwind CSS 4 |
| UI Components | Radix UI (shadcn/ui) |
| State | Zustand |
| Animations | Framer Motion |
| Language | TypeScript (strict) |
- Node.js 18+
- pnpm (recommended) or npm
- A Sanity account (free tier available)
- A Shopify store with Storefront API access (optional)
git clone https://github.com/your-username/nextshopsanity.git
cd nextshopsanity
pnpm installcp .env.example .env.localFill in your Sanity credentials (required):
NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id"NEXT_PUBLIC_SANITY_DATASET="production"SANITY_API_READ_TOKEN="your-read-token"Shopify credentials are optional — the store works without them:
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN="your-store.myshopify.com"NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN="your-token"pnpm seedThis imports sample content (pages, blog posts, settings) into your Sanity dataset.
pnpm devOpen http://localhost:3000 for the storefront and http://localhost:3000/studio for the Sanity Studio.
Shopify integration is optional. Without it, product and collection pages display content from Sanity only.
To connect Shopify:
- Create a Storefront API access token in your Shopify admin
- Add the credentials to
.env.local - Products and collections will automatically sync
The embedded studio is available at /studio and includes:
- Custom structure — Organized sidebar with singletons (Home, Settings) and document lists
- Page builder — Visual modules for composing flexible page layouts
- Draft mode — Preview unpublished changes with the Presentation tool
- Vision — Test GROQ queries directly in the studio
| Type | Description |
|---|---|
| Home (singleton) | Homepage with page builder modules |
| Settings (singleton) | Site title, navigation, footer, analytics |
| Page | Dynamic pages with page builder and SEO |
| Product | Products with Shopify sync + editorial content |
| Collection | Collections with Shopify sync |
| Post | Blog posts with author, categories, featured image |
| Author | Blog authors with bio and avatar |
| Category | Blog categories |
| Color Theme | Reusable color schemes for products |
| Redirect | CMS-managed URL redirects |
src/
├── app/
│ ├── layout.tsx # Root layout (fonts, theme)
│ ├── globals.css # Tailwind CSS + custom properties
│ ├── (store)/ # Storefront route group
│ │ ├── layout.tsx # Store layout (nav, footer, cart)
│ │ ├── page.tsx # Home page
│ │ ├── products/ # Product pages
│ │ ├── collections/ # Collection pages
│ │ ├── blog/ # Blog pages
│ │ └── [slug]/ # Dynamic CMS pages
│ ├── (studio)/ # Studio route group
│ │ └── studio/[[...tool]]/ # Sanity Studio
│ └── api/ # API routes (draft mode)
├── components/
│ ├── modules/ # Page builder modules
│ ├── ui/ # Radix UI components
│ ├── navigation.tsx # Header with mobile menu
│ ├── footer.tsx # Footer
│ ├── cart-drawer.tsx # Cart sidebar
│ └── ...
├── lib/
│ ├── shopify/client.ts # Shopify Storefront API
│ ├── store.ts # Zustand UI state
│ └── utils.ts # Helpers
├── sanity/
│ ├── schemaTypes/ # Content schemas
│ │ ├── documents/ # Document types
│ │ ├── singletons/ # Singleton types
│ │ └── objects/ # Object types + modules
│ ├── lib/ # Client, queries, image URL builder
│ └── structure.ts # Studio sidebar config
└── middleware.ts # CMS-powered redirects
- Push your repository to GitHub
- Import the project in Vercel
- Add your environment variables in the Vercel dashboard
- Deploy
The studio is deployed with your Next.js app at /studio. No separate deployment needed.
To deploy the schema to Sanity's cloud (for API access):
pnpm sanity:deploy