JavaScript events

Applies to: Combine 4.2.0 and later. Added in: Combine 4.1.0. Last checked: 2026-10-13 against Combine 4.2.0.

Krown support does not provide help with custom code. This page is for developers: Combine fires JavaScript events when customers change a variant, change the cart or filter a collection, and it dispatches Shopify's standard storefront events for analytics apps. To have custom code written for your store, see Custom work and code changes.

Listening to an eventCopy Anchor Link

Every Combine event is a CustomEvent dispatched on document with bubbles: true. The data is in event.detail. Combine uses plain JavaScript, with no jQuery or framework.

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

Theme eventsCopy Anchor Link

krown:variant:change fires when a customer selects a variant in a variant picker: on the product page, in Featured product, in the Quick view and in quick buy pickers.

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

krown:cart:add fires after a product form adds a variant to the cart.

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

krown:cart:update fires when a customer changes the quantity of an item in the cart, or removes it.

• 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 filters or sorts the collection grid. Combine replaces the grid without a page reload, so code that runs on product cards must run again after this event.

• gridElement: the product grid element.

Refreshing the cartCopy Anchor Link

When an app or your own code changes the cart through Shopify's Ajax API, call window.refreshCart(). It reloads the cart drawer contents, the cart count in the header and the cart recommendations.

window.refreshCart(true);  // refresh and open the cart drawer
window.refreshCart(false); // refresh without opening it

Shopify standard eventsCopy Anchor Link

Since Combine 4.1.0, Combine also dispatches Shopify's standard storefront events, loaded from Shopify's standard-events.js. Analytics and tracking apps that listen to them receive them without extra code:

• PageViewEvent on every page, and view events for the product page, the Quick view, collection pages and the cart.
• ProductSelectEvent when a customer selects a variant.
• CartLinesUpdateEvent when products are added, updated or removed.
• CartErrorEvent when Shopify returns a cart error.
• CartNoteUpdateEvent and CartDiscountUpdateEvent when the cart note or a discount code changes.
• CollectionUpdateEvent and SearchUpdateEvent when collection or search results are filtered or sorted.

Combine also answers Shopify's openCart and updateCart storefront actions: openCart opens the cart drawer (or the cart page when the drawer is off), and updateCart refreshes the drawer. The standard events and actions are defined and documented by Shopify, not by Combine.

Which event should I use for add to cart tracking?Copy Anchor Link

Use Shopify's CartLinesUpdateEvent for analytics: it covers product forms, quick buy and cart changes, in the format tracking apps expect. Use krown:cart:add when your own script needs the product form element that added the item.

Related pagesCopy Anchor Link

• Custom CSS and code: where to add CSS and custom code.
• Custom work and code changes: options when a change needs code.
• JavaScript events for developers: the general Krown article, with the events of other Krown themes.
• Cart theme settings: the cart drawer settings.