Installation

You first need to create a Snipcart account to get started. It's forever free in Test mode.

To get started, you need to include our assets—a JavaScript and CSS file—in your codebase.

We suggest using the assets on our CDN directly.

1. Add preconnect hints 

<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">

2. Include our default stylesheet 

<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.css" />

3. Include Snipcart on your site

Here, you can decide where you want Snipcart's JS shopping cart to be located in your website.

<script async src="https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>

We highly recommend using the hidden attribute. Especially if you count on customizing our templates.

Example

Here's an example of a basic setup with Snipcart installed properly.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.css" />
  </head>
  <body>
    <div class="content">
      Your site content here
    </div>

    <script async src="https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.js"></script>
    <div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>
  </body>
</html>

Global configurations

Some global settings can be configured using data attributes on the div#snipcart element.

data-config-add-product-behavior

Defines what happens when customers add products to the cart.

At the moment, the only supported value for this setting is none. When none is specified, customers stay on the site when a product is added; the cart does not open.

Any other value (or omitting this setting), will make the cart show up when a product is added.

<div hidden id="snipcart" data-api-key="<API_KEY>" data-config-add-product-behavior="none"></div>

data-config-modal-style

The cart popup can in 2 different styles. The first one is a full page cart and the second one is only a side modal. The default style is the full page cart.

To make the cart open in a side modal, you can use the data-config-modal-style attribute and set the value to side.

<div hidden id="snipcart" data-api-key="<API_KEY>" data-config-modal-style="side"></div>

side cart

Next up

Now that you've installed Snipcart, you can start adding products to your site.