# Deploy a headless Shopify storefront with Vercel **Author:** Vercel --- [Shopify](https://www.shopify.com/) is an ecommerce platform for building and managing online storefronts. This guide explains how to deploy a headless Shopify storefront using Next.js on Vercel. This guide uses the [Next.js Commerce template](https://vercel.com/templates/next.js/nextjs-commerce) to connect your Shopify store to a Vercel deployment. When you deploy this template, you're automatically prompted to connect your Shopify storefront. The guide covers three main areas: - Configure Shopify for use as a headless CMS - Deploy your headless storefront on Vercel - Configure environment variables > Even if you're not using Next.js Commerce, you can use this guide as a roadmap to create your own headless Shopify theme. ## Getting started To help you get started, deploy the [Next.js Commerce template](https://vercel.com/templates/next.js/nextjs-commerce) (built with Next.js, Shopify, and Tailwind CSS) directly to Vercel, or use the steps below to clone it locally. ## Configure Shopify ### 1\. Create a Shopify account and storefront If you have an existing Shopify account and storefront, you can use it with the rest of these steps. If you don't have one, [create a Shopify account](https://www.shopify.com/signup). > Next.js Commerce does not work with a Shopify Starter plan as it does not allow installation of custom themes, which is required to run as a headless storefront. ### 2\. Install the Shopify Headless theme To use Next.js Commerce as your headless Shopify theme, install the [Shopify Headless theme](https://github.com/instantcommerce/shopify-headless-theme). This enables a seamless flow between your headless site on Vercel and your Shopify-hosted checkout, order details, links in emails, and more. - Download the [Shopify Headless Theme](https://github.com/instantcommerce/shopify-headless-theme). - Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/themes`, click **Add theme**, then **Upload zip file**. - Select the downloaded zip file and click the **Upload file** button. - Click **Customize**. - Click **Theme settings** (the paintbrush icon), expand the **STOREFRONT** section, enter your headless store domain, and click **Publish**. - Confirm the theme change by clicking **Save and publish**. The headless theme should now be your current active theme. ### 3\. Install the Shopify Headless app Shopify provides a [Storefront API](https://shopify.dev/docs/api/storefront) that lets you fetch products, collections, pages, and more for your headless store. By installing the [Headless app](https://apps.shopify.com/headless), you can create an access token that authenticates requests from your Vercel deployment. - Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/settings/apps` and click the **Shopify App Store** button. - Search for "Headless" and click on the **Headless** app. - Click **Add app**. - Click **Add sales channel**. - Click **Create storefront**. - Copy the public access token. You'll need it when you configure environment variables. If you need to reference the public access token again, navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/headless_storefronts`. ### 4\. Configure your Shopify branding and design Even though you're creating a headless store, Shopify still controls these pages: - Checkout - Emails - Order status - Order history - Favicon (for Shopify-controlled pages) Use Shopify's admin to customize these pages to match your brand. ### 5\. Customize checkout, order status, and order history - Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/settings/checkout` and click **Customize**. - Click **Branding** (the paintbrush icon) and customize your brand. > There are three steps in the checkout flow. Use the dropdown to switch between pages and adjust branding on each one. Click **Save** when you're done. - Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/settings/branding` and customize settings to match your brand. ### 6\. Customize emails - Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/settings/email_settings` and customize settings to match your brand. ### 7\. Customize favicon - Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/themes` and click **Customize**. - Click **Theme settings** (the paintbrush icon), expand the **FAVICON** section, upload your favicon, then click **Save**. ### 8\. Configure Shopify webhooks Using [Shopify's webhooks](https://shopify.dev/docs/apps/build/webhooks) and listening for select [webhook event topics](https://shopify.dev/docs/api/admin-rest/2022-04/resources/webhook#event-topics), you can use Next.js [on-demand revalidation](https://vercel.com/docs/incremental-static-regeneration) to keep data fetches indefinitely cached until data in your Shopify store changes. Next.js Commerce is pre-configured to listen for these Shopify webhook events and automatically revalidate fetches: - `collections/create` - `collections/delete` - `collections/update` - `products/create` - `products/delete` - `products/update` (this includes variant additions, updates, removals, and purchase events for inventory and out-of-stock updates) ### 9\. Create a secret for secure revalidation Create your own secret or [generate a random UUID](https://www.uuidgenerator.net/guid). You'll use this secret value when you configure environment variables. ### 10\. Configure Shopify webhooks in the admin Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/settings/notifications` and add webhooks for all six event topics listed above. You can add more sets for other preview URLs, environments, or local development. Append `?secret=[your-secret]` to each URL, where `[your-secret]` is the secret you created above. ### 11\. Test webhooks during local development [ngrok](https://ngrok.com/) is the easiest way to test webhooks while developing locally. 1. [Install and configure ngrok](https://ngrok.com/download) (you'll need to create an account). 2. Run your app locally: `npm run dev`. 3. In a separate terminal session, run `ngrok http 3000`. 4. Use the URL generated by ngrok and add or update your webhook URLs in Shopify. You can now make changes to your store and your local app should receive updates. You can also use the **Send test notification** button to trigger a generic webhook test. ## Use Shopify as a CMS Next.js Commerce is fully powered by Shopify. All products, collections, pages, header and footer menus, and SEO are controlled through Shopify. ### Products Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/products` to manage your products. - Only **Active** products are shown. **Draft** products won't appear until they are marked as **Active**. - **Active** products can still be hidden by adding a `nextjs-frontend-hidden` tag. This tag also tells search engines not to index or crawl the product, but the product remains directly accessible by URL. This allows "secret" products to only be accessed by people you share the URL with. - Product options and option combinations are driven from Shopify options and variants. When selecting options on the product detail page, other option and variant combinations are visually validated and verified for availability. - Products that are **Active** but have no quantity remaining are still displayed on the site but marked as "out of stock". The ability to add the product to the cart is disabled. ### Collections Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/collections` to manage your collections. All available collections show on the search page as filters on the left, with one exception: any collection name that starts with the word "hidden" won't appear on the headless front end. Collections were chosen over tags so that product order could be controlled (collections allow manual ordering). Create the following collections: - **Hidden: Homepage Featured Items** — Products in this collection are displayed in the three featured blocks on the homepage. - **Hidden: Homepage Carousel** — Products in this collection are displayed in the auto-scrolling carousel section on the homepage. ### Pages Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/pages` to manage your pages. Next.js Commerce contains a dynamic `[page]` route. It uses the value to look for a corresponding page in Shopify. - If a page is found, it displays its rich content using [Tailwind's typography plugin](https://tailwindcss.com/docs/typography-plugin) and `prose`. - If a page is not found, a `404` page is displayed. ### Navigation menus Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/menus` to manage navigation menus. Next.js Commerce's header and footer navigation is pre-configured to be controlled by Shopify navigation menus. They can link to collections, pages, external links, and more. Create the following navigation menus: - **Next.js Frontend Header Menu** — Menu items shown in the headless frontend header. - **Next.js Frontend Footer Menu** — Menu items shown in the headless frontend footer. ### SEO Shopify's products, collections, pages, and other content types allow you to create custom SEO titles and descriptions. Next.js Commerce displays these custom values, with sensible fallbacks when they aren't provided. ## Deploy to Vercel Now that your Shopify store is configured, deploy your code to Vercel. ### Clone the repository Clone the Next.js Commerce repo: `pnpm create next-app --example ` ### Publish your code Publish your code to a Git provider like GitHub: `git init git add . git commit -m "Initial commit" git remote add origin git push -u origin main` ### Import your project Import the repository into a [new Vercel project](https://vercel.com/new). Vercel automatically detects you are using Next.js and configures the optimal build settings. ### Configure environment variables Create [environment variables](https://vercel.com/docs/environment-variables) with these names and values: - `COMPANY_NAME` _(optional)_ — Displayed in the footer next to the copyright when the company differs from the site name, for example `Acme, Inc.` - `SHOPIFY_STORE_DOMAIN` — Used to connect to your Shopify storefront, for example `[your-shopify-store-subdomain].myshopify.com` - `SHOPIFY_STOREFRONT_ACCESS_TOKEN` — Used to secure API requests between Shopify and your headless site, created when you installed the Shopify Headless app - `SHOPIFY_REVALIDATION_SECRET` — Used to secure data revalidation requests between Shopify and your headless site, created when you set up your revalidation secret - `SITE_NAME` — Displayed in the header and footer navigation next to the logo, for example `Acme Store` - `TWITTER_CREATOR` — Used in Twitter OG metadata, for example `@nextjs` - `TWITTER_SITE` — Used in Twitter OG metadata, for example `https://nextjs.org` You can [use the Vercel CLI to set up your local development environment variables](https://vercel.com/docs/environment-variables#development-environment-variables). --- [View full KB sitemap](/kb/sitemap.md)