Setup Environment

Start with a new Shopify store using the Deploy button, or connect an existing store and run Vercel Shop locally.

Deploy with a new Shopify store

Vercel creates the repository, creates the store through the Vercel Marketplace Shopify integration, and sets the required environment variables for you.

Click Deploy, create the Shopify store in the deploy screen, and finish the deployment.
In the Vercel dashboard, open the project and click Connections in the sidebar.
Open Shopify and claim the store you created.
In Shopify admin, create or import your products.
Publish the products to the Vercel Storefronts sales channel.
Redeploy the project from the Vercel dashboard.

The first deployment runs before the store has products, so the homepage shows no products until you redeploy.

To show later product, collection, and content changes without redeploying, set up webhooks.

Use an existing Shopify store

Prerequisites

Node.js 24
pnpm 12 for installing dependencies and running scripts
A Shopify store

Install Shopify's Headless sales channel. In your Shopify admin, under Sales channels, click Headless, create a storefront, and copy its public access token. Grant the required Storefront API permissions. For the full walkthrough, see Setup Shopify.

Stores from the Vercel Marketplace

If you created your store through the Vercel Marketplace Shopify integration, you have the Vercel Storefronts channel instead of Headless. Manage the storefront and its access token there.

Create your project

pnpm create next-app@latest my-store --example https://github.com/vercel/shop
cd my-store

The project includes the Shop skills for your coding agent in .agents/skills/. See Extending with Agents.

Add your credentials

Copy the example environment file:

cp .env.example .env.local

Set the three required values in .env.local:

NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN="your-store.myshopify.com"
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN="your-storefront-access-token-here"
NEXT_PUBLIC_SHOPIFY_SHOP_ID="123456789"

Find NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN under Settings → Domains in Shopify admin. Use the public access token from your Headless channel storefront for NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN. The shop ID is the number in your store's customer accounts URL, https://shopify.com/123456789/account.

Customer login needs more setup

Customer accounts require additional credentials and configuration. See Authentication before enabling sign-in.

See Environment Variables for optional settings.

Run the storefront

pnpm dev

Open localhost:3000 and confirm that your Shopify products appear.

If no products appear, you may still need to publish products to the Headless channel. See publishing products to your storefront.

Local HTTPS with Portless

For local HTTPS, install Portless with pnpm add -g portless, then run pnpm dev:portless. Use it to test secure cookies. Customer sign-in needs a public HTTPS tunnel; see Authentication.

Deploy to Vercel

When you're ready to deploy, commit and push your changes to your Git repository. Then import the project at vercel.com/new, or use the CLI:

pnpm add -g vercel
vercel

Add the required environment variables to the Vercel project before your first production deploy. Stores created through the Vercel Marketplace Shopify integration have their Shopify credentials configured for you.

To refresh the storefront when you edit products, collections, or content in Shopify, set SHOPIFY_WEBHOOK_SECRET and configure webhooks.

Setup Shopify

Configure the Shopify apps and sales channel used by the storefront.

Extending with Agents

Customize the storefront with coding agents and project skills.

Environment Variables

Configure authentication, the shopping assistant, and other optional features.