Integrating Snipcart with Statamic in 5 Easy Steps

For this new Snipcart integration post, we're going to dive into two awesome things: Statamic, and The Legend of Zelda universe. More specifically, I'm going to show you how to integrate our HTML/JS-based shopping cart with Statamic's flat file PHP-based CMS. Quite easy to use, Statamic allows you to create your website using their admin panel, or by directly editing your files.

Since our previous integration with a flat file CMS (Kirby) was quite popular, we decided to keep going down that road a bit.

So let's get our geek on and see how we can build a shop with Statamic and start selling an Ocarina of Time and Majora's Mask.

Step 1 - Create your website with Statamic

For this post, I'm assuming you already know how to set up and use Statamic. If you don't, I strongly recommend taking a detailed look at their documentation first. You can get started with the CMS by purchasing one of their personal or professional license on their home page.

Step 2 - Create your Markdown product files

With Statamic, you can use an admin panel to create your different content files. Since this blog tends to be developer-oriented, I chose the other option here: manually creating and editing my Markdown files.

First important thing to know here is that all your site's content will be located in a _content folder. Your folder should be at the root of your website. Create a folder called "1-product" and create two new files in it. Name them "" and "".

Let's take a look at my files:

id: 1
title: Majora's Mask
price: 9000
weight: 23
url: /
description: The famous Majora's Mask
![Image of Majora's mask](assets/img/majora_mask.png)

Majora's Mask (pronounced /məˈdʒɔ:ɹə/ mə-JAW-rə) is the primary antagonist in the 
game of the same name, once used by an Ancient Tribe as a form of hexing and torture.
The mask is primarily seen being worn by the game's supposed antagonist, Skull Kid, 
who uses its dark magic to wreak havoc across Termina.

id: 2
title: Ocarina 
price: 7500
weight: 10
url: /
description: Link's Ocarina of Time
![Image of Ocarina](assets/img/ocarina.png)

The ocarina /ɒkəˈriːnə/ or /oʊkəˈriːnə/ is an ancient wind musical instrument—a 
type of vessel flute. Variations exist, but a typical ocarina is an enclosed space 
with four to twelve finger holes and a mouthpiece that projects from the body. 
It is traditionally made from clay or ceramic, but other materials are also used—such 
as plastic, wood, glass, metal, or bone. An example of an ocarina made of an animal 
horn is the medieval German gemshorn. 

As you can see, I have put all my Snipcart product attributes in the file header to access them easily in my HTML. The rest of the content is simple Markdown. Oh, and a big shoutout to Wikipedia for helping me find those awesome product descriptions!

Step 3 - Organize your folders hierarchy

With Statamic, you need the create a theme folder where you will put your HTML layouts and templates. It is one of the features I like the most about this flat file CMS. You can create a lot of themes for a website, and you can change your current theme whenever you want! So first, you need to find the _themes folder and create a "zelda-shop" folder. In this folder, you will need to add layouts and templates folders. Here is my folders' hierarchy:

  • _themes
    • zelda-shop
      • css
      • img
      • layouts
      • templates

You can also put your theme-specific CSS in this folder.

Step 4 - Create your layout file

In this folder, you will need to create your layout for the Zelda shop. By default, Statamic will render the layout name default.html, so let's create it. The most important thing, like always, is to add Snipcart dependencies in the head tag of your layout:

<!doctype html>
  <meta charset="utf-8">
  <title>{{ _site_name }}</title>
  <link href=",700,400italic,700italic" rel="stylesheet">
  <link rel="stylesheet" href="{{ theme:css }}">
  <link rel="icon" type="image/png" href="{{ theme:img src="favicon.png" }}">

      data-api-key="YOUR API KEY"></script>
  <link id="snipcart-theme"
  <div class="container">
    <div class="row">
      <section class="span10">
        <h1>{{ _site_name }}</h1>
      <section class="span10">
        {{ layout_content }}

As you can see, using a layout is different than using partial views. Instead of creating a footer file, a header file, etc., we have one file, a layout, and we tell Statamic where to change the content by writing {{ layout_content }}. The attribute _site_name is usually in your settings.yaml file. If what I'm saying sounds like ancient Hylian, then I recommend you to take a look at Statamic's documentation. And if you don't know what ancient Hylian is neither, then I highly recommend playing the Legend of Zelda games!

Step 5 - Create your template file

Now we need to create our template file. This file will be used to render our product blocks with an "add to cart" button. To do so, you need to create a templates folder and create a new HTML file called "default.html". In this file, we are going to loop in all the products and display all our attributes from our Markdown files.

{{ entries:listing folder="product" limit="10" }}
 <div class="block entry">
      <h2 class="entry-title">{{ title }}</h2>
    {{ content }}
    <a href="#"
      data-item-id="{{ id }}"
      data-item-name="{{ title }}"
      data-item-price="{{ price }}"
      data-item-weight="{{ weight }}"
      data-item-url="{{ url }}"
      data-item-description="{{ description }}">
        Add to cart
{{ /entries:listing }}

So the first line of code we can see is the entries listing statement. In this statement, we set the context to product so Statamic will get the content from this specific folder. After that, we have our HTML. I start by adding a header with the title of the product in it, then I put the Markdown file content, and finally the "add to cart" button. As you probably noticed, I use the Markdown file attributes (id, title, price, weight, URL and description) to populate my Snipcart button.

Once you've gone through these 5 steps and played a bit with the CSS (like I did here), you should get something like this:


I won't lie, the geek in me was pretty proud to show this quick demo shop to my colleagues. :)


By ditching databases and focusing on folder/file-based site architectures, flat file CMS such as Statamic make for great web development experiences. Sites built with those types of CMS are fast, more secure, simple and cheaper than most dynamic sites. I had lots of fun playing around with Statamic, and I believe there's a very cool e-commerce fit with Snipcart.

I sincerely hope you enjoyed this post. If you found it interesting or entertaining, please, take a second to share it on Twitter. Feedback and questions regarding this Snipcart integration are welcomed in the comments below. And if you'd like us to look into any other CMS integration, don't hesitate to mention it in the comments or via email. We accept all challenges!

Suggested posts: