Developer docs

Blazier Wishlist exposes a small, stable surface for themes and agencies: a JavaScript API on window.Blazier, DOM events on document, a few markup hooks, and CSS custom properties. Everything on this page is part of the public contract; anything not listed here (including Blazier._) is internal and may change.

The storefront script is loaded by the Blazier Wishlist app embed, so the embed must be on for any of this to work.

Waiting for the API

The script loads with defer, so window.Blazier may not exist yet when your code runs. Check for it, and otherwise wait for the blazier:ready event:

function withBlazier(fn) {
  if (window.Blazier) fn(window.Blazier)
  else document.addEventListener('blazier:ready', () => fn(window.Blazier), { once: true })
}

withBlazier((Blazier) => {
  console.log('Saved items:', Blazier.count())
})

JavaScript API

Product and variant IDs can be numbers, numeric strings, or Shopify GIDs such as gid://shopify/Product/123.

The item argument is an object:

{
  productId: string | number      // required
  variantId?: string | number     // optional; omit to save the product
  listId?: string                 // optional; defaults to the shopper's default list
}

Calls update the screen immediately. Saving to the server happens in the background, and if the server rejects a change (for example because a limit was reached), it’s rolled back and a limit event fires.

Example: a custom save button

<button type="button" class="my-save" data-product-id="{{ product.id }}">Save</button>

<script>
  document.addEventListener('click', (e) => {
    const btn = e.target.closest('.my-save')
    if (!btn || !window.Blazier) return
    const saved = window.Blazier.toggle({ productId: btn.dataset.productId })
    btn.setAttribute('aria-pressed', String(saved))
  })
</script>

DOM events

Every event is a CustomEvent dispatched on document. Read the payload from event.detail.

document.addEventListener('blazier:cart', (event) => {
  // Refresh your theme's cart count or cart drawer here.
  console.log('Added to cart:', event.detail.variantIds)
})

Markup hooks

Both elements get a saved attribute while the item is saved, and their inner <button> gets aria-pressed="true". Style them with blz-heart[saved] or [aria-pressed="true"].

<a href="/apps/blazier/wishlist" data-blz-open>
  Wishlist <span data-blz-count hidden></span>
</a>

CSS custom properties

All Blazier styles use low specificity (:where() and element selectors), so your theme’s rules win. Set these properties on :root, a section, or a single element.

Hearts and buttons

Drawer, dialogs and wishlist page

These apply inside .blz-root (drawer and dialogs) and #blazier-page (wishlist and shared-list pages).

:root {
  --blz-accent: #0f766e;
  --blz-heart: 32px;
}
.blz-root,
#blazier-page {
  --blz-radius: 0;
  --blz-w: 380px;
}

Stability

The methods, events, markup hooks and custom properties on this page are a stable contract. New ones may be added; existing ones won’t be removed or changed incompatibly without notice in the changelog.

Questions or requests? Email support@blazier.app.