--- title: Commerce description: Build a Shopify storefront on Vercel. Start from a production starter, render and refresh your catalog, connect carts and agent shoppers, and get ready for peak traffic. url: "https://vercel.com/kb/architecture/commerce" last_updated: 2026-11-05 install_vercel_plugin: npx plugins add vercel/vercel-plugin --- # Commerce Build a Shopify storefront on Vercel. Start from a production starter, render and refresh your catalog, connect carts and agent shoppers, and get ready for peak traffic. ## Start your storefront Decide what you build and what stays in Shopify, then connect a store and deploy a working starter. ### Connect a store and deploy a starter See what you gain from a headless Shopify storefront, then get Vercel Shop live on your own store. - [How PAIGE grew revenue by 22% with Shopify, Next.js, and Vercel](https://vercel.com/customers/how-paige-grew-revenue-by-22-with-shopify-next-js-and-vercel): Follow PAIGE's move from Commercetools and Angular to Shopify and Next.js, and the conversion and Black Friday results. - [Vercel Shop](https://vercel.com/templates/next.js/vercel-shop): Deploy an open-source Next.js 16 storefront built on Shopify's Hydrogen SDK, with an optimistic cart, webhook cache invalidation, and optional accounts and Shop Agent. - [Shopify on Vercel](https://vercel.com/marketplace/shopify): Install Shopify into a project with one command, create a test store or attach an existing one, and set credentials automatically. ## Render and refresh your catalog Choose how each storefront surface renders, make products readable by search and AI agents, and refresh data when Shopify changes. ### Choose a rendering mode per page Decide where to use a static shell, cached catalog data, or request-time content on each page type. - [Cache Components for Instant and Fresh Pages](https://vercel.com/academy/nextjs-foundations/cache-components): Combine a prerendered shell, cached shared data, and request-time content on one product page. - [Rendering strategies for retail: ISR vs SSR vs static](/kb/guide/ssr-vs-ssg-vs-isr-vs-csr-for-ecommerce): Choose between SSR, SSG, ISR, and CSR for each ecommerce surface. Compare rendering modes on freshness, personalization, SEO, and cost. ### Make products readable by search and AI agents Put price, availability, and product details in the first HTML response, with metadata crawlers can parse. - [Making agent-friendly pages with content negotiation](https://vercel.com/blog/making-agent-friendly-pages-with-content-negotiation): Serve markdown to agents and HTML to people from the same URL with the Accept header, and add markdown sitemaps so agents can find it. - [Dynamic Metadata Done Right](https://vercel.com/academy/nextjs-foundations/dynamic-metadata-done-right): Build canonical, Open Graph, and social card metadata with \`generateMetadata\`, and avoid the fetch mistakes that break it. - [Build a ChatGPT product feed for Shopify](https://vercel.com/i/chatgpt-product-feed): Learn what the ChatGPT product feed spec requires, why headless product pages go invisible to its crawler, and how to build the feed pipeline. ### Refresh catalog data from Shopify events Map product changes to the smallest set of tags and paths, handle repeat deliveries, and keep revalidation costs predictable. - [How to move from time-based to on-demand revalidation](/kb/guide/how-to-move-to-on-demand-revalidation): Replace fixed revalidation timers with scoped updates triggered by changes to content, product data, or other application data. - [How to reduce ISR revalidation costs](/kb/guide/how-to-reduce-isr-revalidation-costs): Reduce ISR costs by analyzing Incremental Static Regeneration (ISR) behavior to find pages and tags that revalidate too often - [ISR Writes](https://vercel.com/academy/optimize-your-vercel-account/isr-writes): Swap a sneaker-drop page from a 60-second timer to tag-based revalidation triggered by the store's launch webhook. - [How Shopify webhooks keep storefronts in sync](https://vercel.com/i/shopify-webhooks): Verify Shopify webhook signatures before parsing, revalidate the affected pages in one route handler, and add a queue when deliveries pile up. ## Build the buying experience Keep carts in sync with Shopify, hand shoppers to checkout, and let AI agents shop on your domain. ### Connect Shopify carts and checkout Make cart changes that Shopify confirms, then send shoppers to Shopify's checkout. - [Build a Shopify cart and hand off checkout](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/cart/manage): Create carts, update line items and buyer identity, and send shoppers to the checkout URL. - [Server Actions for Forms](https://vercel.com/academy/nextjs-foundations/server-actions-for-forms): Run add-to-cart style mutations in Server Actions with validation and pending states, then expire cached data with \`updateTag\`. ### Let AI agents shop your store Expose catalog, cart, and checkout tools to agents while the buyer stays in control of payment. - [Vercel and Shopify make agents first-class shoppers](https://vercel.com/blog/vercel-and-shopify-make-agents-first-class-shoppers): See how Vercel Shop, the GA Hydrogen SDK, and the Universal Commerce Protocol let agents search, build carts, and check out on your domain. - [Shopify and Vercel are rebuilding Hydrogen for faster storefronts](https://vercel.com/customers/shopify-and-vercel-are-rebuilding-hydrogen-for-faster-storefronts): See how Shopify and Vercel are rebuilding Hydrogen to run on any framework, with skills that let agents extend a storefront in a single command. ## Launch, measure, and experiment Test the purchase path under load and measure storefront changes with real-user data. ### Prepare for peak traffic Load-test checkout, plan rollbacks, and learn from retailers who have run a Black Friday on Vercel. - [How to prepare your storefront for Black Friday traffic](/kb/guide/black-friday-preparation): A practical checklist for keeping your storefront fast and your checkout path healthy through Black Friday and Cyber Monday traffic, from load testing to instant rollback. - [How to effectively load test your application on Vercel](/kb/guide/how-to-effectively-load-test-your-vercel-application): Learn how to safely load test your Next.js app on Vercel. This guide covers realistic, policy-compliant testing of routes, caching, middleware, and databases to uncover performance issues without impacting Vercel’s infrastructure. - [How KIKO Milano scales for Black Friday](https://vercel.com/customers/how-kiko-milano-scales-for-black-friday): See how KIKO Milano replaced three weeks of manual Black Friday scaling on AWS with automatic scaling on Vercel, and cut build times by 75%. - [Helly Hansen migrated to Vercel and drove 80% Black Friday growth](https://vercel.com/customers/how-helly-hansen-migrated-to-vercel-and-drove-80-black-friday-growth): See how an incremental move to Next.js, plus ISR and cache shielding, carried a retailer through Black Friday with zero downtime. ### Experiment without hurting performance Run storefront tests that keep pages cached and Core Web Vitals intact. - [A/B testing on ecommerce storefronts without hurting Core Web Vitals](/kb/guide/ecommerce-ab-testing-core-web-vitals): Client-side A/B tools can worsen LCP and CLS on the pages you're testing. Run ecommerce A/B tests at the edge with Routing Middleware and Vercel Flags. - [Shirt Shop: Feature Flags using Next.js](https://vercel.com/templates/next.js/shirt-shop-feature-flags): Run a 50/50 test of shipping and promo banners on a product page, with stable per-visitor bucketing and Flags Explorer overrides. ## Reference Architecture Choose a stack and work through the decisions behind it, with curated documentation, guides, templates, and courses to help you build. - [Agent stack](/kb/architecture/agents): Build and operate agents with models, tools, and durable workflows. - [Web applications](/kb/architecture/web): Choose rendering, data, authentication, and caching approaches. - [Backends](/kb/architecture/backends): Choose a runtime, connect services, and run background work. [Browse all stacks](/kb/architecture)