Static Site E-Commerce: Integrating Snipcart with Hugo

That's right, we're diving into the fast-moving world of static web development once again. Our previous posts on handling e-commerce with static site generators such as Middleman and Jekyll were quite successful, so why stop there, huh? So ladies and gentlemen, for the third time in a row, we're going to prove how easy it is to set up e-commerce on static websites. And this time, we chose to integrate Snipcart with the cool tool everybody's been talking about: Hugo.

Hugo? Who's that guy?


Hugo could mean different things for different people. If you're a bookworm, for instance, you might be thinking about Les Misérables' legendary author. And if you're a cinephile, you might be thinking about the little boy in Scorsese's 2011 film. But if you're a developer (if you're reading this blog, you probably are), here's what you should be thinking when you read Hugo: blazing fast, easy-as-hell static site generator.

Written in Go by Steve Francia, Hugo comes off as one of the most efficient ways we've seen to build, manage and update modern static sites. It's easy to install on any platform; you can host it anywhere (we suggest Netlify), and its build times are just off the charts (~1 ms per page). If you like web performance as much as we do, we're guessing you're going to like this Hugo guy.

Today, I'll show you how to use Snipcart and Hugo to create an old school Star Trek shop on your static site. Why Star Trek, you ask? Because we already did Star Wars two weeks ago.

Step 1 - Create your static website with Hugo

Disclaimer: Integrating Snipcart with Hugo is going to be easy as hell.

First of all, you need to install Hugo on your computer and create a new website. It will take you maybe 10 minutes following Hugo's documentation. Of course, we advise you to get familiar with Hugo and its documentation before looking into the Snipcart integration.

Done? Great. Let's get to it.

Step 2 - Create your data files

Okay now, let's set up our products: a Klingon dictionary and a phaser. Go to the data folder and create a new "products" folder. After that, create two product files called dictionary.toml and phaser.toml. With Snipcart, the products information needs to be stocked in a data file. And with Hugo, you can use different file types like YAML, TOML or JSON to stock data information. As you can see, in this case, we'll use TOML files.

Let's take a look at our files:

phaser.toml (the old one, of course!)
id = "2"
title = "Captain Kirk's phaser"
description = "The Original Series Phaser comprises a small, hand-held Type I Phaser, which slots into a larger Type II Phaser body with a removable pistol-grip."
url = "/"
imgUrl = "/assets/img/phaser.jpg"
price = "145.98"
weight = "15"
id = "1"
title = "Klingon dictionary"
description = "nIvbogh tlhIngan dictionnary qaStaHvIS veng SuvwI'"
url = "/"
imgUrl = "/assets/img/dictionary.jpg"
price = "34.87"
weight = "15"

Step 3 - Create your templates

Next step is to create the different layouts for our site. The most important is the header template where we will add the Snipcart dependencies. We will also create a main template where we will loop inside of our products to show a summary and add a Snipcart buy button.

To do so, go to the Hugo layouts folder and create a index.html template. This file will be used as the default file and will be the first one to be generated by Hugo.

{{ partial "header.html" . }}
<section class="main">
    {{ range $.Site.Data.products }}
        {{ partial "product.html" . }}
    {{ end }}   
{{ partial "footer.html" }}

As you can see, we import a header.html, footer.html and item.html file. Let's take a detailed look at these files. Before going further, go to the layouts folder again and create a "partials". If you don't put your partials file in this folder, Hugo won't be able to recognize them as partial templates and the {{ partial ... }} syntax will not work at all. The other important thing to know about this file is the dot "." after item.html. It means that you include in the item.html template the current product data file $*.


Like I said above, this file is the most important one. It's a simple HTML header file with Snipcart dependencies. Create it in the partials folder:

<!DOCTYPE html>
<html xmlns="" xml:lang="en" lang="en-us">
  <link href="" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.14" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

  <title> Snipcart integration in Hugo! </title>

    <script type="text/javascript"
    <link id="snipcart-theme" type="text/css"
  <h1>Star Trek shop</h1>

Next step is to create the footer partial template to complete the core of our HTML file.

        2015 - Snipcart integration with Hugo

Finally, we need to create the template where we will show our Star Trek product details. Name the file product.html.

<div style="float:left;width:30%">
  <h2 id="title">{{ .title }}</h2>
        <img width="300" src="{{ .imgUrl }}" />
        {{ .description }}
        <a href="#"
        data-item-id="{{ .id }}"
        data-item-name="{{ .title }}"
        data-item-price="{{ .price }}"
        data-item-weight="{{ .weight }}"
        data-item-url="{{ .url }}">

Since we passed the current product file in our index.html template, we can now use every data fields in our TOML files. Here, I used them to populate my Snipcart buy button, add the product title and a description of the product.

After that, you can start your Hugo server and test your website. It should look something like that:


Step 4 - Deploy, phase your enemies and learn Klingon


Finally, we decided to deploy our website using the amazing service by our friends at Netlify. Using their interface, it was very easy to deploy our website in a few seconds. Here's a sneak-peek of our old school Star Trek shop:


Netlify will automatically pull your code on GitHub and deploy your website. You can see our beautifully crafted demo at We would like to thank our designers and integrators for the hard work they have put in building the UI in this demo!


Our job here is done, comrades! Hugo is so powerful and lean that you only need to go through those few steps to create a Star Trek shop with Snipcart. Static site generators really are a good match for our HTML/JS shopping cart, and Hugo's no exception. I invite you to clone the site on our GitHub and add the Klingon dictionary to the cart. It will surprise you I promise! Now go galloping around the cosmos, young friends.

Got any questions regarding this Snipcart integration with Hugo? Any other static site generators you'd like us to cover on the blog? Hit the comments for any questions, suggestions or casual Klingon talk. And if you enjoyed this post, take a second to share it on Twitter!

Suggested posts: