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.19/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.
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.19/default/snipcart.js"></script>We highly recommend using the hidden attribute. Especially if you count on customizing our templates.
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.19/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.19/default/snipcart.js"></script>
</body>
</html>Next up
Now that you've installed Snipcart, you can start adding products to your site.