Integrating Snipcart with Craft CMS: A Child's Play!

This week, we came accross a dicussion on Google+ about Snipcart’s integration with Craft, a PHP CMS. To be honest, we had never heard of the CMS before that discussion. Taking a quick look at the CMS, we saw why the community seemed very enthusiastic and engaged. On the technical side, as a developer, I found the CMS well built, easy to get started with and seemingly offering a lot of flexibility. And since the beauty of Snipcart is its ability to easily turn any CMS into a powerful e-commerce solution, we decided to take on the challenge!

Noticing an interest from the community and being fundamentally geeks, we decided to create a quick boilerplate to see if it was easy to integrate Snipcart with Craft. Below are the steps we went through to achieve the integration.

The first step is to install Craft (I won't explain how to do it; the Craft team already did it in their excellent documentation). Once the installation is completed, simply login into the Craft admin and go to Settings. You will have to create the fields that will be required to define a Snipcart product. In the settings, click on Fields and create 2 new fields:

  • Description (Plain Text)
  • Price (Number, 2 decimals digit)

Craft fields

Once you're done, go back to Settings, then Sections. Personally, I had some sections that were already configured and since I don't have Craft Pro, I was able to only create one Channel section, so I deleted the other sections. Now hit New section and give it the name you want (I used Store). Section type must be Channel as we will be doing a product listing with buy buttons directly on the list.

  • Name: Store
  • Handle: store
  • Section Type: Channel
  • Uncheck Entries in this section have their own URLs

Craft new section

You now have to edit the entry types to add the fields that you created earlier. Once the section is created, click on Edit entry types (1), then click on Store entry types and then go to the Field Layout tab. I created a new tab that I called Product information and dragged Description and Price fields in it.

Craft field layout

Most of the configuration is now done; you just have to create a few products for testing. Click on Entries, New entry and then create as many as you want.

You need to include Snipcart’s JavaScript file and jQuery if it is not already included. Use the default CSS theme that you need to include as well. I included those files in layout.html to make sure they are available in every page that inherits from this template. Please note that you will need an account on Snipcart to have an API Key.

<!-- Snipcart default theme -->
<link id="snipcart-theme" type="text/css"

<!-- JQuery > Snipcart dependency -->

<!-- Snipcart JS -->
<script type="text/javascript" 

You now have to create the template that will render the products listing and the buy buttons. In the store folder, create a file named index.html. All you need to do is iterate through the products, and display it with a Snipcart buy button. The template should look like this:

{% extends "_layout" %}
{% set title = "Store" %}

{% block content %}

    {% for entry in craft.entries.section('store').find() %}
                {{ entry.title }}
               <!-- Render Snipcart buy button -->
              <a href="#"
                 data-item-price="{{ entry.price }}"
                 data-item-id="{{ entry.slug }}"
                 data-item-name="{{ entry.title }}"
                 data-item-description="{{ entry.description }}"
                 data-item-url="{{ url('store') }}">
                 Buy it
    {% endfor %}
{% endblock %}

You should now be ready to test it and see if it works. Navigate to your application and hit the page that will render the index.html that we created to list your products. You should have a page that looks like this:

Products listing

Click on Buy it and see Snipcart in action.


Ok, so now you can add products to the cart! But you will probably want to show your customers a summary of the cart: you will have to add it in layout.html to make it appear on every page of the application.

Open layout.html and add this code block at the end of the <header> tag:

<div class="snipcart-summary">
    Number of items: <span class="snipcart-total-items"></span>
    Total price: <span class="snipcart-total-price"></span>
    <a href="#" class="snipcart-checkout">Checkout</a>

If you refresh the page, you will see the summary appearing and getting updated live as you add new items to your cart.


That was pretty easy, but in a future blog post, I will explain how you could setup an inventory management within Craft by using Snipcart's webhooks.

I pushed the source code of this project on Github, you can find it at

Keep on Snipping!

Suggested posts: