Storefront JavaScript events

The storefront widget dispatches JavaScript events you can listen for in your theme's own code, to trigger custom behavior when a shopper filters, searches, or adds a product to cart.

What this does

Dispatches JavaScript events on the storefront whenever a shopper filters, searches, or adds a product to cart, so your theme's own code can react to those moments. For example, you could fire a custom analytics tag when globoFilterSearchCompleted fires, or trigger a custom animation when cart:added fires after a shopper adds a product from the app's own product card/quick-add. The events themselves don't change any storefront behavior — they just notify your code that something happened, and hand it the relevant data (event.detail) to work with.

Prerequisites

• Comfortable adding custom JavaScript to your theme (for example, via a custom section or the theme's JS assets). This page is intended for developers/theme customizers, not store admins.

How to listen for an event

Add a listener anywhere in your theme's JavaScript, for example right before </body>:

<script>
  window.addEventListener('globoFilterRenderCompleted', function (event) {
    console.log('Filter results updated', event.detail);
  });
</script>

Events documented with a document target instead of window are listened for on document instead:

<script>
  document.addEventListener('cart:added', function (event) {
    console.log('Product added to cart', event.detail);
  });
</script>

Filter events

Event	Fires on	When	event.detail
globoFilterRenderCompleted	window	After the product grid finishes re-rendering following a filter change	{ products } — the newly rendered product list (omitted if nothing changed)
globoFilterTreeRenderCompleted	window	Right after the above, once the filter sidebar/tree itself has finished updating	none
globoFilterQuickviewRenderCompleted	window	After a product's "quick view" modal content has been inserted into the page	none

Search events

Event	Fires on	When	event.detail
globoFilterSearch	window	As soon as a search request starts (before results come back)	the search term (string)
globoFilterSearchCompleted	window	After search results are fetched and rendered	the search result payload (products, suggestions, pages, articles, whether it was empty, and similar fields)
globoFilterRenderSearchCompleted	window	After the search drawer's result markup has been updated for a new query	none
globoFilterSearchDrawerOpened	window	After the search drawer/popup has opened and is focused	none
globoFilterCloseSearchCompleted	window	After the search drawer/popup has finished closing	none

Cart event

Event	Fires on	When	event.detail
cart:added	document	After a shopper successfully adds a product to cart using the app's own product card/quick-add	{ product, quantity, properties } — product is Shopify's own cart response for the added item

Notes

• These events reflect the app's current behavior; treat them as a convenience for common customizations rather than a guaranteed, versioned API.

• If you need help wiring up a specific integration, contact us at [e-mail].

Related pages

• Get filtered products

• Search products

• Enable instant search widget