Agents already shop on the web, but they often use pages and tools originally built for people and search engines. Building a better shopping experience for agents means treating them as first-class shoppers, with product information they can read directly and tools designed for agents to shop.
Today, Vercel Shop, our open source Next.js storefront template for Shopify, is generally available. Teams can launch storefronts optimized for how people, search engines, and agents interact with them.
Vercel Shop is built on Shopify’s Hydrogen SDK. The SDK gives teams access to the store’s product catalog, cart and order management, payments, and checkout to build custom storefronts. Earlier this year, Vercel and Shopify announced plans to rebuild Hydrogen to work across JavaScript frameworks. Today, the rebuilt SDK is generally available.
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
Copy link to headingGive agents the information and tools they need
Vercel Shop makes product pages available as machine-readable content, including price, availability, and options. The same product URL can serve a visual page to people or product information that agents can read without interpreting the page’s layout. The template also includes structured data embedded in pages and sitemaps to help search and answer engines discover and understand the products.
Shopify co-developed the Universal Commerce Protocol (UCP), which gives agents a standard way to search a store’s catalog, read product details, check availability, build a cart, and get a checkout link. Vercel Shop makes these capabilities discoverable at the merchant’s own domain, so agents can use MCP to search products and build carts without navigating the site.
Copy link to headingCustomize the experience for all customers
Vercel Shop brings the store’s product catalog, cart, and checkout together with a Next.js storefront, product information and shopping tools for agents, and a shopping assistant powered by eve. The storefront and assistant live in the same codebase, so teams can customize the store’s design and how the assistant helps shoppers.
Skills included in the template guide coding agents through setup, customization, and template updates. Teams can create an experience where shoppers browse product pages or ask the assistant to find products and add them to their cart. Both share the same cart, so shoppers keep what they’ve added as they move between experiences.
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
Copy link to headingStorefronts built with Shopify and Vercel
Today, we launched our merch store at vercel.store with limited-edition drops. It’s built on Vercel Shop. The store’s shopping agent helps shoppers find products, add them to their cart, and continue to checkout.
Shopify, Next.js, and Vercel already power storefronts for brands including AG1, Bombas, and PAIGE. When PAIGE re-architected its ecommerce platform, it saw a 22% increase in revenue and a 76% increase in conversion over Black Friday and Cyber Monday, with no downtime.
Copy link to headingGet started with Vercel Shop
Create a storefront:
pnpm create next-app@latest my-store --example https://github.com/vercel/shopGet started with Vercel Shop. Check the documentation to connect your Shopify store and configure the storefront.
