Installation
You first need to create a Snipcart account to get started. It's forever free in Test mode.
Getting started is simple. You need to include our assets—a JavaScript and CSS file—in your codebase.
We suggest using the assets on our CDN directly.
1. Include our default stylesheet
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.4/default/snipcart.css" />2. Include Snipcart on your site
You can now decide exactly where you want the Snipcart application to be mounted into your website. Previously, we were automatically appending a div tag into your site.
<div hidden id="snipcart" data-api-key="<your_public_api_key>"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.4/default/snipcart.js"></script>We highly recommend using the hidden attribute. Especially if you count on customizing our templates. Otherwise, your customers might briefly see markup on your site while Snipcart loads everything.
Our script file should always be included after div#snipcart.
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.4/default/snipcart.css" />
</head>
<body>
<div class="content">
Your site content here
</div>
<div hidden id="snipcart" data-api-key="<your_public_api_key>"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.4/default/snipcart.js"></script>
</body>
</html>Next up
Now that you've installed Snipcart, you can start adding products to your site.