Installation

Getting started with Snipcart is child’s play! We always say the shopping cart integration is very fast: time to prove it. By the end of this quick 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 Account > Credentials section, where you’ll find your API key. Notice that you’ll be in test mode by default, thus using your test API key. Once you have your API key, you will need to include the Snipcart javascript and CSS files before the closing head tag.

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

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

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

Note that Snipcart v2.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.

<button
    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
</button>

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?