Shopify Online Store with Next.js

Vercel Shop

A Next.js storefront template and reference architecture for Shopify, built with Next.js 16, React 19, Tailwind CSS 4, and the Shopify Storefront API.

See vercel.shop for full documentation.

Getting Started

1. Scaffold a new project using the CLI:

1
npx create-vercel-shop@latest my-store

The scaffold also installs these project-scoped agent plugins:

• vercel-shop
• vercel-plugin
• shopify-ai-toolkit

To install only the agent plugins into an existing project, run this from that project's root:

1
npx create-vercel-shop@latest --no-template

1. In Shopify admin, create a storefront token in Settings → Apps and sales channels → Headless, enable the required Storefront API permissions, then add your Shopify credentials:

1
cp .env.example .env.local

1
SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
2
SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-token
3
NEXT_PUBLIC_SITE_NAME="Your Store Name"

1. Start the development server with the same package manager you used to scaffold the project:

1
pnpm dev
2
npm run dev
3
yarn dev
4
bun dev

See vercel.shop/docs/getting-started for the full setup guide and Storefront API Permissions for the complete scope reference.

Features

• Next.js 16 App Router with React 19 and React Compiler
• Shopify Storefront API via GraphQL with type-safe operations
• Customer authentication with better-auth and Shopify Customer Account API OIDC — opt-in via env vars
• Tailwind CSS 4 and shadcn/ui components
• Internationalization-ready with next-intl
• AI-ready with Vercel AI SDK integration
• Optimized cart with server actions and instant cache invalidation
• SEO with structured data and dynamic metadata

Skills

Vercel Shop includes a vercel-shop plugin with skills for extending the storefront with common commerce patterns. In Claude Code, these are exposed as /vercel-shop:<skill> commands:

Documentation

Full documentation is available at vercel.shop.

License

MIT