Installation

Getting started with Snipcart is child's play! It will take a couple of minutes and, by the end of this tutorial, you’ll be all set.

  1. Signup

First of all, you will need a Snipcart account. To register, go to https://app.snipcart.com/register

  1. Include the Snipcart JS/CSS files

Once you’ve signed up and confirmed your account, log in and head to the right-sided menu of your dashboard (user icon top right corner). You'll find the snippets you're looking for under the Account > API keys section. Note that you’ll be in test mode by default, thus using your test API key. You will need to copy and paste these snippets, which include Snipcart's JavaScript/CSS files and your API key, before the closing head tag of your website.

<script
    src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    type="text/javascript"></script>

<script type="text/javascript"
    id="snipcart"
    src="https://cdn.snipcart.com/scripts/snipcart.js"
    data-api-key="YOUR_API_KEY"></script>

<link id="snipcart-theme" type="text/css"
    href="https://cdn.snipcart.com/themes/base/snipcart.min.css"
    rel="stylesheet">

Note that Snipcart v1.0 uses jQuery, so make sure you have it included in your page.

  1. Define your products

Now that you have included the files, you simply need to define the products on your website. A product is described using a simple HTML syntax.

<a href="#"
    class="snipcart-add-item"
    data-item-id="2"
    data-item-name="Bacon"
    data-item-price="3.00"
    data-item-weight="20"
    data-item-url="http://myapp.com/products/bacon"
    data-item-description="Some fresh bacon">
        Buy bacon
</a>

Important notice: For users with a single-page website, the data-item-url field should be filled with only your basic domain name, such as www.example.com, or with a simple slash bar /.

See Product Definition section for more information about the available properties. That’s it, you’re all set. Try it out!

Was this article helpful?