JavaScript events

Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 4.3.3. Last checked: 2026-10-13 against Kingdom 6.2.0.

Kingdom fires JavaScript events on the document when customers change a variant, add to cart, change the cart or filter a collection. Developers can listen to them to run their own scripts or connect a third-party app.

Where to find it: in the theme code, for developers. There is no theme editor setting for these events.

Kingdom eventsCopy Anchor Link

Every Kingdom event is a CustomEvent dispatched on document with bubbles: true. The data is in event.detail.

document.addEventListener('krown:variant:change', (event) => {
  const { variant, productForm } = event.detail;
  // your code here
});

krown:variant:change fires when a customer selects another variant, on the product page, in the Featured product section and in the Quick view popup.

• variant: the selected variant object.
• productForm: the product form element.

krown:cart:add fires after a product is added to the cart from a product form or a quick buy button, once the cart drawer is updated.

• productForm: the product form element.
• variantId: the ID of the variant that was added.

krown:cart:update fires when the quantity of an item in the cart changes or the item is removed, in the cart drawer or on the cart page.

• itemKey: the line item key.
• itemQty: the new quantity.
• itemVariantId: the variant ID.
• itemProductId: the product ID.

krown:cart:error fires when Shopify rejects a cart quantity change, for example a quantity higher than the stock.

• error: the error text returned by Shopify.

krown:main-collection-grid:filtered fires after a customer applies a filter or a sort order on the collection page or the search page, once the new products are shown.

• gridElement: the product grid element.

Refreshing the cart from an appCopy Anchor Link

Apps that add products to the cart with their own requests can tell Kingdom to show the new cart:

window.refreshCart();

window.refreshCart() loads the current cart, re-renders the items and the subtotal in the cart drawer, updates the cart count in the sidebar and opens the cart drawer. It was added in Kingdom 4.3.3 as a public method for apps.

Kingdom also answers Shopify's standard cart actions: Shopify.actions.openCart opens the cart drawer (or the cart page when there is no drawer), and Shopify.actions.updateCart refreshes the cart drawer after the app's update.

Shopify standard eventsCopy Anchor Link

Since Kingdom 6.2.0, the theme also sends Shopify's standard storefront events, from Shopify's standard-events.js:

• a page view on every page, and view events for the product page, the collection page and the cart;
• ProductSelectEvent when a customer chooses another variant;
• CartLinesUpdateEvent, CartNoteUpdateEvent, CartDiscountUpdateEvent and CartErrorEvent for cart changes;
• CollectionUpdateEvent and SearchUpdateEvent when a customer filters or sorts.

Apps and analytics tools that listen to Shopify's standard events work with Kingdom without extra code. See JavaScript events for developers.

Does Kingdom use jQuery?Copy Anchor Link

No. Kingdom 6.2.0 uses plain JavaScript. Load jQuery yourself if your script needs it.

How do I open the cart drawer from my own script?Copy Anchor Link

Call window.refreshCart() after your script changes the cart. It updates the cart drawer and the cart count, then opens the drawer.

Related pagesCopy Anchor Link

• Custom CSS and code: CSS and code recipes.
• JavaScript events for developers: the general Krown article.
• Custom work and code changes: options when a change needs code.