Starters

Three small, complete shops to copy: a catalog with a tag filter, a product page and a cart that ends at your hosted checkout. Download one, put your token in its config.js, and serve the folder.

Starter	Built with	For
html-components.zip	`components.js` only	A shop with no code to write
html-sdk.zip	`storefront.js` and plain JavaScript	Your own markup, no build step
vite-ts.zip	`storefront.mjs`, TypeScript and Vite	A site with a build step

Each is self-contained, with a README. None needs a server of its own: they're static files.

config.js

Every starter has one config.js with three settings:

Setting	Default	What
`token`	none: put yours in	Your token, `odpk_…` or `odpv_…`
`apiUrl`	`https://api.organizationdepot.com/api`	The Storefront API
`scriptBase`	`https://developers.organizationdepot.com/storefront/v1`	Where the scripts come from

While you develop, put a preview token (odpv_…) in config.js: its carts work even while the shop is closed and pay only with Stripe's test cards, so trying checkout can't take a real order. Deploy with your public token (odpk_…). Every starter enables Add to cart when shop.sale.availableForSale || shop.preview, so with a preview token you can add while the shop is closed, and with a public token buyers can't; "Sold out" comes from stock only.

Change scriptBase to https://developers.organizationdepot.com/storefront/1.3.0 to pin this release; the vite-ts build then adds an integrity-checked preload of storefront.mjs to every page (see Security). For testing against a local copy, see Local development.

html-components

index.html is the catalog (<od-product-list>, with a link per tag, and its count, from tags.list()), product.html?handle=… the product page (<od-product>), and the cart is the drawer behind <od-cart-button> on both. shop.js reads config.js and loads components.js; styles.css is the page around the elements.

Serve the folder with any static server, for example npx serve ., and open the address it prints.

html-sdk

The same shop built on storefront.js with plain JavaScript, and a cart page of its own (cart.html). shop.js loads the script, then renders each page with textContent (never innerHTML): cards with "From" prices and "Sold out", options that switch the photo, details, personalization fields with the server's messages, quantity steppers, and checkout.

vite-ts

The same shop in TypeScript, built with Vite:

npm install
npm run dev     # http://localhost:5173
npm run build   # dist/, ready for any static host

@orgdepot/storefront is a name, not a package to install: vite.config.ts marks it external and points it at {scriptBase}/storefront.mjs, so the browser loads the SDK from developers.organizationdepot.com.
Its types come from the release: npm run types downloads {scriptBase}/types/*.d.ts into types/ (npm run build does it when they're missing), and tsconfig.json maps @orgdepot/storefront to them.
With a pinned scriptBase, npm run build checks the published storefront.mjs against the release's integrity.json and adds a modulepreload with the hash to every page (scripts/pin-sdk.mjs).