Organization DepotDevelopers v1.3.0API 2026-12
All pages

Quickstart: web components

Put a catalog, a product page and a cart on any HTML page with one script and a few elements. No code, and no build step.

1. Get a public token

In Organization Depot, open your shop's Storefront › Your own website page and create a token of the Website kind under Tokens. Give it a label such as "Main website". It looks like odpk_ followed by 32 letters and digits.

A public token is meant to be in your page's source; see Public tokens. While you build, a preview token (odpv_…, the Preview kind) makes carts that pay only with test cards; keep that one out of your live site.

2. Add the script and the elements

Save this as index.html, with your token in <od-store>:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Shop</title>
    <script
      type="module"
      src="https://developers.organizationdepot.com/storefront/v1/components.js"
    ></script>
  </head>
  <body>
    <od-store token="odpk_YOUR_PUBLIC_TOKEN"></od-store>

    <header>
      <a href="/">My club</a>
      <od-cart-button></od-cart-button>
    </header>

    <main>
      <h1>Shop</h1>
      <od-product-list href="/product.html?handle={handle}"></od-product-list>
    </main>
  </body>
</html>

Open it through a web server, not by double-clicking the file: browsers don't run module scripts from file://. Any static server works, for example npx serve . or python3 -m http.server 8080.

You now have a grid of your products, with photos, prices ("From $34.00" when the price depends on the options), "Sold out" badges and Load more. Each card links to the address in href, with {handle} filled in.

Note: type="module" matters. Without it, the browser reads components.js as a classic script and nothing renders.

3. Add a product page

A product is named by its handle: its slug, the last part of its address on your hosted storefront (…/p/walnut-end-grain-board). <od-product> shows everything a product page needs: photos that follow the chosen options, the price, options, details, personalization fields, quantity and Add to cart. While the shop's sale is closed, Add to cart stays disabled and says why ("Ordering opens soon", "Ordering paused", "Sale ended"), except with your preview token, which can add whatever the sale says; "Sold out" shows only when the stock has run out.

On a site with one page per product, write the handle into each page:

<od-product handle="walnut-end-grain-board" heading-level="1"></od-product>

On a site with one product page for all of them, product.html?handle=…, set it from the address. The starter does this in its shop.js; the short version is:

<od-product heading-level="1"></od-product>
<script type="module">
  const handle = new URLSearchParams(location.search).get("handle") ?? "";
  document.querySelector("od-product").setAttribute("handle", handle);
</script>

Keep <od-store> and the components.js script on every page, and <od-cart-button> wherever the cart should open from.

4. Check out

<od-cart-button> shows the number of items and opens the cart drawer, which it adds to the page for you. In the drawer the buyer changes quantities, removes lines and presses Checkout, which takes them to your hosted checkout on your shop's checkout domain.

After paying, the confirmation page links back to Your website (as set on the Headless page), and the cart there starts fresh.

To configure the drawer, add one yourself:

<!-- Open the drawer whenever something is added; link each line to its product page. -->
<od-cart open-on-add product-href="/product.html?handle={handle}"></od-cart>

5. Make it yours

The elements take their colours, fonts and corner radius from your shop's branding. Change any of it with CSS custom properties, style any piece with ::part(), and replace labels with slots:

<style>
  :root {
    --od-color-brand: #7c4a1e;
    --od-radius-base: 4px;
  }
  od-product::part(add-button) {
    text-transform: uppercase;
  }
</style>

<od-product handle="walnut-end-grain-board">
  <span slot="add-label">Add to basket</span>
</od-product>

Every element, attribute, event, part, slot and custom property is in the web components reference.

Next