Imported from terminalskills/skills (skills/snipcart/SKILL.md). Install upstream with npx skills add terminalskills/skills --skill snipcart. Copyright stays with the author (Apache-2.0).

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

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

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

// 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.