SDK demo
One script tag makes any page a shop.
Everything below is live against our demo bakery — the same widgets, cart, and server-priced checkout your site would get. Your page keeps its own design; the widgets inherit it.
<script async src="https://js.usebatch.shop/v1.js"
data-batch-shop="your-shop-slug"
data-batch-theme="auto"></script>Menu
Your sellable products as cards — priced ones add to the order, quote-only ones hand off to the quote form. Prices always come from the server.
<batch-menu></batch-menu>Availability calendar
Real capacity, live: closed and full days are disabled, picking a day attaches the pickup date to the order.
<batch-calendar></batch-calendar>Quote form
Custom-work requests with the date, the details, and contact — lands in the merchant Studio inbox, priced from there.
<batch-quote-form></batch-quote-form>More recipes
Buy button on any element
<button data-batch-buy="prod_id" data-batch-qty="1">
Order the chocolate cake
</button>React / Next
import { BatchProvider, BuyButton, CartButton, Menu } from '@batch/sdk/react';
<BatchProvider shop="your-shop-slug" theme="auto">
<CartButton />
<Menu />
<BuyButton product="prod_id" label="Order now" />
</BatchProvider>Theme it yourself (or let auto-theme match the storefront)
:root {
--batch-accent: #b4552d;
--batch-radius: 1.25rem;
/* bg · surface · ink · ink-soft · accent-2 · on-accent */
}