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.0.31/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.0.31/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.0.31/default/snipcart.css" />
</head>
<body>
<div class="content">
Your site content here
</div>
<script async src="https://cdn.snipcart.com/themes/v3.0.31/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>

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