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.21/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.21/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.21/default/snipcart.css" />
</head>
<body>
<div class="content">
Your site content here
</div>
<script async src="https://cdn.snipcart.com/themes/v3.0.21/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>
</body>
</html>Next up
Now that you've installed Snipcart, you can start adding products to your site.