If you want to trigger a custom action in your theme based on the Instant add to cart action, such as opening the cart drawer or showing a cart popup, you will need to add a bit of code to your Shopify theme. This is required because every Shopify theme is different, and there are many different ways to implement this.
Below we highlighted a few of the main themes and cart apps to make the implementation easier. If your theme is not listed, or if you need help, please reach out to [email protected] and we are happy to support on the implementation!
All implementations are based on the following script:
<script>
document.addEventListener("instant:add-to-cart", () => {
// ... Add code specific to your theme
});
</script>
We recommend to add the script somewhere before the closing body tag in your theme.liquid file.
Theme: Dawn
<script>
document.addEventListener("instant:add-to-cart", () => {
fetch("/cart/update.js", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ updates: {}, sections: ["cart-drawer", "cart-icon-bubble"] }),
})
.then((res) => res.json())
.then((cart) => {
document.querySelector("cart-drawer").renderContents(cart);
document.querySelector("cart-drawer.drawer").classList.remove("is-empty");
});
});
</script>
Note: Make sure you set the "Cart type" in "Theme settings > Cart" to "Drawer".
Theme: Flex
<script>
document.addEventListener("instant:add-to-cart", () => {
Shopify.theme.jsAjaxCart.showDrawer();
Shopify.theme.jsAjaxCart.updateView();
});
</script>
Theme: Focal
<script>
document.addEventListener("instant:add-to-cart", () => {
fetch("/cart.js")
.then((res) => res.json())
.then((cart) =>
document.documentElement.dispatchEvent(
new CustomEvent("cart:refresh", { bubbles: true, detail: { cart: cart, openMiniCart: true } })
)
);
});
</script>
Theme: Impact
<script>
document.addEventListener("instant:add-to-cart", () => {
const cartDrawer = document.querySelector("#cart-drawer");
fetch("/?section_id=cart-drawer")
.then((res) => res.text())
.then((text) => {
const sectionHTML = new DOMParser().parseFromString(text, "text/html");
const cartInnerHTML = sectionHTML.getElementById("cart-drawer").innerHTML;
cartDrawer.innerHTML = cartInnerHTML;
cartDrawer.setAttribute("open", "");
});
});
</script>
Theme: Shrine Pro
<script>
document.addEventListener("instant:add-to-cart", () => {
fetch("/cart/update.js", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ updates: {}, sections: ["cart-drawer", "cart-icon-bubble"] }),
})
.then((res) => res.json())
.then((cart) => {
document.querySelector("cart-drawer").renderContents(cart);
document.querySelector("cart-drawer.drawer").classList.remove("is-empty");
});
});
</script>
Tested with theme version 1.1.4
Theme: Minimog
<script>
document.addEventListener("instant:add-to-cart", () => {document.dispatchEvent(new CustomEvent("update-cart-drawer"));})
</script>
Tested with theme version 5.5.0
Theme: Taste
<script>
document.addEventListener("instant:add-to-cart", () => { $.getJSON('/cart.json').then(cart => { var header = document.querySelector('sticky-header'); var item = document.querySelector('#cart-notification #cart-notification-product'); var button = document.querySelector('#cart-notification #cart-notification-button'); const cartBubble = `<div class="cart-count-bubble"><span aria-hidden="true">1</span></div>`; var notification = document.getElementById('cart-notification'); var html = `<img class="cart-notification-product__image" src="" alt="" width="70" height="70" loading="lazy"> <div class="cart-notification-product__info"> <h3 class="cart-notification-product__name h4"></h3></div>`; var tempHTL = document.createElement('div'); tempHTL.innerHTML = html; tempHTL.querySelector('img').src = cart.items[0].image; // Assuming you're using the first item's image tempHTL.querySelector('.cart-notification-product__name').innerHTML = cart.items[0].title; // Assuming you're using the first item's title item.innerHTML = tempHTL.innerHTML; if ($('.cart-count-bubble').length > 0) { $('.cart-count-bubble span').text(cart.item_count); } else { $('#cart-icon-bubble').append(cartBubble); } button.innerText = `View my cart (${cart.item_count})`; notification.classList.add('animate', 'active'); addEventListener('transitionend', () => { notification.focus(); trapFocus(notification); }, { once: true }); }); });
</script>
Tested with theme version 1.1.4
Theme: Debutify
<script> document.addEventListener("instant:add-to-cart", () => { theme.ajaxCart.update(); }); </script>
App: Rebuy
<script>
document.addEventListener("instant:add-to-cart", () => {
Rebuy.SmartCart.show();
});
</script>
App: Monster Upsells
<script>
document.addEventListener("instant:add-to-cart", () => {
window.monster_refresh();
});
</script>
App: Slide-Cart & Cart Upsells
<script>
document.addEventListener("instant:add-to-cart", () => {
window.SLIDECART_UPDATE();
window.SLIDECART_OPEN();
});
</script>