Articles on: Cart

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

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


Impulse

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


Streamline

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


Brooklyn

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


Flex

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


Flow

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

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


Debut

closeAjaxCart();
ajaxCartUpdate();


Ella

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

document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
theme.ajaxCart.update();
upsellplusapp.init_drawer_offer();

Warehouse

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


Cart.js

CartJS.getCart(); 
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
upsellplusapp.init_drawer_offer();


Venue

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 

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


Broadcast

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


Shella

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


Dawn

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


Testament

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


Refresh

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

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


Athens

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

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


Sense

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

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


Go Live

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


Expanse

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


Starter

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


Plantco

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


Craft

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();
        }
      });
    });

Updated on: 26/09/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!