Skip to main content

Standard storefront events and actions

Standard storefront events are DOM events that themes dispatch when commerce interactions occur on the storefront, such as product views, cart changes, and collection filter changes. Standard storefront actions are async functions on Shopify.actions that themes expose so your app can trigger theme behaviors directly. Both work across all themes that support them, so your app doesn't need to parse theme DOM structure or intercept window.fetch.

Anchor to Listening to eventsListening to events

Standard events use the shopify: namespace prefix and bubble to document, so your app can listen from any script. The following example listens for cart line updates and reads the updated cart total once the change resolves:

document.addEventListener('shopify:cart:lines-update', (event) => {
const { action, lines } = event;

event.promise?.then(({ cart }) => {
console.log(action, lines, cart.cost.totalAmount.amount);
});
});

For the full list of events, payload details, and dispatch targets, see standard storefront events.

Anchor to Calling actionsCalling actions

Standard actions are async functions on Shopify.actions that your app calls to trigger theme behaviors. The theme decides how to handle each call. For example, it might update a counter, re-render a section, or reload the page. The promise resolves with the result regardless.

Actions are injected on every Liquid storefront:

const { cart } = await Shopify.actions.updateCart({
lines: [{ merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }],
});

await Shopify.actions.openCart();

For the full list of actions, payload shapes, and return types, see standard storefront actions.

Was this page helpful?