Klaviyo Add to Cart Event Tracking in Upcart

This article explains how to enable accurate Klaviyo event tracking when customers add items to their cart using Upcart.

Overview

By default, Upcart takes over Shopify’s cart functionality, which can prevent third-party apps like Klaviyo from detecting cart updates. Fortunately, there are two reliable ways to restore Add to Cart (ATC) tracking in Klaviyo while keeping Upcart active.

Before you begin, make sure Klaviyo Onsite Tracking is properly configured. You can follow their setup guide here:
👉 Klaviyo Onsite Tracking Setup Guide

---

Option 1: Use AJAX Compatibility (Fastest Setup)

Upcart includes a setting that restores compatibility with other apps by exposing Shopify’s native cart update behavior. When this is enabled, Klaviyo can once again listen for Add to Cart events.

How to enable:

1. Go to Upcart > Cart Editor > Settings
2. Enable the setting: Enhanced AJAX API Compatibility
3. Click Save and test the result

⚠️ Heads up
Enabling this setting gives more control back to other apps, including redirect behaviors. If you see the cart redirecting to Shopify’s default cart page instead of opening the Upcart drawer, we recommend switching to Option 2.

---

Option 2 (Recommended): Add a Custom Klaviyo Script

This method gives you the best of both worlds, Upcart stays in full control, and Klaviyo tracking still works.

Steps:

1. Open Upcart > Cart Editor > Settings
2. Scroll down to the Custom HTML section
3. From the dropdown, choose Scripts (Before Load)
4. Paste the following script:

<script>  
  function TrackATC(){  
    var _learnq = window._learnq || [];  
    fetch(`\${window.location.origin}/cart.js`)  
      .then((res) =>  
        res.clone().json().then((data) => {  
          var cart = {  
            total_price: data.total_price / 100,  
            \$value: data.total_price / 100,  
            total_discount: data.total_discount,  
            original_total_price: data.original_total_price / 100,  
            items: data.items,  
          };  
          _learnq.push(['track', 'Added to Cart', cart]);  
          console.log("Klaviyo ATC");  
        }).catch((e) => {  
          console.error('Klaviyo add to cart tracking failed', e);  
        })  
      );  
  }  
  
  window.upcartOnAddToCart = () => { TrackATC(); };  
  window.upcartOnAddUpsell = () => { TrackATC(); };  
</script>

---

What this does:

• Sends an “Added to Cart” event to Klaviyo any time a product or upsell is added using Upcart
• Adds a confirmation message (Klaviyo ATC) to your browser console so you know it’s working

---

How to Test Your Setup

To confirm your Klaviyo integration is working properly:

• Follow Klaviyo’s guide to testing Add to Cart events
• Use your browser’s Console tab to verify the “Klaviyo ATC” log appears after adding a product
• Check Klaviyo’s analytics dashboard for ATC event data

If you still don’t see tracking data, confirm that Klaviyo’s onsite scripts are installed and enabled. For help, contact Klaviyo Help Center.

---

Summary

Method	Benefits	When to Use
Option 1 – Enable AJAX Compatibility	Fastest setup, no code required	When other apps don’t interfere
Option 2 – Add Custom Script	Most reliable, Upcart remains in control	When Option 1 causes cart redirect

If you’re using Klaviyo and Upcart together, this guide should help you track events smoothly while keeping your cart drawer experience intact.

---

Need more help? Reach out to us via in-app support.