Vercel Shop, the open source Next.js storefront template for Shopify, is now generally available. It targets teams that want storefronts tuned for three kinds of visitors at once: people, search engines, and agents.
The template sits on Shopify's Hydrogen SDK, which exposes a store's product catalog, cart and order management, payments, and checkout for custom storefronts. Vercel and Shopify said earlier this year they would rebuild Hydrogen to run across JavaScript frameworks; that rebuilt SDK is now generally available as well.
“Checkouts are ridiculously hard to get right. It's one of those pieces of software that actually does need 20 years of tinkering with. And Shopify has always been very open, and so we invite people to remix pieces from our checkout just as much as you want. Basically taking all the infrastructure that Shopify built, and you can build whatever you want with it.”
Tobias Lütke Co-Founder and Chief Executive Officer (CEO) of Shopify
One URL, two audiences
Product pages built with Vercel Shop double as machine-readable content: price, availability, and options are served as data rather than markup an agent has to interpret. The same product URL hands a visual page to a human browser, or structured product information to a machine.
Discovery is handled alongside that. Pages carry embedded structured data and the template ships sitemaps, both aimed at search and answer engines.
Transactions have their own path. The Universal Commerce Protocol (UCP), co-developed by Shopify, defines a standard way for agents to search a catalog, read product details, check availability, build a cart, and obtain a checkout link. Vercel Shop surfaces those capabilities on the merchant's own domain, so an agent can use MCP to search products and assemble carts without walking the site.
Storefront, assistant, shared cart
Vercel Shop combines the catalog, cart, and checkout with a Next.js storefront, the agent-facing product data and shopping tools, and a shopping assistant built on eve. Because storefront and assistant share a codebase, design and assistant behavior are customizable in one place.
Shoppers can either browse product pages directly or ask the assistant to find items and add them. Both routes write to the same cart, so a selection survives a switch between the two.
The template also ships skills that walk coding agents through setup, customization, and template updates.
“You can build a highly custom, well-designed, agent-ready experience with Vercel Shop. It runs on Next.js, it's built on Shopify, and it's freaking fast.”
Guillermo Rauch Founder & CEO @ Vercel
Drops at vercel.store, and prior deployments
Vercel launched its own merch store at vercel.store on Vercel Shop, starting with limited-edition drops. Its shopping agent locates products, adds them to the cart, and carries the shopper through to checkout.
Shopify, Next.js, and Vercel already back storefronts from AG1, Bombas, and PAIGE. PAIGE's platform re-architecture produced a 22% revenue increase and a 76% conversion increase across Black Friday and Cyber Monday, with no downtime.
Launching a storefront
Create a storefront:
pnpm create next-app@latest my-store --example https://github.com/vercel/shop
Start from Vercel Shop; the documentation covers connecting a Shopify store and configuring the storefront.
