Deploy a headless Shopify storefront with Vercel

Shopify 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 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

To help you get started, deploy the Next.js Commerce template (built with Next.js, Shopify, and Tailwind CSS) directly to Vercel, or use the steps below to clone it locally.

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.

To use Next.js Commerce as your headless Shopify theme, install the 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.
• 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.

Shopify provides a Storefront API that lets you fetch products, collections, pages, and more for your headless store. By installing the Headless app, 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.

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.

• Navigate to https://[your-shopify-store-subdomain].myshopify.com/admin/settings/checkout and click Customize.
• Click Branding (the paintbrush icon) and customize your brand.

• Navigate to https://[your-shopify-store-subdomain].myshopify.com/admin/settings/branding and customize settings to match your brand.

• Navigate to https://[your-shopify-store-subdomain].myshopify.com/admin/settings/email_settings and customize settings to match your brand.

• 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.

Using Shopify's webhooks and listening for select webhook event topics, you can use Next.js on-demand revalidation 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)

Create your own secret or generate a random UUID.

You'll use this secret value when you configure environment variables.

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.

ngrok is the easiest way to test webhooks while developing locally.

1. Install and configure ngrok (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.

Next.js Commerce is fully powered by Shopify. All products, collections, pages, header and footer menus, and SEO are controlled through Shopify.

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.

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.

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 and prose.
• If a page is not found, a 404 page is displayed.

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.

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.

Now that your Shopify store is configured, deploy your code to Vercel.

Clone the Next.js Commerce repo:

pnpm create next-app --example <https://github.com/vercel/commerce>

Publish your code to a Git provider like GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin <https://github.com/your-account/your-repo>
git push -u origin main

Import the repository into a new Vercel project.

Vercel automatically detects you are using Next.js and configures the optimal build settings.

Create 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.