Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  • How It Works
  • Code Snippets for Popular Shopify Themes
  1. Fundamentals
  2. Section Settings

Add custom events when product is added to cart

PreviousUsing Blog Tags Setting to Show Product-Specific Blog PostsNextSize Controls for Image & Video Blocks

Last updated 22 days ago

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.

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

// 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

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!