> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.upsellplus.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# AJAX refresh code for popular Shopify Themes


### Overview
To ensure that your cart drawer updates correctly after adding an upsell item, it's essential to implement the appropriate AJAX refresh code specific to your Shopify theme. Below is a list of refresh codes for various popular themes:​

### How to Implement Cart Drawer Refresh Callbacks

**To refresh your cart drawer, you need to:**
* **Identify your Shopify theme:** Check your Shopify admin under **Online Store > Themes** to find your active theme and its version.
* **Add the theme-specific callback code:** Use the code snippet for your theme (listed below) in the app’s cart Drawer > Advanced > Refresh code section.
* **Test thoroughly:** Test the callback in a development store to ensure it works with your theme version, as code may vary slightly.

Focal
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
upsellplusapp.init_drawer_offer();
```

Impulse
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
$("form.ajaxcart .js-qty__num").first().trigger("change");
upsellplusapp.init_drawer_offer();
```

Streamline
```javascript
document.dispatchEvent(new CustomEvent("cart:build"))
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
upsellplusapp.init_drawer_offer();
```

Brooklyn
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
ajaxCart.load();
upsellplusapp.init_drawer_offer();
```

Flex
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
Shopify.theme.jsAjaxCart.updateView();
upsellplusapp.init_drawer_offer();
```

Flow
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.querySelector('form.cart input.ajaxcart__qty-num').dispatchEvent(new Event("change", { bubbles: true }));
upsellplusapp.init_drawer_offer();
```

Prestige
```
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
upsellplusapp.init_drawer_offer();
```

OR
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
upsellplusapp.init_drawer_offer();
```

Debut
```javascript
closeAjaxCart();
ajaxCartUpdate();
```

Ella
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.querySelector('div.has-items input.item-quantity').dispatchEvent(new Event("change", { bubbles: true }));
upsellplusapp.init_drawer_offer();
```
Debutify
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
theme.ajaxCart.update();
upsellplusapp.init_drawer_offer();
```
Warehouse
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
bubbles: true}));
upsellplusapp.init_drawer_offer();
```

Cart.js
```javascript
CartJS.getCart(); 
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
upsellplusapp.init_drawer_offer();
```

Venue
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.querySelector('form.cart input.ajaxcart__qty-num').dispatchEvent(new Event("change", { bubbles: true }));
upsellplusapp.init_drawer_offer();
```

Venture	
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
fetchCart();
upsellplusapp.init_drawer_offer();
```

Broadcast
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
cart.getCart();
upsellplusapp.init_drawer_offer();
```

Shella
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
theme.cart.updateData()
setTimeout(() => { theme.cart.updateCart(); }, 1000);
```
	

Dawn
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.querySelector("#upsellplus_drawer_offer").innerHTML = ""; ajaxCart.load(); 
upsellplusapp.init_drawer_offer();
```

Testament
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
Shopify.getCart(ajaxifyShopify.buildCart);
upsellplusapp.init_drawer_offer();
```

Refresh
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.querySelector('form.cart__contents input.quantity__input').dispatchEvent(new Event("change", { bubbles: true }));
upsellplusapp.init_drawer_offer();
```

Foxpad
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.querySelector('form.cart-flyout__form input.quantity').dispatchEvent(new Event("change"));
upsellplusapp.init_drawer_offer();
```

Athens
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.querySelector('form.mini-cart-inner input.quantity-input-field').dispatchEvent(new Event("change", { bubbles: true }));
upsellplusapp.init_drawer_offer();
```

Vella Framework
```javascript
$('.drawerProductQty .qtyNum').first().trigger("change");
$("#upsellplus_drawer_offer").innerHTML = "";
upsellplusapp.init_drawer_offer();
```

Sense
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.querySelector('form.cart__contents input.quantity__input').dispatchEvent(new Event("change", { bubbles: true }));
upsellplusapp.init_drawer_offer();
```

Baseline
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.body.dispatchEvent(new CustomEvent("baseline:modalcart:afteradditem"))
upsellplusapp.init_drawer_offer();
```

Go Live
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
$("form.cart-form .cart__qty-input").first().trigger("change");
upsellplusapp.init_drawer_offer();
```

Expanse
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.dispatchEvent(new CustomEvent('cart:build'));
upsellplusapp.init_drawer_offer();
```

Starter
```javascript
setTimeout(function(){
$(window).trigger('updateCart');
}, 100)
```

Plantco
```javascript
document.documentElement.dispatchEvent(new CustomEvent('wrapped:custom:update', {bubbles: true}));
```

Craft
```javascript
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.querySelector('form.cart__contents input.quantity__input').dispatchEvent(new Event("change", { bubbles: true }));
upsellplusapp.init_drawer_offer();
```

September 2025 update:

**Focal**
```
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
```

**Impulse**
```
$("form.ajaxcart .js-qty__num").first().trigger("change");
```

**Streamline**
```
document.dispatchEvent(new CustomEvent("cart:build"))
```

**Brooklyn**
```
ajaxCart.load();
```

**Flex**
```
Shopify.theme.jsAjaxCart.updateView();
```

**Flow**
```
document.querySelector('form.cart input.ajaxcart__qty-num').dispatchEvent(new Event("change", { bubbles: true }));
```

**Prestige**
```
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
```
OR
```
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
```

**Debut**
```
closeAjaxCart();
ajaxCartUpdate();
```

**Ella**
```
document.querySelector('div.has-items input.item-quantity').dispatchEvent(new Event("change", { bubbles: true }));
```

**Debutify**
```
theme.ajaxCart.update();
```

**Warehouse**
```
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
```

**Cart.js**
```
CartJS.getCart();
```

**Venue**
```
document.querySelector('form.cart input.ajaxcart__qty-num').dispatchEvent(new Event("change", { bubbles: true }));
```

**Venture**
```
fetchCart();
```

**Broadcast**
```
cart.getCart();
```

**Shella**
```
theme.cart.updateData()
```

**Testament**
```
Shopify.getCart(ajaxifyShopify.buildCart);
```

**Refresh**
```
document.querySelector('form.cart__contents input.quantity__input').dispatchEvent(new Event("change", { bubbles: true }));
```

**Foxpad**
```
document.querySelector('form.cart-flyout__form input.quantity').dispatchEvent(new Event("change"));
```

**Athens**
```
document.querySelector('form.mini-cart-inner input.quantity-input-field').dispatchEvent(new Event("change", { bubbles: true }));
```

**Vella Framework**
```
$('.drawerProductQty .qtyNum').first().trigger("change");
```

**Sense**
```
document.querySelector('form.cart__contents input.quantity__input').dispatchEvent(new Event("change", { bubbles: true }));
```

**Baseline**
```
document.body.dispatchEvent(new CustomEvent("baseline:modalcart:afteradditem"))
```

**Go Live**
```
$("form.cart-form .cart__qty-input").first().trigger("change");
```

**Expanse**
```
document.dispatchEvent(new CustomEvent('cart:build'));
```

**Starter**
```
setTimeout(function(){
$(window).trigger('updateCart');
}, 100)
```

**Plantco**
```
document.documentElement.dispatchEvent(new CustomEvent('wrapped:custom:update', {bubbles: true}));
```

**Craft**
```
document.querySelector('form.cart__contents input.quantity__input').dispatchEvent(new Event("change", { bubbles: true }));
```

**For Shopify Theme 2.0 (like Dawn, Spotlight, Trade, Ride):**

For these themes, use the following code to fetch and update the cart drawer section:
```
fetch(`${routes.cart_url}?sections=cart-drawer`)
    .then((response) => response.json())
    .then((sections) => {
      const sectionIds = ['cart-drawer'];
      for (const sectionId of sectionIds) {
        const htmlString = sections[sectionId];
        const html = new DOMParser().parseFromString(htmlString, 'text/html');
        const sourceElement = html.querySelector(`${sectionId}`);
        const targetElement = document.querySelector(`${sectionId}`);
        if (targetElement && sourceElement) {
          targetElement.replaceWith(sourceElement);
        }
      }
      document.body.classList.add('overflow-hidden');
      const theme_cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
      if (theme_cart && theme_cart.classList.contains('is-empty')) theme_cart.classList.remove('is-empty');
      theme_cart.classList.add('active');
    })
    .catch((e) => {
      console.error('Error updating cart sections:', e);
    });
```

**For Shopify Horizon AI theme (link Horizon, Savor, Heritage, Atelier, Vessel, Pitch, Ritual, Fabric, Tinker, Dwell):**

For Horizon AI themes, use this code to trigger a cart update event:
```
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();
        }
      });
    });
```