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:
The product is added to the cart
Instead of refreshing the page or going to the cart page, your custom JavaScript code is executed
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.
Code Snippets for Popular Shopify Themes
Free Shopify Themes (Dawn, Refresh, Crave, Ride, Studio, Colorblock, Craft, Taste, Origin, Trade, Publisher, Sense, Spotlight)
Cart Type: Drawer
Copy // 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
Copy const cartNotification = document.getElementsByTagName('cart-notification')[0];
cartNotification.open()
// Updates the cart icon bubble
fetch('/?sections=cart-notification-product')
.then(response => response.json())
.then(data => {
const html = data['cart-notification-product']
const newHTML = new DOMParser().parseFromString(html, 'text/html').querySelector(`[id="cart-notification-product-${resp.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(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);
});
Expanse Theme
Copy // Expanse theme cart drawer trigger
if (typeof window.theme !== 'undefined') {
window.theme.cart.showDrawer();
}
Impulse Theme
Copy // Impulse theme cart drawer trigger
document.dispatchEvent(new CustomEvent('ajaxProduct:added', {
detail: {
product: response
}
}));
document.documentElement.dispatchEvent(new CustomEvent('cart:open'));
Prestige Theme
Copy // Prestige theme cart drawer trigger
document.dispatchEvent(new CustomEvent('product:added', {
bubbles: true
}));
Motion Theme
Copy // 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
Copy // Streamline theme cart drawer trigger
document.dispatchEvent(new CustomEvent('theme:cart:reload', {
bubbles: true,
detail: {
openDrawer: true
}
}));
Turbo Theme
Copy // Turbo theme cart drawer trigger
if (typeof window.ajaxCart !== 'undefined') {
window.ajaxCart.load();
window.ajaxCart.showDrawer();
}
Pipeline Theme
Copy // Pipeline theme cart drawer trigger
document.dispatchEvent(new CustomEvent('ajaxCart.afterCartLoad', {
bubbles: true
}));