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.
First of all, you will need a Snipcart account. To register, go to https://app.snipcart.com/register
- Include the Snipcart JS/CSS files
<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.
- 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!