Shopify Online Store with Next.js

Vercel Shop

Agent-ready commerce, powered by Shopify, Next, and Eve.

• Shopify owns commerce. Catalog, cart, checkout, customer accounts, predictive search, and policies come from Shopify through the framework-agnostic Hydrogen SDK (not the Hydrogen React Router framework).
• Next.js owns the app. Routing, Server Components, caching and invalidation, metadata, and the storefront's machine-readable surface for answer engines: Markdown representations, /llms.txt, structured data, and the sitemap.
• Eve owns the agent. Shop Agent's sessions, tools, and connections; its tools call Shopify directly.

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
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
2
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-token

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

Shopify

• Product, collection, search, blog, page, and policy content from the Storefront API with validated, typed GraphQL
• Optimistic cart with Hydrogen forms, shared cart state, and server handlers
• Customer accounts through the Customer Account API, opt-in
• Shopify analytics, consent, and WebMCP tool registration, opt-in

Next.js

• Next.js 16 App Router, React 19, React Compiler, Tailwind CSS 4, shadcn/ui
• Partial prerendering with tagged caches invalidated by Shopify webhooks
• Markdown representations, /llms.txt, Schema.org data, sitemap, and robots for answer engines
• Single-locale storefront by default; skills add next-intl and Shopify Markets

Eve

• Shop Agent for product discovery, store questions, and cart updates in a side drawer, opt-in
• Shopify catalog and policy MCP connections plus Hydrogen cart handlers

Customer authentication is disabled by default. Follow the authentication guide to configure Shopify credentials and callback URLs before enabling auth.isEnabled in lib/config/index.ts.

Shop Agent is disabled by default. Set agent.isEnabled to true in lib/config/index.ts and follow the Shop Agent guide to configure AI Gateway access and review privacy and spending safeguards before enabling public chat.

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