--- title: Create and Deploy a Crystallize E-commerce Site with Vercel description: How to launch an e-commerce site using Next.js and Crystallize on Vercel in minutes. url: /kb/guide/deploying-crystallize-with-vercel canonical_url: "https://vercel.com/kb/guide/deploying-crystallize-with-vercel" published: 2025-11-03 last_updated: 2026-07-16 authors: Matthew Sweeney related: - /docs/projects/environment-variables/sensitive-environment-variables - /docs/concepts/deployments/git - /docs/concepts/deployments/preview-deployments - /docs/concepts/deployments/environments install_vercel_plugin: npx plugins add vercel/vercel-plugin --- ## Related pages > **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below. - [Vercel and Sitecore XM Cloud Integration](https://vercel.com/docs/integrations/cms/sitecore?from=related&source_path=%2Fkb%2Fguide%2Fdeploying-crystallize-with-vercel&source_site=vercel-kb&relationship=related) — Integrate Vercel with Sitecore XM Cloud to deploy your content. - [Getting started with Vercel](https://vercel.com/docs/getting-started-with-vercel?from=related&source_path=%2Fkb%2Fguide%2Fdeploying-crystallize-with-vercel&source_site=vercel-kb&relationship=related) — Install the Vercel CLI, add the Vercel Plugin or agent skills, and deploy your first project. - [How to deploy a Next.js online store with Stripe](https://vercel.com/kb/guide/how-to-deploy-a-next-js-online-store-with-stripe?from=related&source_path=%2Fkb%2Fguide%2Fdeploying-crystallize-with-vercel&source_site=vercel-kb&relationship=related) — Learn how to build and deploy a Next.js e-commerce store with Stripe payments on Vercel. This step-by-step guide covers - [Deploy a headless BigCommerce storefront with Vercel](https://vercel.com/kb/guide/deploy-headless-bigcommerce-storefront-with-vercel?from=related&source_path=%2Fkb%2Fguide%2Fdeploying-crystallize-with-vercel&source_site=vercel-kb&relationship=related) — Deploy a headless BigCommerce storefront using Catalyst and Next.js on Vercel - [How to Deploy a Vue.js Site with Vercel](https://vercel.com/kb/guide/deploying-vuejs-to-vercel?from=related&source_path=%2Fkb%2Fguide%2Fdeploying-crystallize-with-vercel&source_site=vercel-kb&relationship=related) — Create your Vue.js app and deploy it with Vercel. - [Getting started with Next.js, TypeScript, and Stripe Checkout](https://vercel.com/kb/guide/getting-started-with-nextjs-typescript-stripe?from=related&source_path=%2Fkb%2Fguide%2Fdeploying-crystallize-with-vercel&source_site=vercel-kb&relationship=related) — Add payments functionality to your Next.js applications with Stripe and deploy to Vercel. - [How to Deploy a Preact Site with Vercel](https://vercel.com/kb/guide/deploying-preact-with-vercel?from=related&source_path=%2Fkb%2Fguide%2Fdeploying-crystallize-with-vercel&source_site=vercel-kb&relationship=related) — Create your Preact app and deploy it with Vercel. Full cross-link map for this page: [/kb/guide/deploying-crystallize-with-vercel.graph.md](/kb/guide/deploying-crystallize-with-vercel.graph.md?from=related&source_path=%2Fkb%2Fguide%2Fdeploying-crystallize-with-vercel&source_site=vercel-kb&relationship=graph) [Crystallize](https://crystallize.com/) is a super-fast GraphQL based headless e-commerce service with super structured product information management (PIM). In this guide, you will discover how to create a [e-commerce site](https://furniture.superfast.shop/), powered by Crystallize and process payments using [Stripe](https://stripe.com/), and deploy it with [Vercel](https://vercel.com/). You can also check out the [live e-commerce demo](https://furniture.superfast.shop/) running on [Vercel](https://vercel.com/). ## Step 1: Creating Your API Keys Create a [Crystallize account](https://crystallize.com/signup). From the Crystallize dashboard, open the menu and select **Settings** then **Access tokens**. Enter a name and create your token, you will be provided with both an `access-token-id` and an `access-token-secret`. You will not be shown these again, so keep the window open until you have used them in [Step 2](https://vercel.com/guides/deploying-crystallize-with-vercel#step-2:-set-up-your-crystallize-project). If you do not already have one, [create a Stripe account](https://dashboard.stripe.com/register). From the Stripe dashboard, locate your API keys from the **Developers** link, you will need both the **Publishable** and **Secret** keys. Once both sets of keys are available, you can move on to creating your Crystallize project. ## Step 2: Set Up Your Crystallize Project [Set up a Crystallize project](https://crystallize.com/developers) with [`npx`](https://www.npmjs.com/package/npx) and move into the project directory: ```bash npx @crystallize/cli my-crystallize-project && cd my-crystallize-project ``` During the setup, you will be asked a series of questions that will customize the output. Select the following options: - Furniture demo tenant - Next.js + React - **Both** Vercel and a payment method - Stripe - Configure tokens and API keys now > **Note:** To select Stripe, navigate using the arrow keys and use the spacebar to select before pressing enter to confirm. Once you have selected these options, you will be asked to enter the API keys obtained in [Step 1](https://vercel.com/guides/deploying-crystallize-with-vercel#step-1:-creating-your-api-keys). Enter the information requested, after this has been completed, you no longer need to access the keys directly from either Crystallize or Stripe. ## Step 3: Adding Your API Keys as Secrets Using [Vercel CLI](https://vercel.com/cli), create [sensitive environment variables](https://vercel.com/docs/projects/environment-variables/sensitive-environment-variables) to securely store the API keys received. You can find these in the `.env` file created by the project setup in [Step 2](https://vercel.com/guides/deploying-crystallize-with-vercel#step-2:-set-up-your-crystallize-project). ```bash vercel secrets add CRYSTALLIZE-ACCESS-TOKEN-ID [your-crystallize-access-token-id] ``` ```bash vercel secrets add CRYSTALLIZE-ACCESS-TOKEN-SECRET [your-crystallize-access-token-secret] ``` ```bash vercel secrets add STRIPE-PUBLISHABLE-KEY [your-stripe-publishable-key] ``` ```bash vercel secrets add STRIPE-SECRET-KEY [your-stripe-publishable-key] ``` ## Step 4: Deploying Your Crystallize Site with Vercel To deploy your Crystallize site with [Vercel for Git](https://vercel.com/docs/concepts/deployments/git), make sure it has been pushed to a Git repository. Import the project into Vercel using your [Git provider](https://vercel.com/import/git) of choice. After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments#), and all changes made to the [Production Branch](https://vercel.com/docs/concepts/deployments/git#production-branch) (commonly "main") will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production).