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.

Vercel prompts for the two required Shopify credentials before the first deployment.

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 Hydrogen 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