Add a shop to your Astro site

Astro sites are fast because they ship almost no JavaScript and often no server. A shop usually ruins that, because checkout wants a backend. AddTheShop keeps your Astro site static: the snippet talks to our API and Stripe, and your build stays the same.

Install

In any .astro page, in the body:

<script src="https://addtheshop.com/shop.js" data-store="pk_ats_YOUR_STORE_KEY" async></script>
<div id="addtheshop"></div>

That is it. No integration, no adapter, no server endpoints. If you use a layout, put the script tag in the layout and the <div id="addtheshop"> on the shop page.

Islands and buy buttons

A buy button anywhere, including inside a React or Svelte island, is any element with data-addtheshop-buy="PRODUCT_ID". The snippet watches the DOM, so buttons rendered later are wired too.

Custom storefront with the API

Prefer your own markup? Fetch https://addtheshop.com/v1/storefront/{pk}/products at build time or on the client, render your cards, and post the chosen items to the checkout endpoint to get a Stripe URL. Prices and stock are enforced server side.

Content collections

Keep product descriptions in your content collection if you like; just keep the price and stock in AddTheShop, which is what checkout trusts.