# Featured products: Add custom events when product is added to cart - eg. show slideout cart

The "Run custom code (advanced)" setting allows you to execute custom JavaScript code when a product is added to the cart in Design Pack sections. This feature enables seamless integration with your Shopify theme's cart functionality without modifying the core section code.

### How It Works

When a user clicks an "Add to Cart" button in a Design Pack section with custom theme trigger enabled:

1. The product is added to the cart
2. Instead of refreshing the page or going to the cart page, your custom JavaScript code is executed
3. This code can trigger your theme's cart drawer/popup or perform any other actions

#### Step 1: Enable setting

In your section or block settings, set the "Buy button action" to "Run custom code (advanced)".

#### Step 2: Add Your Custom Code

In the custom code field, add the JavaScript code that should run after a product is added to the cart.

<figure><img src="/files/UHY8jHcPDZmhxdzf3QCr" alt="" width="272"><figcaption></figcaption></figure>

### Code Snippets for Popular Shopify Themes

**Shopify Free Themes (Horizon)**

```
import('@theme/events').then(({ CartUpdateEvent }) => {
      const cartDrawer = document.querySelector('cart-drawer-component');    
      fetch('/cart.js')
      .then(res => res.json())
      .then(cart => {
        const event = new CartUpdateEvent(cart, 'manual-trigger', {
          itemCount: cart.item_count,
          source: 'fad-refresh',
          sections: {}
        });
        document.dispatchEvent(event);
        if (cartDrawer?.hasAttribute('auto-open')) {
          cartDrawer.open();
        }
      });
    });
```

#### Shopify Free Themes (Dawn, Refresh, Crave, Ride, Studio, Colorblock, Craft, Taste, Origin, Trade, Publisher, Sense, Spotlight)&#x20;

Cart Type: Drawer&#x20;

```
// Shopify theme cart drawer trigger
const cartItems = document.getElementsByTagName('cart-drawer-items')[0];
const cartDrawer = document.getElementsByTagName('cart-drawer')[0]

// This is if the cart is empty 
if (cartDrawer.classList.contains('is-empty')) {
  cartDrawer.classList.remove('is-empty');
}
const emptyDrawerElement = cartDrawer.querySelector('.drawer__inner-empty');
if (emptyDrawerElement) {
  emptyDrawerElement.remove();
}
const cartContentsForm = document.querySelector('.cart__contents');
if (cartContentsForm) {
  cartContentsForm.style.display = 'block';
}

// Updates and opens the cart
cartItems.onCartUpdate();
cartDrawer.open();

// Updates the cart icon bubble 
fetch('/?sections=cart-icon-bubble')
.then(response => response.json())
.then(data => {
  const cartIconBubble = document.getElementById('cart-icon-bubble');
  cartIconBubble.innerHTML = data['cart-icon-bubble']
})
.catch(error => {
  console.error('Error fetching cart data:', error);
});
```

Cart Type: Popup Notification&#x20;

```
const cartNotification = document.getElementsByTagName('cart-notification')[0];
cartNotification.open()

// Updates the cart icon bubble 
fetch('/?sections=cart-notification-product')
.then(dataResponse => dataResponse.json())
.then(data => {
  const html = data['cart-notification-product']
  const newHTML = new DOMParser().parseFromString(html, 'text/html').querySelector(`[id="cart-notification-product-${response.key}"]`).innerHTML;
  const cartNotificationProduct = document.getElementById('cart-notification-product');
  cartNotificationProduct.innerHTML = newHTML
})
.catch(error => {
  console.error('Error fetching cart data:', error);
});

// Updates the cart icon bubble 
fetch('/?sections=cart-icon-bubble')
.then(dataResponse => dataResponse.json())
.then(data => {
  const cartIconBubble = document.getElementById('cart-icon-bubble');
  cartIconBubble.innerHTML = data['cart-icon-bubble']
})
.catch(error => {
  console.error('Error fetching cart data:', error);
});
```

#### Impact Theme

```
// Impact theme cart drawer trigger
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
  bubbles: true
}));
document.getElementsByTagName('cart-drawer')[0].show()
```

#### Expanse Theme

```
// Expanse theme cart drawer trigger
if (typeof window.theme !== 'undefined') {
  window.theme.cart.showDrawer();
}
```

#### Impulse Theme

```
// Impulse theme cart drawer trigger
document.dispatchEvent(new CustomEvent('ajaxProduct:added', {
  detail: {
    product: response
  }
}));
document.documentElement.dispatchEvent(new CustomEvent('cart:open'));
```

#### Prestige Theme

```
// Prestige theme cart drawer trigger
document.dispatchEvent(new CustomEvent('product:added', {
  bubbles: true
}));
```

#### Motion Theme

```
// Motion theme cart drawer trigger
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
  bubbles: true
}));
document.documentElement.dispatchEvent(new CustomEvent('cart:open', {
  bubbles: true
}));
```

#### Streamline Theme

```
// Streamline theme cart drawer trigger
document.dispatchEvent(new CustomEvent('theme:cart:reload', {
  bubbles: true,
  detail: {
    openDrawer: true
  }
}));
```

#### Turbo Theme

```
// Turbo theme cart drawer trigger
if (typeof window.ajaxCart !== 'undefined') {
  window.ajaxCart.load();
  window.ajaxCart.showDrawer();
}
```

#### Pipeline Theme

```
// Pipeline theme cart drawer trigger
document.dispatchEvent(new CustomEvent('ajaxCart.afterCartLoad', {
  bubbles: true
}));
```

Don't see your theme here? Drop us a note at <support@design-packs.com>!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/featured-products-add-custom-events-when-product-is-added-to-cart-eg.-show-slideout-cart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.