---
title: Introduction
description: "What Vercel Shop is, what you get out of the box, and how it fits Shopify's new Hydrogen."
url: "https://shop-docs.labs.vercel.dev/docs"
docs_index: /llms.txt
lastUpdated: 2026-10-13
type: overview
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

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.

<a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fshop&project-name=shop&repository-name=shop&demo-title=Vercel+Shop&demo-url=https%3A%2F%2Ftemplate.vercel.shop&stores=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22shopify%22%2C%22productSlug%22%3A%22shopify%22%2C%22protocol%22%3A%22other%22%7D%5D">
  <img src="https://vercel.com/button" alt="Deploy with Vercel" />
</a>

> The Deploy button creates a new Shopify store and a Vercel project. After deploying, follow
> [Deploy with a new Shopify store](/docs/getting-started#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](/docs/getting-started#use-an-existing-shopify-store).

Vercel Shop is in beta. It will leave beta when the [Shopify Hydrogen](https://www.npmjs.com/package/@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](/docs/anatomy/aeo-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](https://eve.dev).

## 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](https://vercel.com/docs/botid) for invisible bot detection in your [shop configuration](/docs/reference/shop-config).
- **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](/docs/getting-started/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](/docs/getting-started) to create your project.

See the template running at [template.vercel.shop](https://template.vercel.shop).

## Part of the new Hydrogen

Vercel is a design partner on the rebuild of [Shopify Hydrogen](https://vercel.com/blog/vercel-and-shopify-are-rebuilding-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](/docs/skills/update-shop).
- 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.

#### [Getting Started](/docs/getting-started)

Set up Shopify, create a project, and run the storefront locally.

#### [Extending with Agents](/docs/getting-started/extending-with-agents)

Extend and customize the storefront with Claude Code or Cursor.

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)