Skip to main content

Klaviyo Add to Cart Event Tracking in UpCart

Learn how to track Add to Cart events with Klaviyo in UpCart and keep your event data flowing properly.

Updated over a week ago

Overview

By default, UpCart takes over how carts work on your store, which means other apps—like Klaviyo—can’t always see when someone adds an item. This guide shows you two ways for how to add and fix Klaviyo Add to Cart event tracking in UpCart.

Note: Before starting, make sure you have Onsite Tracking turned on in Klaviyo, including Viewed Product Tracking with their help doc here: Klaviyo Onsite Tracking Setup Guide


Option 1: Turn On AJAX Compatibility (Fastest)

UpCart has a setting called Enhanced AJAX API Compatibility that allows other apps (like Klaviyo) to detect add-to-cart actions again.

How to enable it:

  1. Go to UpCart Editor > Settings

  2. Turn on Enhanced AJAX API Compatibility

  3. Save and test

⚠️ Important:

This may cause other apps to take over the Add to Cart process—sometimes opening the Shopify cart page instead of UpCart.

If you notice this happening, turn the setting off and use Option 2 below instead.


Option 2 (Recommended): Add Custom Klaviyo Script

This method ensures UpCart works as expected and still lets Klaviyo track events.

Steps:

  1. Go to UpCart > Settings > Custom HTML

  2. Choose Scripts (Before Load) from the dropdown

  3. Paste the following code into the field:

HTML Code to Add:

<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 the Script Does

Every time someone adds an item or accepts an upsell in UpCart, this script tells Klaviyo to track an “Added to Cart” event. You’ll also see a message in your browser console ("Klaviyo ATC") to confirm it’s working.

Here is what that looks like:


Testing the Script

You can test your Klaviyo setup by following their documentation:
How to Test Add to Cart Events – Klaviyo Guide

Note: If you run into issues during testing, we recommend reaching out to Klaviyo Support for help reviewing your tracking setup.

Did this answer your question?