JavaScript events

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

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

Listening to an eventCopy Anchor Link

Every Highlight event is a CustomEvent dispatched on document with bubbles: true, by KROWN.functions.eventDispatcher. The data is in event.detail. Highlight uses plain JavaScript, with no jQuery.

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: 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 from a product form and the cart drawer has been refreshed.

• It fires only when Theme settings → Cart → Cart type is Drawer. With Page, the form submits normally and the browser opens the cart page.

• It also fires when Shopify returns an error for the add request, such as not enough stock. The error then shows in the drawer.

• 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 drawer or on the cart page. It does not fire when the item is removed, because the item is no longer in the updated cart; Shopify's CartLinesUpdateEvent (see below) reports removals.

• 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. Highlight fires it before the cart is re-rendered.

• error: the error text returned by Shopify.

krown:main-collection-grid:filtered fires after a customer filters or sorts a collection page or the search results, once the new product grid is in the page.

• gridElement: the #CollectionProductGrid element with the new products.

Refreshing the cart from an appCopy Anchor Link

An app that adds products to the cart with its own request can ask Highlight to show the new cart:

window.refreshCart();

window.refreshCart() reloads the cart drawer content and the cart count in the header, then opens the cart drawer. It needs Cart type set to Drawer. It was added as a public method for apps in Highlight 2.2.3.

Shopify standard eventsCopy Anchor Link

Since Highlight 4.1.0, the theme also reports storefront activity with Shopify's standard events, so analytics and apps that use them work without extra code:

• Product, collection and cart views, with <s-view-event> elements: the product page, the Quick view popup, the collection page, the cart page and the cart drawer.
• ProductSelectEvent when a customer chooses a variant.
• CartLinesUpdateEvent when products are added, changed or removed, and CartErrorEvent when Shopify returns an error.
• CartNoteUpdateEvent and CartDiscountUpdateEvent for the cart note and discount codes.
• CollectionUpdateEvent and SearchUpdateEvent when filters or sorting change.

Highlight also tells Shopify's cart actions to use its own cart drawer: when an app or Shopify asks to open the cart, the drawer opens (or the cart page, when the drawer is off). The events are sent only when Shopify's standard events script is present on the page. See Shopify's developer documentation on standard events.

Does Highlight have an event for opening the cart drawer?Copy Anchor Link

No. Highlight 4.1.0 has no krown: event for the cart drawer opening or closing. Listen to krown:cart:add for products added from a product form, or to Shopify's cart standard events.

Related pagesCopy Anchor Link

• JavaScript events for developers: Shopify Basics.
• Custom CSS and code: where to add your own code.
• Cart theme settings: the cart type the events depend on.
• Custom work and code changes: who to contact for custom code.