Home
Examples

Live demo

The Storefront SDK running live in your browser against a real store — preorder widget, notify-me, and derived variant state, with source.

Everything on this page is rendered by the real @artossoftware/stoq-sdk in your browser — loaded from jsDelivr, talking to a live store (nina-and-kulfi-dog-toys.myshopify.com) with its public Storefront API token. No server, no build step. It's the same script tag the notify-me and preorder examples show, wired to a real preorder variant.

↗ Open the live demo in a full page

Note

The demo points at a test product (“Rabbit in a Carrot — Zero or less inventory”) that carries a STOQ preorder selling plan, so the preorder UI and derived state are real. The token is the shop's public Storefront token — the same kind you embed client-side in your own storefront.

How it's built

The page is a single self-contained HTML file — no framework. It loads the script-tag build, then reads state imperatively through Stoq.client:

window.addEventListener('stoq:loaded', async () => {
  const variant = { id: 49360289497368, availableForSale: false, currentlyNotInStock: true }

  const state = await Stoq.client.getVariantState(variant)  // { isPreorder, sellingPlanId, shippingText, … }
  const cta   = Stoq.client.preorderButtonFor(variant)      // { label, … } or null
  const line  = await Stoq.client.cartLineFor(variant, 1)   // { merchandiseId, sellingPlanId, quantity }
})

The drop-in <stoq-preorder-widget> and <stoq-notify-me> elements need zero JavaScript — see the preorder and notify-me examples for the full breakdown.

If you already have your own JavaScript, the same widget is one imperative call — Stoq.renderPreorderWidget(variant, { container }) mounts the badge + CTA into any element, wires click → modal → cart, and returns a handle with .update() / .destroy():

const handle = await Stoq.renderPreorderWidget(variant, {
  container: '#preorder-mount',
  productId: 9564103180568,
  badge: true,
  notifyMeFallback: true,
  onAddToCart: (line) => addToCart(line),  // your Storefront Cart API cartLinesAdd
})

Go deeper

  • Headless & Hydrogen — provider, hooks, and the SSR data flow.
  • Build with the SDK — the full client + element API.
  • Full SSR reference storefront — a complete Shopify Hydrogen app wired to the SDK lives at examples/hydrogen-nina-kulfi in the repo, exercising every SDK surface on a real product page.
Built withSourcey