NextShopSanity

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.

Features

• 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 /studio with 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

Tech Stack

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)

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• A Sanity account (free tier available)
• A Shopify store with Storefront API access (optional)

1. Clone and install

git clone https://github.com/your-username/nextshopsanity.git
cd nextshopsanity
pnpm install

2. Configure environment variables

cp .env.example .env.local

Fill 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"

3. Seed sample content (optional)

pnpm seed

This imports sample content (pages, blog posts, settings) into your Sanity dataset.

4. Run the development server

pnpm dev

Open http://localhost:3000 for the storefront and http://localhost:3000/studio for the Sanity Studio.

Shopify Setup

Shopify integration is optional. Without it, product and collection pages display content from Sanity only.

To connect Shopify:

1. Create a Storefront API access token in your Shopify admin
2. Add the credentials to .env.local
3. Products and collections will automatically sync

Sanity Studio

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

Content Types

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

Project Structure

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

Deployment

Vercel (recommended)

1. Push your repository to GitHub
2. Import the project in Vercel
3. Add your environment variables in the Vercel dashboard
4. Deploy

Sanity Studio

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

License

MIT