Docs
Developers

JavaScript events

JavaScript events in Seventh: the krown events the theme fires for cart, variants and drawers, so developers can hook custom code into them.

Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.

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

Please note that this article is about advanced development and we do not provide any kind of support or assistance in implementing custom queries.

To have custom code written for your store, see Custom work and code changes.

Listening to an event

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

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

Product events

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

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

Cart events

krown:cart:add fires after a variant is added to the cart, also when the item was already in the cart. It also fires when Shopify returns an error for the add request, for example when the quantity is higher than the stock.

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

krown:cart:update fires when an item that is already in the cart changes: its quantity changes or it is removed.

  • 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. Seventh fires it after the cart update request, together with krown:cart:update.

  • error: the error text as returned by Shopify.

An error while adding a product from a product form does not fire krown:cart:error. Listen to krown:cart:add and to Shopify's standard CartErrorEvent instead (see "Does Seventh support Shopify standard events?" on this page).

Cart drawer events

krown:cart-sidebar:show fires when the cart drawer opens, whatever opened it.

krown:cart-sidebar:hide fires when the cart drawer closes.

Both return sidebarElement: the cart drawer DOM element.

Quick view events

krown:product-modal:init fires once per product, the first time that product loads in the Quick view popup from Quick buy. Use it to run code on the product inside the Quick view popup.

  • productId: the product ID.
  • variant: the selected variant object.

krown:product-modal:show fires each time the Quick view popup opens.

  • modalElement: the Quick view popup DOM element.

Collection events

krown:main-collection-grid:filtered fires when a customer filters the collection grid. Seventh replaces the product grid without a page reload. Code that runs inside product cards must run again after this event.

  • gridElement: the product grid DOM element.

Refreshing the cart

When an app adds a product, call KROWN.functions.updateCart(). It reloads the cart drawer contents and the cart count in the header. Use it when an app or custom code changes the cart through the Shopify Ajax API.

KROWN.functions.updateCart(true);  // refresh and open the cart drawer
KROWN.functions.updateCart(false); // refresh without opening it
  • openDrawer (boolean, default true): opens the cart drawer after the refresh.

Two more functions open and close the cart drawer:

KROWN.functions.openCartDrawer();
KROWN.functions.closeCartDrawer();

window.refreshCart(openDrawer) does the same as KROWN.functions.updateCart(openDrawer). It is the name used by other Krown themes.

If you need any other events exposed or functions that might prove useful in extending the theme without changing the code, let us know and we will try our best to include these.

Does Seventh support Shopify standard events?

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

  • PageViewEvent on every page.
  • ProductSelectEvent when a variant is selected.
  • 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.

The standard events are defined and documented by Shopify, not by Seventh.

Custom work and code changes

Custom work and code changes for Seventh: what Krown support can help with, what needs a developer, and how to keep changes through updates.

Custom CSS and code

Custom CSS and code in Seventh: where to add CSS, how to add code to the head or a custom font, and what survives a theme update.

On this page

Listening to an eventProduct eventsCart eventsCart drawer eventsQuick view eventsCollection eventsRefreshing the cartDoes Seventh support Shopify standard events?Related pages