Guides · 5 min

Add a buy button to any site

Put a real, buyable product on a page you already have — pure HTML, no dependencies, no build step.

If you have a web page, you have everything you need. A mockup is an <img> and a buy button is an <a> — both built from the same three values. No framework, no SDK.

Get a Shop ID

Your Shop ID is public, like a Cloudinary cloud name. Grab it from the dashboard, or mint a sandbox one with a single call — no signup.

bash

curl -X POST https://api.snowcone.app/shops/sandbox \
  -H 'Content-Type: application/json' -d '{}'
# → { "shop_id": "ab3dPq7Rms", "shop_secret": "scsec_…", "claim": { … } }
# Use shop_id as &shop= right away.

Don’t ship a Shop ID copied from these docs — it attributes sales to someone else. Mint once and reuse it; claiming and limits are on Get a Shop ID.

Drop in the card

Paste this where you want the product. Swap BEEB77 for any product code, the asset= for your artwork URL (it must be publicly fetchable), and YOUR_SHOP_ID for yours. The link opens your Snowcone-hosted checkout with the item in the cart.

html

<!-- A product card: the mockup, a price, and a buy button. -->
<a href="https://buy.snowcone.app/BEEB77?asset=https%3A%2F%2Fcdn.example.com%2Fart.png&shop=YOUR_SHOP_ID"
   style="display:inline-block; text-decoration:none; color:inherit;">
  <div style="aspect-ratio:1/1; width:280px; overflow:hidden; border-radius:12px;">
    <img
      src="https://img.snowcone.app/BEEB77?asset=https%3A%2F%2Fcdn.example.com%2Fart.png&shop=YOUR_SHOP_ID&width=800"
      style="width:100%; height:100%; object-fit:cover;" />
  </div>
  <p style="margin:8px 0 0; font-weight:600;">Framed Canvas — $24</p>
</a>

Using the SDK? getMockupUrl() and getBuyUrl() build these two URLs from the same options object — see the SDK page.

Use the real price

Hard-coding $24 works for one product, but the price lives in the public catalog — read it so it never drifts. The checkout always resolves price from your Shop ID, never the URL.

tsx

// Don't hard-code the price — read it from the public catalog.
const res = await fetch(
  "https://search.snowcone.app/indexes/snowcone/documents/BEEB77",
  { headers: { Authorization: "Bearer eee819b849798ad9091228c486ec05d0931e5292" } },
);
const { name, price } = await res.json(); // price is MSRP, in cents

That’s a complete sale on a static page. From here: add size & color options, let shoppers customize the artwork, or build the whole thing in Next.js.