Static Site E-Commerce: Integrating Snipcart with Roots

Editor's note: Roots is now unmaintained by its creators at Carrot Creative. Here's our tutorial for its successor Spike, a webpack-powered static site generator.

If you've been reading this blog for the past year, chances are you came across a handful of posts regarding static web development and e-commerce. Snipcart, as an HTML/JS-based shopping cart solution, is a wonderful fit with static sites. So we try to nurture our dynamic (pun intended) relationship with static web dev communities as much as possible. Not only because our tool is a great match with static site generators, but also because, like our friend Mathias from Netlify, we're convinced they really are the next big thing. Why? Well, to put it shortly: they're fast, cheap, simple, and secure. We believe that static site performance, among other things, fosters e-commerce success.

For this post, I'm going to show you how easy it is to sell online with Snipcart and a Roots static site. Roots is a static site generator developed by Carrot Creative, a digital agency under the Vice umbrella building great web experiences for international clients.

Since the folks at Carrot built the tool, and since I recently became a vegetarian, we'll be learning how to sell carrots in this quick demo. Yup, carrots.

Ready? snipcart-static-site-ecommerce-roots-carrot

Let's do this.

What's Roots exactly?

Like many now-famous players in the static world (think Jekyll, Middleman, Hugo), Roots is at its core a static site generator, i.e. it renders static HTML, CSS and JavaScript files. It's built on Node.js, well-documented and can be used for an impressive array of small to medium front-end projects.

We suggest starting by checking out the detailed video overview on their home page; it'll give you a clearer picture of what Roots really is.

Now let's go sell those carrots, shall we?

Step 1: Install Roots

You'll have to start by installing the generator itself. You can do this by following the installation steps on the Roots website.

Step 2: Create your "Bunny Bites" Roots site

Now let's create your new website using the roots new [website-name] command:

 roots new bunny-bites
 roots watch

Step 3: Include Snipcart's assets into your layout

Third step is to add Snipcart's JavaScript and CSS files into the layout.jade file:

doctype html

    meta(http-equiv='X-UA-Compatible', content='IE=edge, chrome=1')
    meta(name='description', content='description of your site')
    meta(name='author', content= "author of the site")
    title= _path

    != css()

    link(id='snipcart-theme' rel='stylesheet' href='')
    script(id='snipcart' src='' data-api-key='{YOUR KEY}')

    block content
    != js()

Step 4: Use your first Roots library!

Now let's try and put this little shop together. We'll be using the roots-dynamic-content library to generate our product files and import them to our Roots site. To do so, run:

npm i dynamic-content -S

Then add the following lines into your

dynamic = require 'dynamic-content'
module.exports =
  extensions: [

Step 5: Create the products

To let the root-dynamic-content library work its magic, we need to create a new "products" folder at the root folder. Then, we'll add three products inside this folder: baby-carrot.jade, carrot-seeds.jade, carrot.jade. Let's take a look at our carrot product for instance:

id: 1
name: 'Carrot'
price: 3
weight: 2
description: "What's up, Doc?"
image: ""

Step 6: Build the store

Now that we've got ourselves some awesome products, we need the actual store to sell them! Inside your index.jade file, you will need to iterate on each product, then build your buy buttons:

extends layout

block content
  h3 Welcome to Bunny Bites!
    each product in site.products

Ladies and gentlemen, we are ready for lift-off. Our store can now be used to spread vegetarian propaganda all over the world wide web; yay!



Step 7: Deploy on Netlify

If you've read our blog a bit, you know we love to use Netlify in our static site e-commerce series. Their awesome CDN-based hosting allows developers to focus on code while their tool builds, deploys and hosts their static sites.

First, we will install the Netlify command line tools:

npm install netlify-cli -g

Then, in the root of my project, we'll init a new Netlify site. We can't use the simple netlify deploy command because we are using a static site generator. We will use what Netlify calls Continuous Deployment. Run the following command in any terminal:

netlify init

You will then have a few simple questions to answer. After that, you'll be asked to enter your GitHub credentials in order to create a SSH Key on your behalf. Once it's done, you shouldn't have to enter your credentials again.

Once you've went through this quick process, the website will be created with a random name. I updated my site's name because I really wanted it to be Bunny Bites:

netlify update -n bunny-bites

After about a short minute, my site was deployed.

And that's it; my site is now built, deployed and blazing fast!

Check out our GitHub repo for the demo code and website. :)


Integrating Snipcart with Roots was simple, fun and, more importantly, fast.

Today, thanks to the vast range of 3rd party tools available, creating great, fast static e-commerce experiences is now more than ever within reach of front-end developers. In that regard, we invite you to check out the following guest post we published on the Netlify blog:

And like the folks at Carrot proved by integrating Roots and Contentful (API-first CMS) to their web development workflow, static site content can also be managed and updated by non-technical users. A world of possibilities is really opening with modern static web tech, and we're thrilled to see where it'll take us.

Finally, here's hoping all the carrots you sell with Roots & Snipcart empower cooks all over the world to offer incredible carrot soups and delicious carrot cakes and ... all right, leaving now ---> [].

Our integrations with Middleman, Jekyll and Hugo can be found in the Suggested posts section under this article.

Any questions concerning this Snipcart integration with Roots? Other static site generators you'd like us to cover on the blog series? The comments section is all yours, friends! And if you enjoyed this post, or if you happen to really like carrots, take a second to share it on Twitter!

Suggested posts: