JavaScript events for developers

Here's a list of all the public events that you, as a developer, can hook into and run your own custom script or integrate a third-party app. We only use vanilla JS in our themes, so everything can be manipulated in any way.

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

Trigger cart refresh

The most used interaction is to make the drawer cart show up after a custom app or code adds a product to the cart.


Cart updated

When an item is removed from the cart or it's quantity is changed.

document.querySelector('cart-form').addEventListener('cart-updated', ()=>{
   const cartItems = document.querySelectorAll('[data-js-cart-item]'); 
   // get all cart items

Product added to the cart

When a product is added to the cart. Note that there might be many products in the page at once, so you need to add the event listener to all available product forms.

document.querySelector('product-form').addEventListener('add-to-cart', e=>{    
   const produdctId ='input[name="product-id"]').value);
   // get product id

Variant change

When the variant of a product is changed, you can get the selected variant object.

document.querySelector('product-variants').addEventListener('VARIANT_CHANGE', ()=>{
   const variant = document.querySelector('product-variants').currentVariant;
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.