---
title: Standard storefront events and actions
description: >-
  Listen for storefront events and call standard actions to interact with themes
  without theme-specific workarounds.
source_url:
  html: 'https://shopify.dev/docs/apps/build/online-store/standard-events-and-actions'
  md: >-
    https://shopify.dev/docs/apps/build/online-store/standard-events-and-actions.md
---

# 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`.

***

## Listening 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:

```javascript
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](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).

***

## Calling 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:

```javascript
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](https://shopify.dev/docs/storefronts/themes/best-practices/standard-actions).

***