JavaScript events

JavaScript events in Split for developers: the krown:cart and krown:variant events the theme dispatches and how apps refresh the cart.

Applies to: Split 5.1.0 and later. Added in: Split 3.2.3. Last checked: 2026-10-13 against Split 5.1.0.

Split fires JavaScript events when customers change a variant, add to cart or change the cart. Developers can listen to them to run their own scripts or connect a third-party app. Split also has a public function that refreshes the cart.

Where to find it: in the theme code, layout/theme.liquid (KROWN.functions.eventDispatcher), assets/component-product-form.js and assets/component-cart.js.

This page is about advanced development. Krown support does not provide help with custom code or with implementing custom scripts. To have custom code written for your store, see Custom work and code changes.

Listening to an event

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

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

Events Split dispatches

Event	When it fires	`event.detail`
`krown:variant:change`	The customer selects another variant: on the product page, in the Featured product section and in the Quick view popup	`variant`: the selected variant object (`false` when the options match no variant). `productForm`: the product form element.
`krown:cart:add`	A product form adds to the cart with Cart type Drawer, after the cart drawer is refreshed. It also fires when Shopify rejects the add, for example a quantity higher than the stock	`productForm`: the `<form>` element. `variantId`: the ID of the variant that was added.
`krown:cart:update`	The quantity of an item in the cart drawer or on the cart page changes, and the item is still in the cart	`itemKey`: the line item key. `itemQty`: the new quantity. `itemVariantId`: the variant ID. `itemProductId`: the product ID.
`krown:cart:error`	Shopify rejects a quantity change in the cart, for example a quantity higher than the stock	`error`: the error text returned by Shopify.
`krown:main-collection-grid:filtered`	The product grid of the collection or search page is replaced after the customer applies a filter or a sort order	`gridElement`: the `#CollectionProductGrid` element with the new products.

With Cart type Page, adding to cart sends the customer to the cart page, so krown:cart:add does not fire. Removing an item from the cart does not fire krown:cart:update, because the item is no longer in the cart: listen to the cart-updated event of the cart-form element instead.

Element events

Split also fires plain events on its custom elements. They are the same in every Krown theme except Seventh, and are described in JavaScript events for developers:

VARIANT_CHANGE on the product-variants element, when the variant changes. Read currentVariant from the element.
add-to-cart on the product-form element, when a product is added to the cart.
cart-updated on the cart-form element, after any change in the cart, including a removed item.

Refreshing the cart from an app

When a script or an app adds a product to the cart with the Shopify Ajax API, call the public function so Split shows the new cart:

window.refreshCart();

It reloads the cart contents, the subtotal and the cart count in the header.
With Cart type Drawer, it opens the cart drawer. Call window.refreshCart(false) to refresh without opening it.
It reloads the cart recommendations in the drawer.

The public cart refresh method was added in Split 3.2.3.

Does Split support Shopify standard events?

Yes, since Split 5.1.0. Split loads Shopify's standard events module and supports these Shopify actions and events:

Shopify.actions.openCart: opens the cart drawer, or the cart page with Cart type Page.
Shopify.actions.updateCart: runs Shopify's cart update, then refreshes the cart drawer and the cart count.
Split dispatches Shopify's CartLinesUpdateEvent (add, update and remove), CartErrorEvent, CartNoteUpdateEvent, CartDiscountUpdateEvent and ProductSelectEvent from the product form and the cart.

Apps that use Shopify's standard actions work with the Split cart without extra code. Shopify documents the actions and events on shopify.dev.

Custom CSS and code: CSS and Liquid recipes for Split.
JavaScript events for developers: the events shared by Krown themes.
Cart theme settings: the cart type that decides which events fire.
Add jQuery for apps that need it: for apps that expect jQuery.

JavaScript events

Listening to an eventCopy Anchor Link

Events Split dispatchesCopy Anchor Link

Element eventsCopy Anchor Link

Refreshing the cart from an appCopy Anchor Link

Does Split support Shopify standard events?Copy Anchor Link

Related pagesCopy Anchor Link