--- title: Vercel shortDescription: Build a custom Vercel-hosted storefront powered by Fourthwall's Storefront API using the official Next.js template with one-click deploy. articleType: Setup Guide primaryTopic: vercel-storefront-integration categories: - Integrations - Developer Tools tags: - vercel-integration - storefront-api - headless-commerce - nextjs-template - custom-storefront - vercel-commerce - isr-caching - webhook-invalidation - checkout-redirect - storefront-token tasks: - Deploy a custom storefront on Vercel using the Fourthwall template - Get a storefront token from the Fourthwall dashboard - Set up environment variables for the Vercel storefront - Configure webhook-based cache invalidation - Run the Vercel storefront locally for development - Switch image optimization to Fourthwall built-in - Display a specific collection on the storefront terms: - Vercel - vercel-commerce - Storefront API - storefront token - headless commerce - custom storefront - Next.js storefront - ISR - Incremental Static Regeneration - webhook cache invalidation - checkout redirect - Next.js App Router - collection handle - deploy with Vercel labels: - vercel - storefront-api - headless-commerce - integrations - developer-tools contextString: Requires a Fourthwall store with published products and at least one collection. Storefront token from Settings > For Developers. Technical setup suited for developers comfortable with Next.js and Vercel. breadcrumbPath: "Manage my shop > Apps, features, and integrations > How to Integrate Vercel with Fourthwall" path: manage-my-shop/apps-features-and-integrations/integrate-vercel last_updated: '2026-04-01' --- # How to Integrate Vercel with Fourthwall The Fourthwall Storefront API lets you build a fully custom shopping experience while Fourthwall handles products, checkout, and fulfillment behind the scenes. The official vercel-commerce template (https://github.com/FourthwallHQ/vercel-commerce) gives you a production-ready Next.js App Router storefront you can deploy to Vercel in one click. ## Prerequisites Before starting, you need: - A Fourthwall store with at least one published product - At least one collection set up (the default "all" collection works) - A storefront token from **Settings** > **For Developers** in your Fourthwall dashboard (starts with `ptkn_`) - A Vercel account Your storefront token starts with `ptkn_`. Keep it safe — it grants read access to your product catalog and collections. ## How to deploy the template to Vercel The fastest way to get started is the one-click deploy button on the vercel-commerce GitHub repository (https://github.com/FourthwallHQ/vercel-commerce). 1. Go to github.com/FourthwallHQ/vercel-commerce and click **Deploy with Vercel**. 2. Vercel prompts you to create a new repository and configure the project. Set these environment variables during setup: - `NEXT_PUBLIC_FW_STOREFRONT_TOKEN` (required): Your storefront token, e.g. `ptkn_...` - `NEXT_PUBLIC_FW_CHECKOUT` (required): Your Fourthwall store URL for checkout redirects, e.g. `vercel-shop.fourthwall.com` - `NEXT_PUBLIC_VERCEL_URL` (required): Your Vercel site URL for `sitemap.xml` and `robots.txt`, e.g. `fw-commerce.vercel.app` - `NEXT_PUBLIC_FW_COLLECTION` (optional): A specific collection handle to display instead of all products - `FOURTHWALL_WEBHOOK_SECRET` (optional): A secure random string for webhook-based cache invalidation 3. Click **Deploy**. Vercel builds and deploys your storefront automatically. You can set or update environment variables later through the Vercel dashboard or CLI with `vercel env`. ## How to run locally for development To customize the template before deploying, run it on your local machine: 1. Install the Vercel CLI: `npm i -g vercel` 2. Clone your repository and link it to Vercel: `vercel link` 3. Pull your environment variables: `vercel env pull` 4. Install dependencies: `pnpm install` 5. Start the dev server: `pnpm dev` Your storefront will be available at `localhost:3000`. ## Environment variables reference All environment variables for the vercel-commerce template: - **`NEXT_PUBLIC_FW_STOREFRONT_TOKEN`** (required). Your storefront token from **Settings** > **For Developers**. - **`NEXT_PUBLIC_FW_CHECKOUT`** (required). Your Fourthwall store URL for checkout redirects. - **`NEXT_PUBLIC_VERCEL_URL`** (required). Your Vercel deployment URL for sitemap and robots.txt. - **`NEXT_PUBLIC_FW_COLLECTION`** (optional). Collection handle to display a specific collection. - **`FOURTHWALL_WEBHOOK_SECRET`** (optional). Secret for HMAC-SHA256 webhook signature verification. - **`NEXT_PUBLIC_USE_FW_IMAGE_OPTIMIZATION`** (optional). Set to `"true"` to use Fourthwall's built-in image optimization instead of Vercel's. ## How checkout works When a supporter adds items to their cart and proceeds to checkout, they are redirected to Fourthwall's hosted checkout page. The checkout URL follows this format: `https://{your_checkout_domain}/checkout/?cartCurrency={currency_code}&cartId={cart_id}` You can style the checkout experience in your Fourthwall dashboard by selecting a simple theme (such as Clean Frame), applying consistent colors and typography, and connecting a custom domain like `checkout.yourstore.com`. For more details, see the Storefront checkout documentation at https://docs.fourthwall.com/storefront/checkout. ## Caching and Incremental Static Regeneration (ISR) The template uses Incremental Static Regeneration (ISR) to serve fast, cached pages while keeping product data up to date. - **Home page**: Pre-built at deploy time for USD, EUR, GBP, and CAD currencies. - **Product and collection pages**: Built on first request, then cached. Currency is part of the URL path (e.g. `/USD/product/my-product`) so each currency variant gets its own cached page. - **Auto-revalidation**: All pages revalidate every hour (`revalidate = 3600`). - **Cart**: Fetched on the client side so product pages stay fully static. This means your storefront loads quickly for supporters without requiring a server to render pages on every request. ## How to set up webhook cache invalidation For real-time product updates, configure Fourthwall webhooks to purge cached pages whenever you change a product or collection. 1. Set the `FOURTHWALL_WEBHOOK_SECRET` environment variable in your Vercel project to a secure random string. 2. In your Fourthwall dashboard, add a webhook pointing to `https://your-site.com/api/webhooks/fourthwall`. 3. Subscribe to these events: `PRODUCT_CREATED`, `PRODUCT_UPDATED`, `COLLECTION_UPDATED`. The template verifies each incoming webhook using HMAC-SHA256 signature verification, so only requests signed with your secret are processed. ## Image optimization By default, the template uses Vercel's built-in image optimization service. To use Fourthwall's image optimization instead, set: `NEXT_PUBLIC_USE_FW_IMAGE_OPTIMIZATION="true"` Both options resize and compress images for faster loading. Choose the one that fits your hosting setup. ## Analytics The template automatically fetches your analytics configuration from your Fourthwall store via `{NEXT_PUBLIC_FW_CHECKOUT}/platform/analytics.json`, cached for one hour. Google Tag Manager reads `window.*` variables set by this configuration, so any analytics tools connected in your Fourthwall dashboard (Google Analytics, Meta Pixel, etc.) work automatically on your custom storefront. If the analytics endpoint is unavailable, the template falls back to environment variable configuration. ## Frequently asked questions ## What is a collection handle? A collection handle is the URL slug that identifies a collection. The default "all" collection contains all your public products. To find a specific handle, go to **Collections** in your dashboard, click the collection, and copy the last part of the URL. ## Can I use this with a custom domain? Yes. Configure your custom domain in your Vercel project settings. You can also connect a custom domain for the checkout page through your Fourthwall dashboard. ## Do I need to rebuild my site when I add new products? No. With ISR, new product pages are built automatically on the first request. If you set up webhook cache invalidation, existing pages update within seconds of a product change. ## What happens if I don't set `FOURTHWALL_WEBHOOK_SECRET`? Your storefront still works, but product pages rely on the hourly auto-revalidation cycle to pick up changes. Setting up webhooks gives you near-instant updates.