--- title: Introduction description: Learn about the Vercel Shop template and what it offers. type: overview --- # Introduction Vercel Shop is a Shopify storefront template for Next.js, built to be the best way to run Next.js's newest performance features against a real commerce backend, and just as deliberately built to be easy for a coding agent to extend. Drop in your Shopify credentials and you have a fully-featured store in minutes; see [Getting Started](/docs/getting-started). ## How it works **Pages load instantly and stay correct.** Every route ships as a fast, pre-rendered page by default, with the pieces that genuinely need a live look — a selected variant, a filtered grid, cart state — filled in around it without holding up the rest. Edit a product or collection in Shopify Admin and the storefront picks it up right away instead of waiting out a cache window. Getting this balance of speed and freshness right by hand, against a real commerce backend, is normally weeks of trial and error; the template applies it consistently across every route from the start. See [Why Use This](/docs/why-use-this) for the thinking behind the template. **Shopify integration follows Shopify's own patterns, not a bespoke wrapper.** Storefront data and customer authentication are both built on Shopify's official Next.js integration, so the way the template talks to Shopify is the way Shopify already documents and supports — not a one-off abstraction only this template understands. **The codebase is legible to agents, not just to whoever wrote it.** Every route, Shopify integration, and data transform follows one documented shape, so a coding agent can safely extend the storefront on day one instead of guessing at conventions from scratch. Skills describe common tasks — from enabling Shopify Markets to swapping your CMS — naming the files to touch, the patterns to follow, and how to validate the result, so an agent can execute them in a single command instead of a long back-and-forth. See [Extending with Agents](/docs/getting-started/extending-with-agents). ## Out of the box Your Shopify credentials are the only thing standing between a fresh clone and a fully working storefront — everything below ships pre-wired. | Area | Ships with | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Product pages** | Variant picker, color-aware gallery, optimistic add-to-cart, bundles, complementary & related products, Buy with Shop, structured data — see [PDP](/docs/anatomy/pages/pdp) | | **Collections & search** | Faceted filters, swatch filters, sorting, infinite scroll, predictive search — see [PLP](/docs/anatomy/pages/plp) | | **Cart** | Optimistic overlay and full cart page, server-action mutations, bundle-aware line items — see [Cart](/docs/anatomy/cart) | | **Content** | Shopify Pages, policies, blogs, and articles rendered as storefront routes — see [Content pages](/docs/anatomy/pages/content) | | **Navigation & footer** | Responsive nav and mobile menu, policy links, social links — see [Navigation](/docs/anatomy/navigation) | | **AI shopping assistant** | Opt-in agent with product discovery, cart tools, and generative UI, built on AI SDK — see [Agent](/docs/anatomy/agent) | | **Customer accounts** | Opt-in Hydrogen OAuth, profile, orders, and address book — see [Authentication](/docs/anatomy/authentication) | | **AEO & GEO** | Markdown content negotiation, `llms.txt`, JSON-LD, sitemap — see [AEO & GEO](/docs/anatomy/aeo-geo) | | **Cache invalidation** | Signed Shopify webhook handler that busts exactly the right cache tags — see [Webhooks](/docs/anatomy/webhooks) | Analytics (Vercel Web Analytics, Speed Insights) and multi-locale routing (Shopify Markets, or plain i18n) live in the codebase already and turn on with a skill or a flag, not a rewrite — see [Enable Analytics](/docs/skills/enable-analytics) and [Enable Shopify Markets](/docs/skills/enable-shopify-markets). Set up Shopify, create a project, and run the storefront locally. Extend and customize the storefront with Claude Code or Cursor. Why we built Vercel Shop as an agent-first Shopify starter. --- 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)