Add a shop to your Bolt.new site

Bolt is brilliant at getting a whole app on screen in minutes. It is less brilliant when you ask it to build checkout, because that pulls in Stripe keys, webhooks, a database for orders and a hundred edge cases you did not want to own. AddTheShop takes that part off the table.

Why not let Bolt build the checkout?

It will try, and the first version will look like it works. Then a buyer's card is declined, a webhook fails, stock goes negative, or the Stripe secret key ends up in client code. Payments are the one part of a site where "mostly works" is not acceptable. AddTheShop is the finished version of that part.

Install it in Bolt

Tell Bolt:

> Add the shop from addtheshop.com to this project. Read https://addtheshop.com/docs/agent.md first. My store key is pk_ats_YOUR_STORE_KEY. Create a /shop route with the product grid and put a cart button in the nav.

Bolt projects are usually React or Vite, so it will produce something like this:

import { useEffect } from "react";

export default function Shop() {
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "https://addtheshop.com/shop.js";
    s.async = true;
    s.dataset.store = "pk_ats_YOUR_STORE_KEY";
    document.body.appendChild(s);
    return () => s.remove();
  }, []);
  return <div id="addtheshop" />;
}

For a plain HTML Bolt project, the two-line version is enough:

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

Deploying from Bolt

Nothing changes. The snippet is a script tag that talks to AddTheShop; there are no server functions, environment variables or build steps to add. Deploy to Netlify, Vercel or wherever Bolt sends it.

Running the shop

Products, prices and stock live in your AddTheShop dashboard, or in whatever AI you connect to our MCP server. Orders come by email and appear in the dashboard, with the buyer's shipping address when you ask for one.