JavaScript events

Applies to: Borders 3.1.0 and later. Added in: Borders 3.0.0. Last checked: 2026-10-13 against Borders 3.1.0.

Borders fires JavaScript events when customers change a variant, add to cart, update the cart or filter a collection. Developers can listen to them to run their own scripts or connect a third-party app. Since Borders 3.0.0, the theme also sends Shopify's standard storefront events.

Theme eventsCopy Anchor Link

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

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

• krown:variant:change fires when a customer selects a variant. Detail: variant (the variant object), productForm (the product form element).
• krown:cart:add fires after a product is added to the cart from a product form or quick buy. Detail: productForm, variantId.
• krown:cart:update fires when the quantity of a cart item changes or the item is removed. Detail: itemKey, itemQty, itemVariantId, itemProductId.
• krown:cart:error fires when Shopify rejects a cart quantity change, for example a quantity higher than the stock. Detail: error, the error text.
• krown:main-collection-grid:filtered fires after the product grid of a collection or the search page is refreshed by a filter or sort. Detail: gridElement, the grid element with the new products.

Shopify standard eventsCopy Anchor Link

Borders loads Shopify's standard events module (https://cdn.shopify.com/storefront/standard-events.js) and makes it available as window.Shopify.StandardEvents. It dispatches:

• PageViewEvent on every page, with the template name, title and URL.
• ProductSelectEvent when a variant is selected.
• CartLinesUpdateEvent, CartNoteUpdateEvent, CartDiscountUpdateEvent and CartErrorEvent for cart changes.
• CollectionUpdateEvent and SearchUpdateEvent when filters or sorting change on a collection or the search page.

Borders also configures two Shopify actions:

• openCart opens the cart drawer, or goes to the cart page when the drawer is not used.
• updateCart refreshes the cart count and the drawer after an app changes the cart.

See Shopify's developer documentation for the event payloads.

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

Use Shopify's standard cart events if your tool supports them, because they also work with other Shopify themes. Use krown:cart:add when you need the product form element. Both fire whenever a Borders product form adds a product to the cart.

Related pagesCopy Anchor Link

• Custom work and code changes: what Krown support covers.
• Custom CSS and code: code recipes for Borders.
• JavaScript events for developers: the Shopify Basics guide.