vercel-shop
By vercel
Bootstrap new Vercel Shop projects from Shopify-Next.js templates, audit existing codebases against latest standards, and apply skills to add dynamic menus, CMS pages, analytics, Speed Insights, multi-locale routing, customer authentication, and GraphQL schema inspection.
npx claudepluginhub vercel/shop --plugin vercel-shopComponent Overview
Component Details
Commands (3)
Bootstrap a new Vercel Shop project and confirm the project-scoped plugin setup landed correctly.
Audit an existing Vercel Shop project against the current recommended template version without modifying files.
Plan which template updates should be rolled into an existing Vercel Shop project by combining scaffold metadata, the template rollout log, and the current project state.
Skills (8)
Reference Vercel Shop GraphQL patterns, fragments, cache conventions, and transforms for any Shopify GraphQL work in the template.
Replace hardcoded nav and footer menus with Shopify-powered menus. Optionally add a megamenu component for multi-level navigation.
Use Shopify AI Toolkit to inspect live Storefront and Customer Account GraphQL schemas for Vercel Shop work.
Restore locale-prefixed URLs and next-intl routing in the shop template.
Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.
Add customer authentication to the shop template using better-auth with Shopify OIDC. Includes login flow, account pages (profile, orders, addresses), and nav integration.
Wire Shopify metaobjects as the CMS for homepage and marketing page content. Adds GraphQL queries for cms_homepage and cms_page metaobject types and transforms them into domain types.
Enable Shopify Markets with multi-locale routing using next-intl. Use when the user wants to add internationalization, multi-locale support, locale-prefixed URLs, or Shopify Markets. Supports sub-path and per-domain routing strategies.
README
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 docs.vercel.shop for full documentation.
Getting Started
- Scaffold a new project using the CLI:
npx create-vercel-shop@latest my-store
The scaffold also installs these project-scoped agent plugins:
vercel-shopvercel-pluginshopify-ai-toolkit
To install only the agent plugins into an existing project, run this from that project's root:
npx create-vercel-shop@latest --no-template
- 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:
cp .env.example .env.local
SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-token
NEXT_PUBLIC_SITE_NAME="Your Store Name"
- Start the development server with the same package manager you used to scaffold the project:
pnpm dev
npm run dev
yarn dev
bun dev
See docs.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
- 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:
| Skill | Description |
|---|---|
enable-shopify-menus | Replace hardcoded nav/footer with Shopify menus, optional megamenu |
enable-shopify-cms | Use Shopify metaobjects as a CMS |
enable-content-negotiation | Serve product pages as markdown to LLM agents |
add-locale-url-prefix | Locale-prefixed URL routing |
enable-shopify-auth | Customer authentication with Shopify OIDC |
enable-shopify-markets | Multi-locale support with Shopify Markets |
Project Structure
This is a monorepo managed with Turborepo and pnpm.
| App | Description |
|---|---|
apps/template | The Next.js storefront template |
apps/docs | Documentation site at docs.vercel.shop |
apps/cli | create-vercel-shop scaffolding CLI |
Documentation
Full documentation is available at docs.vercel.shop.
License
MIT
Similar Plugins
shopify-plugin
Shopify developer tools for Claude Code — search Shopify docs, generate and validate GraphQL, Liquid, and UI extension code
shopify-commerce
Expert subagent and skills for Shopify development — GraphQL Admin and Storefront APIs, Liquid templating, Online Store 2.0 themes, Hydrogen/Remix headless storefronts, Shopify Functions, checkout UI extensions, Polaris components, app development with App Bridge, webhooks, and JavaScript/TypeScript/React patterns.
ecommerce-storefront
Comprehensive skills for building ecommerce storefronts with best practices for UI/UX, SEO, and mobile responsiveness
shopify-developer
Complete Shopify development reference covering Liquid templating, theme development (OS 2.0), GraphQL/REST APIs, app development, Shopify Functions, Hydrogen, performance optimisation, and debugging. Single unified skill with progressive disclosure via 11 reference files. API version 2026-01.
More by vercel
Help us improve
Share bugs, ideas, or general feedback.