Add e-commerce to any website with Snipcart. Use when a user asks to add a shopping cart to a static site, sell products from a JAMstack site, add buy buttons to any HTML page, or integrate e-commerce without a backend.
Snipcart adds a full shopping cart to any website with just HTML attributes. No backend needed — it works with static sites, JAMstack, and any HTML page. Handles checkout, payments, shipping, taxes, and inventory.
<!-- Add Snipcart scripts to your page -->
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.4.1/default/snipcart.css" />
<script async src="https://cdn.snipcart.com/themes/v3.4.1/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>
<!-- Product buy button — just HTML attributes -->
<button class="snipcart-add-item"
data-item-id="tshirt-001"
data-item-name="Premium T-Shirt"
data-item-price="29.99"
data-item-url="/products/tshirt"
data-item-image="/images/tshirt.jpg"
data-item-description="100% organic cotton"
data-item-custom1-name="Size"
data-item-custom1-options="S|M|L|XL">
Add to Cart — $29.99
</button>
<!-- Cart summary button -->
<button class="snipcart-checkout">
Cart (<span class="snipcart-items-count">0</span>)
</button>
---
// components/ProductCard.astro — Product card for static site
const { product } = Astro.props
---
<div class="product-card">
<img src={product.image} alt={product.name} />
<h3>{product.name}</h3>
<p class="price">${product.price}</p>
<button class="snipcart-add-item"
data-item-id={product.id}
data-item-name={product.name}
data-item-price={product.price}
data-item-url={`/products/${product.slug}`}
data-item-image={product.image}>
Add to Cart
</button>
</div>
// Customize cart behavior with Snipcart JS API
document.addEventListener('snipcart.ready', () => {
Snipcart.api.cart.items.added((item) => {
console.log('Item added:', item.name)
// Track in analytics
})
Snipcart.api.cart.confirmed((order) => {
console.log('Order confirmed:', order.token)
// Send to CRM, trigger email, etc.
})
})