Introduction
Vercel Shop is an enterprise-ready headless Shopify storefront built with Next.js. Shopify runs your catalog, checkout, and payments. Vercel Shop gives you the storefront in front of them: product pages, category pages, search, and a cart, all backed by the Shopify Storefront API and ready to customize. It's the Next.js storefront template for Shopify's new Hydrogen.
The Deploy button creates a new Shopify store and a Vercel project. After deploying, follow Deploy with a new Shopify store to claim the store and add products. To use a store you already have, see Use an existing Shopify store.
Vercel Shop is in beta. It will leave beta when the Shopify Hydrogen SDK it uses for commerce, currently in preview, becomes generally available.
Vercel Shop is open source. Extend it directly with your team or with coding agents. Vercel and Shopify maintain skills that package common workflows, giving agents a repeatable, best-practice-driven way to implement new features and functionality on your site. It deploys to Vercel and uses Vercel's agentic infrastructure and best practices to power the fastest headless storefront experience on Shopify.
What you get out of the box
Going headless usually means rebuilding the same foundation before you can ship. Vercel Shop includes that foundation out of the box:
- Product, category, and search pages backed by the Shopify Storefront API.
- Blog, page, and policy content from Shopify.
- A server-backed cart and checkout handoff to Shopify.
- Navigation and footer, with optional Shopify-managed menus.
- SEO, sitemaps, and structured data for product and collection pages.
- Machine-readable content for LLMs. See AEO and GEO.
- Webhook-driven revalidation, so edits in Shopify Admin refresh the storefront.
- Optional customer accounts and an AI shopping assistant powered by Vercel's agentic framework eve.
Enterprise-ready
- Scale. Static generation, streaming, and caching on Vercel handles traffic spikes and large catalogs.
- Security. Shopify owns checkout and payment data, so card details never touch your storefront. Customer sessions are encrypted, and API secrets stay server-side. A managed firewall and DDoS mitigation protect the site on Vercel, and you can optionally turn on BotID for invisible bot detection in your shop configuration.
- Composability. The storefront is a standard Next.js app that talks to Shopify's APIs. Bring your own CMS, search, or analytics, and add custom routes, pages, and integrations alongside the commerce foundation. You compose the stack around your needs in your own codebase, with no proprietary framework to work around.
Built for agentic development
Every project includes the Shop skills and AGENTS.md conventions, so coding agents extend the storefront with best practices in mind. Skills carry task-specific instructions and checks, and Shopify AI Toolkit adds current Shopify API documentation and validation. See Extending with Agents.
Start with the template
Create your project from the template with create-next-app. It ships the commerce foundation and the Shop skills, with room to build on top. Head to Getting Started to create your project.
See the template running at template.vercel.shop.
Part of the new Hydrogen
Vercel is a design partner on the rebuild of Shopify Hydrogen, Shopify's storefront toolkit, redesigned with the Next.js team to be framework-agnostic and runtime-agnostic. Vercel Shop is the Next.js template for Shopify and Hydrogen going forward, and adopts the new Hydrogen as part of that work.
Why teams choose Vercel Shop
- Open source and maintained by Vercel. Track upstream improvements and roll them into your storefront with the update-shop skill.
- Vercel builds and maintains Next.js, so the framework and the template move forward together.
- Shopify features arrive as maintained skills, so a coding agent adds them the same way every time.
- The storefront is yours. Extend it in your own codebase instead of waiting on a vendor roadmap.