Add a shop to your v0 site

v0 produces clean React and shadcn components, which is why people use it for landing pages and product sites. It does not produce a checkout, because a checkout is not a component, it is a system. AddTheShop is that system, and it fits a v0 project in one component.

One component

Ask v0 for a Shop component, or paste this one. It loads our snippet once and renders the product grid in place:

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" />;
}

Drop it on a /shop route and add a cart button wherever you like with data-addtheshop-buy="PRODUCT_ID" on any element.

Keep shadcn styling

Our grid inherits your page font and accepts CSS variables for colour and radius, so it sits next to shadcn cards without looking foreign. If you want full control, use data-theme="unstyled" and style .ats-card, .ats-btn and friends with Tailwind.

Deploy on Vercel

There is nothing to configure in Vercel. No environment variables, no API routes, no webhooks. The payment and order logic is on AddTheShop and Stripe.

Products and orders

Manage them in the dashboard, or connect Claude, ChatGPT or Cursor to our MCP server and manage them by chatting. Orders arrive by email with the buyer's details and shipping address.