---
title: "Shopify Online Store with Next.js"
description: "A responsive online store built with Next.js and Shopify."
url: "https://vercel.com/templates/next.js/shopify-online-store-with-next-js"
links:
  repository: "https://github.com/vercel/shop/tree/main/apps/template"
  demo: "https://template.vercel.shop/"
  deploy: "https://vercel.com/new/clone?demo-title=Shopify+Online+Store+with+Next.js&demo-description=A+responsive+online+store+built+with+Next.js+and+Shopify.&demo-url=https%3A%2F%2Ftemplate.vercel.shop%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F5MPpvS1ZqYnXG5eRR8AaPY%2Ffd88acddd98b12c24cc0e51c28d85716%2Fshirt-shop-template-thumbnail.jpg&project-name=Shopify+Online+Store+with+Next.js&repository-name=shopify-online-store-with-next-js&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fshop%2Ftree%2Fmain%2Fapps%2Ftemplate&from=templates&skippable-integrations=1&external-id=External+ID+or+reference+that+will+be+passed+to+the+Redirect+URL+of+each+of+the+required+Integrations.&products=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22other%22%2C%22productSlug%22%3A%22shopify%22%2C%22integrationSlug%22%3A%22shopify%22%7D%5D&project-names=Comma+separated+list+of+project+names%2Cto+match+the+root-directories"
---

# Shopify Online Store with Next.js

A responsive online store built with Next.js and Shopify.

# Vercel Shop

A Next.js storefront template and reference architecture for Shopify, built with Next.js 16, React 19, Tailwind CSS 4, and the Shopify Storefront API.

See [vercel.shop](https://vercel.shop) for full documentation.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fshop&project-name=shop&repository-name=shop&root-directory=apps/template&demo-title=Vercel+Shop&demo-url=https%3A%2F%2Fshop-template.vercel.app)

## Getting Started

1. Scaffold a new project using the CLI:

```sh
npx create-vercel-shop@latest my-store
```

The scaffold also installs these project-scoped agent plugins:

- `vercel-shop`
- `vercel-plugin`
- `shopify-ai-toolkit`

To install only the agent plugins into an existing project, run this from that project's root:

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

2. In Shopify admin, create a storefront token in **Settings → Apps and sales channels → Headless**, enable the required Storefront API permissions, then add your Shopify credentials:

```sh
cp .env.example .env.local
```

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

3. Start the development server with the same package manager you used to scaffold the project:

```sh
pnpm dev
npm run dev
yarn dev
bun dev
```

See [vercel.shop/docs/getting-started](https://vercel.shop/docs/getting-started) for the full setup guide and [Storefront API Permissions](https://vercel.shop/docs/reference/storefront-api-permissions) for the complete scope reference.

## Features

- **Next.js 16 App Router** with React 19 and React Compiler
- **Shopify Storefront API** via GraphQL with type-safe operations
- **Customer authentication** with better-auth and Shopify Customer Account API OIDC — opt-in via env vars
- **Tailwind CSS 4** and shadcn/ui components
- **Internationalization-ready** with next-intl
- **AI-ready** with Vercel AI SDK integration
- **Optimized cart** with server actions and instant cache invalidation
- **SEO** with structured data and dynamic metadata

## Skills

Vercel Shop includes a `vercel-shop` plugin with skills for extending the storefront with common commerce patterns. In Claude Code, these are exposed as `/vercel-shop:<skill>` commands:

| Skill                    | Description                                                                |
| ------------------------ | -------------------------------------------------------------------------- |
| `enable-i18n`            | Locale-prefixed URL routing + next-intl message catalogs (no Markets)      |
| `enable-analytics`       | Add Vercel Analytics, Speed Insights, and Google Tag Manager               |
| `enable-shopify-cms`     | Wire Shopify metaobjects as a CMS for homepage and marketing pages         |
| `enable-shopify-markets` | Multi-locale support with Shopify Markets and next-intl                    |
| `enable-shopify-menus`   | Replace hardcoded nav/footer with Shopify-powered menus, optional megamenu |

## Documentation

Full documentation is available at [vercel.shop](https://vercel.shop).

## License

MIT

## Related Templates

### [Stripe Subscription Starter](https://vercel.com/templates/next.js/subscription-starter)

The all-in-one subscription starter kit for high-performance SaaS applications, powered by Stripe, Supabase, and Vercel.

## Related Integrations

### [Shopify](https://vercel.com/marketplace/shopify)

Build and deploy high-performance Shopify storefronts

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.