Setup

Step 1: Set up Shopify for headless

If you don't already have a Shopify store, create one at shopify.com. Then set up the Headless channel:

1. In your Shopify admin, go to Settings → Apps and sales channels → Develop apps
2. Install the Headless channel from the Shopify App Store
3. Open the Headless channel and create a new storefront
4. Copy the Storefront API access token - you'll need this for your environment variables
5. Under Storefront API permissions, enable the scopes required by the template

The default storefront needs product listings, inventory, collection listings, checkout, and content access. For the exact scope names, plus optional scopes for Shopify Auth and Shopify CMS, see Storefront API permissions.

Step 2: Create your project

There are three ways to get started:

Deploy with Vercel

The fastest way - deploy directly to Vercel and it will create the repository for you.

Clone with create-vercel-shop

npx create-vercel-shop@latest my-store

create-vercel-shop also installs the vercel-shop, vercel-plugin, and shopify-ai-toolkit plugins in project scope so a coding agent can start working with the project immediately.

Add the agent setup to an existing project

If you already have a repo and only want the project-scoped agent plugins, run this from the project root:

npx create-vercel-shop@latest --no-template

This skips the storefront scaffold and only installs the vercel-shop, vercel-plugin, and shopify-ai-toolkit plugins in project scope.

Start from v0

You can also use v0 to generate a storefront and iterate on the design before connecting it to Shopify.

Step 3: Add your environment variables

Create a .env.local file in your project root:

SHOPIFY_STORE_DOMAIN="your-store.myshopify.com"
SHOPIFY_STOREFRONT_ACCESS_TOKEN="your-storefront-access-token"
NEXT_PUBLIC_SITE_NAME="Your Store Name"

You can find the storefront token in Settings → Apps and sales channels → Headless. For the full variable list, see Environment Variables.

Step 4: Run locally

If you scaffolded the storefront, create-vercel-shop uses the package manager you used to scaffold the project. Start the dev server with the matching command:

pnpm dev
npm run dev
yarn dev
bun dev

Your store is now running at localhost:3000.

Next steps