Docs
Templates
NextCommerce

Installing and Configuring NextCommerce Template

In this part of the documentation we are going to show you how to Install and Configure Nextjs E-commerce templates.

Follow the steps to successfully install and configure NextCommerce Template

Steps

The E-commerce templates installation process is a bit different from the starter templates. We’ve used Sanity API, Webhook and other technologies that are not included on the starter templates.

Follow the steps below to configure the NextCommerce template.

  1. Installation (opens in a new tab)
  2. Database Integration - PostgreSQL on Vercel (opens in a new tab)

Note: you can use any PostgreSQL you want. Just save the database url in the env using this name:

DATABASE_URL=YOUR_DB_CONNECT_URL
  1. Authentication and DB Setup (opens in a new tab)
  2. Sanity Integration (opens in a new tab)

Follow the Sanity Integration guide to setup the project. After that take the Sanity ProjectID and title, and save them in the .env file under these variable names:

NEXT_PUBLIC_SANITY_PROJECT_ID=YOUR_PROJECT_ID
NEXT_PUBLIC_SANITY_PROJECT_TITLE=YOUR_PROJECT_TITLE

5.Sanity API integration (opens in a new tab)

6.Sanity Webhook integration (opens in a new tab)

7.Stripe Integration (opens in a new tab)

8.Algolia Integration (opens in a new tab)

  1. Admin privilege: For admin privilage add the admin emails on the env file under this variable:
ADMIN_EMAILS=demoadmin@gmail.com

This will set the user role to Admin.

How to create products

In this part of the documentation, we are going to show you how to create and publish a product from your admin dashboard.

Follow the steps below to create and publish a product:

  1. Go to Admin. It’s under /admin route of your website. Follow the steps to log in to sanity and make sure to add your URL to the CORS origins list. Once you’ve completed the login you’ll be redirected to your sanity admin. That’ll look something like this:

next commerce

I already added some demo products here, you’ll see the dashboard empty.

Now let’s go add a product to your store.

  1. Create a category: go to the category tab, and click on the pen icon to create a new category.

Fill out all the required fields then hit the publish button.

next commerce

  1. Create a product: go to the product tab and click on the pen icon. It’ll open up a form to create a new product like this:

next commerce

Fill out the form with all the necessary product data and hit the publish button. Your product will be live, now it’ll be visible on the storefront.

Video Tutorial

NextBlogResources