---
title: API for apps and custom code
url: https://support.troopthemes.com/guide/maker/api-for-custom-code/
theme: Maker
theme_styles: Bloom
---

# API for apps and custom code in Maker

These events are for **app developers and custom-code** work, not for Theme settings. Merchants changing colors or sections should not start here.

Use your app, **Custom liquid**, or custom JS. Prefer [app embeds](https://support.troopthemes.com/guide/using-apps-with-themes/) over editing `theme.liquid`.

> **Best-effort, not full support**
>
> This page documents theme events for your own code to hook into. Writing and debugging that code is outside [what we can help with](https://support.troopthemes.com/submit-a-support-ticket/); a developer or Shopify Expert is the right resource for custom integrations.

> **Compatibility**
>
> The methods & events on this page are available on Maker versions 7.6.1 and up.

### Page loaded (Maker)

We wait to reveal much of the page until the DOM has fully loaded to allow asynchronous JavaScript a chance to initialize. It is recommended to hook into our ready event once the page has been unveiled:

    window.addEventListener('theme:loaded', () => {
      // add callback code here
    });

### Cart updated (Maker)

We use an Ajax cart that refreshes all products and the total when a quantity has been changed, or an item has been removed/added to the cart.

If you’re modifying cart markup you’ll need to do so after it has been updated:

    window.addEventListener('theme:cart:updated', ({ detail: cart }) => {
      console.log(cart);
    });

The event returns the updated `cart` , a DOM element object you can use to select updated cart items.

### Refresh cart HTML (Maker)

If an app or custom code changes cart data outside of the theme cart UI, trigger a cart refresh event to re-request and re-render the cart section HTML.

    window.trigger('theme:cart:refresh');

This event posts to Shopify's cart update endpoint and fetches the latest cart HTML.

> **Compatibility**
>
> The `theme:cart:refresh` event is available on Maker versions 12.1.0 and up.

### Product added to cart (Maker)

Products can be added to the cart via _Add to cart_ buttons, or _Quick add_ buttons. In either case, you can use the following to listen to those events:

    window.addEventListener('theme:cart:productAdded', ({ detail: variantId }) => {
      console.log(variantId);
    });

The variant ID of the added item is returned.

### Product variant changed (Maker)

Triggered when a product’s variant has changed:

    window.addEventListener(
      `theme:product:${productId}:variantUpdated`,
      ({ detail: { variant } }) => {
        console.log(variant);
      }
    );

Where `productId` is defined (usually extracted from Liquid) as the following:

    {% assign productId = product.id | append: '-' | section.id %}

> **Legacy callback**
>
> Please see the legacy `variantUpdated` callback below for Maker versions below 8.0.0:
>
> window.addEventListener(
>   'theme:product:variantUpdated',
>   ({ detail: { section, variant } }) => {
>     console.log(section, variant);
>   }
> );

The section DOM object the product belongs to, as well as the [product variant](https://shopify.dev/docs/api/liquid/objects/variant) is returned.

We’ve included the `section` object in case you need to properly scope multiple products on the same page.

### Collection or search filtering finished (Maker)

Triggered when the _Collection page_ or _Search products results_ page has been reloaded after a filter has been applied:

    window.addEventListener('theme:navigation:reloaded', () => {
      // add callback code here
    });

### Modal opened (Maker)

Triggered when the modal is opened:

    window.addEventListener('theme:modal:opened', () => {
      // add callback code here
    });

### Modal closed (Maker)

Triggered when the modal is closed:

    window.addEventListener('theme:modal:closed', () => {
      // add callback code here
    });

### Drawer events (Maker)

We include events for the drawer based on the following convention:

    window.addEventListener(`theme:drawer:${side}:${status}`, () => {
      // add callback code here
    });

Where `side` is one of `left`, `right`, or `top`. While `status` is one of `opening`, `opened`, `closing`, or `closed`.

> **Legacy drawer**
>
> Please see the legacy drawer methods below for Maker versions below 8.1.0:

We include individual events for each drawer (right/left) as well as transitory states if you need to add something to the drawer before it fully opens/closes.

The following is triggered before the right drawer closes:

    window.addEventListener('theme:offCanvas:rightClosing', () => {
      // add callback code here
    });

The following is triggered before the left drawer closes:

    window.addEventListener('theme:offCanvas:leftClosing', () => {
      // add callback code here
    });

The following is triggered after the right drawer is closed:

    window.addEventListener('theme:offCanvas:rightClosed', () => {
      // add callback code here
    });

The following is triggered after the left drawer is closed:

    window.addEventListener('theme:offCanvas:leftClosed', () => {
      // add callback code here
    });

The following is triggered before the right drawer opens:

    window.addEventListener('theme:offCanvas:rightOpening', () => {
      // add callback code here
    });

The following is triggered before the left drawer opens:

    window.addEventListener('theme:offCanvas:leftOpening', () => {
      // add callback code here
    });

The following is triggered after the right drawer is opened:

    window.addEventListener('theme:offCanvas:rightOpened', () => {
      // add callback code here
    });

The following is triggered after the left drawer is opened:

    window.addEventListener('theme:offCanvas:leftOpened', () => {
      // add callback code here
    });

### Manually close drawer (Maker)

We offer methods to close the right and left drawers:

- `theme.off_canvas.closeLeft()`
- `theme.off_canvas.closeRight()`

### Swipe detection (Maker)

Our themes include functionality to detect horizontal swipe events:

    window.addEventListener('theme:swipe:left', () => {
      // add 'left' swipe callback code here
    });

Your app or Custom liquid / custom JS.

Theme editor settings. Prefer [app embeds](https://support.troopthemes.com/guide/using-apps-with-themes/) over editing `theme.liquid`.
    window.addEventListener('theme:swipe:right', () => {
      // add 'right' swipe callback code here
    });