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 NextBlog 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
  2. Database Integration - PostgreSQL on Vercel

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
  2. Sanity Integration

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

6.Sanity Webhook integration

7.Stripe Integration

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