# Snipcart

> Snipcart

- Skill: `comeonoliver/snipcart` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/snipcart`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/snipcart/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/comeonoliver/snipcart

---

# Snipcart

## Overview

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.

## Instructions

### Step 1: Add to Any Page

```html
<!-- 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>
```

### Step 2: Astro/Next.js Integration

```astro
---
// 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>
```

### Step 3: JavaScript API

```javascript
// 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.
  })
})
```

## Guidelines

- Snipcart takes 2% transaction fee + payment processor fees. No monthly fee.
- Products are validated against your HTML — Snipcart crawls the product URL to verify prices.
- Works with any SSG (Astro, Hugo, 11ty, Gatsby) — perfect for JAMstack e-commerce.
- Supports subscriptions, digital products, and multi-currency.