Integrating E-Commerce on Statamic Flat File CMS

In this latest Snipcart integration post, we’re going to get right into the thick of things. To keep it interesting, I’ve merged two very awesome topics: Statamic, and The Legend of Zelda universe. More specifically, I’ll show you how to integrate our HTML/JS-based shopping cart to Statamic’s flat file PHP-based CMS. No need to worry! It’s quite easy to use. In fact, Statamic allows you to create your website using their admin panel, or by directly editing your files.

I’ll also take you through the IIS installation process, which, unfortunately, was not as straightforward as I had expected.

Installing Statamic on Windows

As some of you know, Snipcart is run primarily on Windows as the bulk of our backend code is written in .NET. For this demo, I was looking to run Statamic on my local IIS.

That being said, according to the Statamic docs, I was missing a few critical pieces to make it all run like a well-oiled machine. So, here’s what I did:

First, I installed PHP. :) I installed it using Web Platform Installer, which is relatively straightforward. It installs the IIS bindings for you.

Then, I copied all of the Statamic files to my snipcart-statamic folder. Before copying the files, I changed my permission settings for the IUSR user to grant complete control.

For this to work in ISS, you’ll have to rename the sample.web.config file to web.config file. This file registers the URL rewrite rules that will be necessary for Statamic to run smoothly.

Please note that I had to remove the second rule from the web.config file. We’ll be in touch with the folks at Statamic about this. I have a feeling that it might be causing some issues.

The next step is to create the IIS site itself. I chose to go with IIS Powershell cmdlets to create it in my command prompt.

New-Website -Name -PhysicalPath D:\Dev\snipcart-statamic -HostHeader

I created the new site using IIS and set the host header to to make it accessible via

Then, I created an entry for my hosts file to map the domain and link it to my local IP address. I love using the awesome PsHosts module for this. Once it’s installed, you can manage your hosts file from the command line.

Add-HostEntry -Name -Address

When I hit my URL in local, I got this error message:

MissingDependencyException in ImageManager.php line 123:
PHP Fileinfo extension must be installed/enabled to use Intervention Image.

To get it working, I had to enable the php_fileinfo extension in my php.ini file.

Luckily, it was a quick fix! All I had to do was add this line to the php.ini file:


Then, I hit refresh...and BAM! Statamic was up and running.

Once you’ve completed all of these steps, you can begin the Statamic installation by heading on over to in your browser. Just follow the setup instructions, and you should be good to go.

Saving Snipcart API Key

For Snipcart to function, you’ll have to input your public API key as you implement our JavaScript file. The best way to store it in Statamic is to use Globals.

To get it working, create a new file named Snipcart.yaml in site/content/globals. It’s important that you attribute a fieldset to the file if you want a nice Control Panel form. Next, create the fieldset that will be responsible for holding the API key specification textbox.

Create a new file named snipcart_config.yaml in site/settings/fieldsets folder. This is what the file content should look like:

title: Snipcart
hide: true
    type: text
    display: Snipcart public API Key
    instructions: "Please open [Snipcart's dashboard]( and enter your **public** API key."

Once that’s done, open the Snipcart.yaml file that was created earlier, as you’ll need to specify the fieldset you plan on using:

fieldset: snipcart_config

Save the file and refresh your browser. In the menu, under the Globals section, you should see Snipcart:

Now, when you click on Snipcart, you should see the API key form. Once you’ve retrieved your public Snipcart API key, paste it right into the box and hit that save button!

Next, you’re going to include the Snipcart files required for your site layout. Open default.html located in the themes/redwood/layouts folder.

Before you close the <head> tag, include this snippet:

{{ if Snipcart:snipcart_api_key }}
    <script src=""></script>
    <script src="" data-api-key="{{ Snipcart:snipcart_api_key }}"></script>
    <link href="" type="text/css" rel="stylesheet" />
{{ /if }}

Basically it will include Snipcart and it's dependencies if an API key has been set.

Creating product fieldset

Now, here’s where Statamic gets real! First, you’ve got to create a new fieldset that will represent a product. Open the snipcart-statamic folder in your favorite editor. Lately, I’ve been using VS Code.

Locate the site/settings/fieldset. Open this folder and create a new file named product.yaml.

Let's keep it simple... for now! I used this configuration for my product attributes:

title: Product
hide: true
    type: title
    display: Name
    type: text
    display: Price
    validate: numeric
    type: assets
    display: Image
    container: main
    folder: img
    max_files: 1
    type: markdown
    display: Content

Once that’s all done, you’ll want to create a new collection for all of your products. Open the site/content/collections folder and create a new folder named products. Then, create a new file in this folder named folder.yaml. This file will be responsible for instructing your control panel as to how products should be created.

title: Products
fieldset: product
template: product/details
  - title
  - price

From that point on, the collection will use the product fieldset created earlier. Now, when you go to the control panel to create a new product, the form will contain the specified fields. Here's a screenshot:

It’s also important to update any Statamic routes used to register the product details page access route. Open the site/settings/routes.yaml file and add this entry: products: '/products/{slug}' under the collections node. Here’s what my file looked like when I was done with the modifications:

  blog: '/blog/{year}/{month}/{day}/{slug}'
  things: '/things/{slug}'
  products: '/products/{slug}'
  tags: '/blog/tags/{slug}'
  /blog/tags: blog/taxonomies
  /search: search
  /users: user/index
  /users/{username}: user/profile
  /account: user/account
  /login: auth/login
  /register: auth/register
  /forgot-password: auth/password-forgot
  /reset-password: auth/password-reset

Now, products can be created in the Statamic control panel. The next step is to make the products in the public site visible and buyable.

Listing products

First, you’ll want to start by creating a new page in the site/content/pages folder. Create a new folder named 6.products. Then, create a file named in the latter.

title: Products
nav_title: Store
template: products/index
mount: products
id: 1227405f-fd88-4c7f-919f-5cf708814665

Here are our wonderful Zelda related products.

Setting metadata on the page is necessary if you want items to be visible via the navigation. Plus, it’ll allow us to map the template that we’re going to create later on. I’ve set the nav_title to Store so that a new section appears in our menu named Store.

Now, refresh your Statamic website and have a look at the menu:

You’ll notice that if you click on it, it’s empty! And, that’s only because we haven’t created the template yet. Let’s get to it!

Creating templates

In the theme folder, I’ve decided to stick with the default label that comes with every basic Statamic installation. Now, create a new folder named products in this location: themes/redwood/templates. Then, create two files in this folder. The first one, index.html will hold the template for the main section where all of the products are listed. The second one, details.html, will hold the details for a single product. Remember that this value was set: template: product/details when we created the products collection.

Let’s start with index.html. This template will be responsible for listing all of the sales products.

<section class="container-fluid regular">

        <h1>{{ title }}</h1>
        {{ content_raw wrap="h2" }}

    <div class="tiles">
        {{ collection:products }}
        <a href="{{ url }}" class="item">
            <div class="image" style="background-image: url('{{ image }}');">
                <h3 class="caption">{{ title }}</h3>
        {{ /collection:products }}


To get the specific details of individual products, you’ll have to create multiple clickable tiles. However, to see these details, you’ll have to create a template. Using the same folder we just created, index.html template, create a new file named details.html.

I know, I included some inline styles which aren’t exactly ideal. But, it’s what was most simple for the purpose of this demo.

Here's what your details.html file should look like:

<section class="regular">

        <h1>{{ title }}</h1>
        {{ description wrap="h2" }}

    <article class="content">

        {{ if image }}
            <img style="width: 200px; margin: 20px;" src="{{ image }}" class="intro-image" align="left">
        {{ /if }}

                Price: <strong> {{ price | round:2}} $</strong>
                <button class="snipcart-add-item btn btn-primary"
                data-item-name="{{ title }}"
                data-item-price="{{ price }}"
                data-item-description="{{ description }}"
                data-item-url="{{ url }}"
                data-item-image="{{ image }}"
                data-item-id="{{ id }}">Buy now</button>
                {{ content }}

You’ll notice that I’ve added the buy button required for Snipcart and the attributes added in the product fieldset.

If you click on the buy button, Snipcart should pop up! HOORAY!


You see, Statamtic is fairly easy to use and setup. The documentation is thorough and complete. Not to mention, the concepts are easy to understand and implement. I’d say that it took about 2 hours to set this demo up. And that’s including the IIS installation, which, in reality, was the longest part of this process.

Overall, I really enjoyed working with Statamic… despite the fact that I’m not really a PHP kinda guy! ;)

Take a peek inside our store demo, right here and feel free to browse the source code on Github! Enjoy!

About the author

Charles Ouellet
Co-Founder & Product Owner

Charles has been coding for over 16 years (if we count his glory days with HTML/PHP). He's the founder and lead developer behind Snipcart and has spoken at several web development events including the WAQ, VueToronto and WinnipegJS. Formerly a backend programmer, he's now fluent in JavaScript, TypeScript, and Vue.js. Charles is also a big believer in the Jamstack.

Follow him on Twitter.

An Easy Guide to Enhanced Ecommerce Analytics with Google Tag Manager

Read next from Charles
View more

36 000+ geeks are getting our monthly newsletter: join them!