Vercel Shop

Vercel Shop is a production-ready Shopify storefront template built on Next.js, shipped by Vercel, that pairs Shopify's commerce APIs with a Next.js app and an optional AI shopping agent. It runs on the Next.js 16 App Router and outputs a deployable storefront that reads catalog, cart, and account data from Shopify's Storefront and Customer Account APIs.

What is Vercel Shop?

Vercel Shop is a commerce template maintained by Vercel (GitHub repo vercel/shop, MIT licensed) that combines three layers: Shopify owns commerce, Next.js owns the app, and Eve owns the agent. It takes a Shopify store domain, a Storefront API access token, and a shop ID as required environment variables, and produces a storefront with product, collection, search, blog, page, and policy routes backed by typed GraphQL. It runs on Next.js 16 and deploys to Vercel.

Key Features

• Shopify via the Hydrogen SDK — catalog, cart, checkout, customer accounts, predictive search, and policies come from Shopify through the framework-agnostic Hydrogen SDK rather than the Hydrogen React Router framework.
• Next.js 16 App Router stack — React 19, React Compiler, Tailwind CSS 4, and shadcn/ui components.
• Partial prerendering with tagged caches — caches are invalidated by Shopify webhooks.
• Optimistic cart — Hydrogen forms, shared cart state, and server handlers.
• Opt-in customer accounts — authentication through the Customer Account API, disabled by default until Shopify credentials and callback URLs are configured.
• Answer-engine surface — Markdown representations, /llms.txt, Schema.org structured data, sitemap, and robots rules.
• Opt-in Shop Agent — a side-drawer assistant for product discovery, store questions, and cart updates, with Shopify catalog and policy MCP connections plus Hydrogen cart handlers.
• Opt-in Shopify analytics and consent — plus WebMCP tool registration.

Who is it for?

• Storefront developers starting a Shopify frontend who want routing, caching, and typed GraphQL already wired rather than assembled from scratch.
• Teams on Vercel who need a storefront that deploys through the standard Vercel flow with the three Shopify values prompted at first deployment.
• Developers experimenting with shopping agents who want an AI assistant template with tool connections already scaffolded behind a feature flag.
• SEO-focused builders who want Markdown, /llms.txt, and structured data generated by the framework.

What can you do with Vercel Shop?

• Scaffold a store: run pnpm create next-app@latest my-store --example https://github.com/vercel/shop and configure Shopify credentials from the Headless sales channel.
• Build against validated GraphQL: the shopify-graphql-reference skill adds Shopify-validated operations in the template's layout.
• Add localization: skills enable next-intl locale routing alone or combined with Shopify Markets for multi-locale support.
• Connect Shopify-managed menus: the enable-shopify-menus skill replaces hardcoded nav and footer links.
• Refresh an existing store: the update-shop skill keeps a storefront current with template changes.

How does Vercel Shop work?

1. Create the project with pnpm and the Vercel Shop example, then copy .env.example to .env.local and add your Shopify store domain, Storefront API token, and shop ID.
2. Start the dev server with pnpm dev; for local HTTPS, install Portless globally and run pnpm dev:portless.
3. Enable optional layers by editing lib/config/index.ts — agent.isEnabled for the Shop Agent and auth.isEnabled for customer authentication.

Agents get the Shop skills bundled in .agents/skills/, or can add them to an existing store with pnpm dlx skills add vercel/shop --skill '*' --yes.

FAQ

Is Vercel Shop free?

Yes. Vercel Shop is MIT licensed and open source on GitHub at vercel/shop. You still need a Shopify store with a Storefront API token, and hosting is separate — the template is designed to deploy on Vercel, which prompts for the three required Shopify values before the first deployment.

Do I need Shopify to use this template?

Yes. Catalog, cart, checkout, customer accounts, predictive search, and policies all come from Shopify, so three environment variables are required: the store domain, the Storefront API access token, and the shop ID. The token is created in Shopify admin under Settings → Apps and sales channels → Headless.

Are the Shop Agent and customer accounts turned on by default?

No. Both are opt-in. Customer authentication stays disabled until Shopify credentials and callback URLs are configured; the Shop Agent stays disabled until agent.isEnabled is set to true and AI Gateway access, bot protection, and privacy and spending safeguards are reviewed.

Does the template support multiple languages?

By default it is a single-locale storefront. Multilingual support comes from skills: enable-i18n adds locale-prefixed URL routing with next-intl message catalogs, and enable-shopify-markets adds multi-locale support with Shopify Markets plus next-intl.

Which Shopify SDK does it use?

It uses the framework-agnostic Hydrogen SDK, not the Hydrogen React Router framework. The Shop Agent calls Shopify directly and also has catalog and policy MCP connections, while Next.js handles routing, Server Components, caching, and the machine-readable surface.