Sample eCommerce Site with Snipcart

Are you ready to take your business to the next level and open an online store using prismic.io? In this project we’ll show you how to get an eCommerce site up and running in no time. We'll be integrating prismic.io with the lean & powerful shopping cart service, Snipcart.

We provide you with all the source code you need to get this example eCommerce site working. After you set up your content repository we will show you how to configure the code, preview your content, deploy your online store to the web, and get set up on Snipcart.

You have two options to get started: quick install or step-by-step guide.

Option 1: Quick Install

The first way to get started is to launch this project using the prismic.io command line tool. With one command you can install the project files, create a prismic.io repository, and automatically set up the custom types. In your terminal, run the following code to install the command line tool.

Copy
      npm install -g prismic-cli
    

Once that is installed, you can run the following code to launch the project.

Copy
      prismic theme https://github.com/prismicio/nodejs-example-snipcart
    

This sets everything up for you, so you can skip down to the "Write some content" section and go from there!

Option 2: Step-by-step Guide

If you prefer to set everything up yourself, here are the steps to create a content repository and configure the custom types.

Start a content repository

A content repository is where you define, edit and publish your content.

Create Repository

Create a “Product” custom type

Custom types allow you to define and configure fields for your content.

We will configure our product pages with a Unique Identifier (UID) for constructing page urls, product release date, title, image, price, description, related product links, and all the information we need to integrate with Snipcart.

We will set up a number of products for our store, so we will make this a Repeatable custom type. In the repository you've just created, go to Custom Types, create a new type, select Repeatable Type, and give it the name Product. prismic.io will automatically assign it an API ID of "product". Once created, paste the following into the JSON editor and save.

Copy
      {
  "Main" : {
    "uid" : {
      "type" : "UID",
      "fieldset" : "Unique Identifier",
      "config" : {
        "placeholder" : "UID"
      }
    },
    "date" : {
      "type" : "Date",
      "fieldset" : "Date Added"
    },
    "title" : {
      "type" : "StructuredText",
      "fieldset" : "Product Title",
      "config" : {
        "single" : "heading1",
        "placeholder" : "Title..."
      }
    },
    "categories" : {
      "type" : "Group",
      "fieldset" : "Categories",
      "config" : {
        "fields" : {
          "link" : {
            "type" : "Link",
            "config" : {
              "select" : "document",
              "customtypes" : [ "category" ],
              "placeholder" : "Link to a category"
            }
          }
        }
      }
    }
  },
  "Product Info" : {
    "image" : {
      "type" : "Image",
      "fieldset" : "Product Image",
      "config" : {
        "constraint" : {
          "width" : 640
        },
        "thumbnails" : [ {
          "name" : "Listing",
          "width" : 300,
          "height" : 300
        }, {
          "name" : "Snipcart",
          "width" : 50,
          "height" : 50
        } ]
      }
    },
    "price" : {
      "type" : "Number",
      "fieldset" : "Price",
      "config" : {
        "label" : "USD",
        "min" : 1,
        "placeholder" : "Insert Price..."
      }
    },
    "description" : {
      "type" : "StructuredText",
      "fieldset" : "Product Description",
      "config" : {
        "multi" : "paragraph,em,strong,hyperlink",
        "placeholder" : "Description..."
      }
    }
  },
  "Related Products" : {
    "relatedProducts" : {
      "type" : "Group",
      "fieldset" : "Link to related products",
      "config" : {
        "fields" : {
          "link" : {
            "type" : "Link",
            "config" : {
              "select" : "document",
              "customtypes" : [ "product" ],
              "placeholder" : "Link to a product"
            }
          }
        }
      }
    }
  },
  "Snipcart Data" : {
    "snipcartDescription" : {
      "type" : "Text",
      "fieldset" : "Snipcart Data",
      "config" : {
        "label" : "Brief Description",
        "placeholder" : "Brief Description..."
      }
    },
    "snipcartWeight" : {
      "type" : "Number",
      "config" : {
        "label" : "Weight (g)",
        "min" : 1
      }
    },
    "snipcartMaxQuantity" : {
      "type" : "Number",
      "config" : {
        "label" : "Max Quantity",
        "min" : 1
      }
    }
  }
}
    

Create a “Category” custom type

The category custom type will be a simple one used to organize products into groups on the site. We will need more than one category to organize our products, so this custom type will also be a Repeatable custom type.

Go to Custom Types, create a new type, select Repeatable Type, and name it Category. prismic.io will automatically assign it an API ID of "category". Once created, paste the following into the JSON editor and save.

Copy
      {
  "Main" : {
    "uid" : {
      "type" : "UID",
      "fieldset" : "Unique ID",
      "config" : {
        "placeholder" : "Unique ID..."
      }
    },
    "title" : {
      "type" : "StructuredText",
      "fieldset" : "Category Title",
      "config" : {
        "placeholder" : "Category Title...",
        "single" : "heading1"
      }
    }
  }
}
    

Create a “Layout” custom type

The layout custom type will be another simple custom type. It will consist of a title used to identify the document, an image for the site logo, and a repeatable group of categories that will make up the main navigation.

We will only need one instance of this custom type, so it will fall into the category of Single custom type.

Go to Custom Types, create a new type, select Single Type, and name it Layout. prismic.io will automatically assign it an API ID of "layout". Once created, paste the following into the JSON editor and save.

Copy
      {
  "Main" : {
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "placeholder" : "Document title...",
        "single" : "heading1"
      }
    },
    "logo" : {
      "type" : "Image",
      "fieldset" : "Site Logo"
    },
    "mainNav" : {
      "type" : "Group",
      "fieldset" : "Main Navigation",
      "config" : {
        "fields" : {
          "label" : {
            "type" : "Text",
            "config" : {
              "placeholder" : "Link label"
            }
          },
          "link" : {
            "type" : "Link",
            "config" : {
              "select" : "document",
              "customtypes" : [ "category" ],
              "placeholder" : "Link to a category"
            }
          }
        }
      }
    }
  }
}
    

Write some content

1) Create a couple of categories

Start by creating one or two product categories. Go to Content, hit New, and select the Category type. Make sure to fill the mandatory UID field that is used for the category page’s url.

Save and publish!

2) Create some products

Start by creating some product pages. Go to Content, hit New, and select the Product type. Enter a unique ID for the product page’s url in the UID field, and fill in the content for the product. Be sure to add a category to at least some of the products. Then save and publish!

3) Fill in the layout

Finally we need to fill in our layout custom type. Go to Content, hit New, and select the Layout type. Add a title such as “Site Layout” so you can easily identify the layout in your documents. Then include a logo if you have one, and add your categories for the main navigation.

For each category you want to add to the navigation:
a) Add a Link Label
b) Select the appropriate category

Save and publish!

Get set up on Snipcart

If you don’t already have a Snipcart account you can sign up for free to get started.

When signing up, ignore the field asking for the website url. We will update this later.

Run the website

Let’s see if things are working. If you didn't do the quick install, you will need to download the website source code.

Download code

Set your prismic.io content repository API endpoint in your project’s config file.

Copy
      // In prismic-configuration.js set up your API endpoint:
apiEndpoint: "http://your-repo-name.prismic.io/api",
    

Next we need to add your Snipcart key to the project.

From your Snipcart dashboard, click on Account then API Keys to get your Public Test API Key. Copy and paste this code into your project's config file.

Copy
      // In prismic-configuration.js
snipcartKey: 'your-snipcart-api-key',
    

Fire up a terminal (command prompt or similar on Windows), point it to your project location and run the following code:

Copy
      npm install
npm install -g nodemon
nodemon
    

You will not be able to fully go through the checkout process until you have launched the site live and correctly set up snipcart as shown below.

Deploy & go live

An easy way to deploy your Node.js application is to use Heroku. Just follow these few simple steps once you have successfully signed up and installed the Heroku toolbelt:

Create a new Heroku application

Copy
      $ heroku create
    

Initialize a new Git repository

Copy
      $ git init
$ heroku git:remote -a your-heroku-app-name
    

Commit your code to the Git repository and deploy it to Heroku

Copy
      $ git add .
$ git commit -am "make it better"
$ git push heroku master
    

Ensure you have at least one node running

Copy
      $ heroku ps:scale web=1
    

You can now browse your application online

Copy
      $ heroku open
    

Connect to Snipcart

The last step is to update your Snipcart settings to point to your new heroku site online.

Go to your snipcart dashboard, click on Account then Domains & URLs. Enter your heroku website url under the Default Website Domain and save your settings.

Your eCommerce site should now be up and running! Try viewing your categories, adding items to your cart, and checking out. While your snipcart account is in Test mode, no purchases will actually be made.

Once you are ready to truly begin selling your products online, you can set your Snipcart account from Test to Live from the Snipcart dashboard.

Update your Snipcart API Key

If/when you set your account to Live, you will need to replace your snipcart API Key in your configuration file with your Public Live API Key.

All set up!

Congrats, you are now selling your products online using prismic.io and Snipcart! You should easily be able to modify this example eCommerce site to create your own online store: just edit the custom types, stylesheets, and templates to fit your design.