How to Create a Custom "Added to Cart" Event for Shopify

read
Last updated at:

Overview

Learn how to add a custom Added to Cart event for Shopify that tracks when a customer adds an item to their cart, which can be used for an abandoned cart flow.

Our built-in Shopify integration already tracks a Checkout Started event when a customer adds an item to their cart and progresses to enter their email during the checkout process. The Checkout Started event is used to trigger the standard Abandoned Cart flow. With a custom Added to Cart event, you can trigger an event as soon as customers add items to their cart.

Note: The Added to Cart event is only tracked for users previously cookied by Klaviyo.

Once you're syncing custom Added to Cart events, you can build out a flow that triggers off of this event, but otherwise functions just like an Abandoned Cart flow.

This process involves modifying a JavaScript snippet (included in this guide) and pasting it into your Shopify theme files.

Please note that you must already have Viewed Product tracking installed in order for the Added to Cart event to function properly.

The "Added to Cart" Snippet

Paste this code directly underneath the Klaviyo Viewed Product snippet in your product.liquid theme:

<script type="text/javascript">
	var _learnq = _learnq || [];
	document.getElementById("AddToCart").addEventListener('click',function (){
 		_learnq.push(['track', 'Added to Cart', item]);
	});
</script>

The following screenshot shows this snippet added to the bottom of the product.liquid file.

Shopify’s edit code page with the product.liquid file open, showing Klaviyo’s Added to Cart snippet amended to the bottom of the file

Next, check to see if you need to modify your snippet. Inside your snippet, the AddToCart variable should match the ID of your "Add to Cart" button. To check this, open up one of your product pages, right-click your "Add to Cart" button, and select Inspect.

The SWAK Lips Shopify store showing lips and a nose on the left, with the right click menu open over Add to Cart, with Inspect selected

In the console, check the source code of your "Add to Cart" button. You want the ID of your button to match the variable in your snippet. The following image shows the ID of the "Add to Cart" button highlighted in the console. The ID of the button on my page (addToCart-product-template) is different than the ID in the default snippet. So, I'll update the snippet to match the ID on my page.

Console open below the SWAK Lips store with Added to Cart ID, addedToCart-product-template, highlighted

You can see my updated snippet in the image below, with the updated ID highlighted.

Klaviyo’s Added to Cart snippet with Cart ID from console, addToCart-product-template, highlighted

Alternate Code Snippet for "Add to Cart" Button without an ID

Most Shopify Theme files use an ID to reference the "Add to Cart" button.  For styling reasons, some Shopify Themes use only a class notation to style their "Add to Cart" button. If your "Add to Cart" button does not have a button ID, and instead uses a class notation, you'll use an alternate code snippet to enable the "Add to Cart" event.

Check your "Add to Cart" Button for an ID

On your website, navigate to a product page. Right-click anywhere on the webpage, and select Inspect.
Brazilian Coffee Blend product page with right click menu open and Inspect highlighted, with coffee bag on left and product purchase information on right

On the console, click the icon on the upper-left to select and inspect an element on the webpage.
Console with inspect an element icon in upper left magnified and highlighted in a blue circle
Hover over the Add to Cart button. You should see the button code highlighted in the console. 
Product page with coffee bag on left and console open, with inspect element popup above Add to Cart and button code highlighted in console

Notice that this "Add to Cart" button does not have a button ID; instead, it is referenced by a class notation:

Add to Cart button code from console utilizing class notation instead of a button ID

Alternate Code Snippet for "Add to Cart" Button with Class Notation

If your "Add to Cart" button does not have an ID and uses only a class notation, paste this code snippet (instead of the previous code snippet) at the bottom of your product.liquid file:

<script type="text/javascript">
  var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
  var addToCart = function() {
  _learnq.push(['track', 'Added to Cart', item]);
  }; 
for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('click', addToCart, false); } </script>

Often this code snippet does not need to be modified. Occasionally it does.

Compare your button code:Add to Cart button code from console with class=”btn product-form_cart-submit” highlighted

With the contents of the code snippet:Klaviyo’s alternate Add to Cart code snippet utilizing class notation in white on a black background, with class name add-to-cart in yellow

If these two don't match, change the code snippet to reflect the class name info.

For example, this code snippet has been modified to reflect the classname value product-form__cart-submit Alternate add to cart snippet with class modified to name product-form_cart-submit, in white on black background

You can also use getElementsByClassName with multiple classes, separated by spaces. For example, in this code snippet, the classes 'btn', 'btn--full', and 'add-to-cart' are all separated by a space:Alternate add to cart snippet with class name modified to include multiple classes separated by spaces, btn btn--full add-to-cart, in white on black background

After you've updated your snippet and saved your theme files, this snippet will watch the "Add to Cart" button, and track an Added to Cart event whenever one of your customers clicks this button.

This event functions similarly to the Viewed Product event. Each item someone adds to their cart will trigger a new event.

Activity feed for Added to Cart metric in Klaviyo with list of example metrics and + Add Filter in grey box

The Abandoned "Added to Cart" Flow

To get started with an Abandoned Cart flow using the Added to Cart event, we recommend using the pre-built flow available in the Flow Library.

In the library, you can filter or search for all Abandoned Cart Reminder flows, and find the one with labeled with Added to Cart Trigger. If you implemented our standard Shopify Added to Cart snippet, this flow will be ready to go with all the recommended filters & dynamic email content ready to power personalized cart follow up emails.

Flows Browse Ideas in Klaviyo, with Abandoned Cart Reminder with Added to Cart Trigger magnified in a blue circle

If you'd like, you can also create a new flow and select your custom Added to Cart metric as the trigger. You can build the rest of the flow out following the model of an Abandoned Cart flow.

Make sure to add a condition to the flow that will prevent shoppers from being bombarded with emails each time they add an item to their cart. Additionally, if you also send a traditional Abandoned Cart flow that is triggered by the Checkout Started event, you'll want to add another filter to the flow to make sure that people who trigger this second flow do not get your Added to Cart flow.

If you have both an Add to Cart and a Browse Abandonment flow, your customers could get the emails for both flows, depending on your Smart Sending settings. To avoid this, add the filter Added to Cart zero times since starting this flow to your Browse Abandonment flow.

For example, in the following screenshot, the flow trigger includes three filters:

  • Someone has not placed an order since starting this flow.
  • Someone has not started a checkout since starting this flow.
  • Someone has not been in this flow in the last 30 days.

Klaviyo’s flow editor showing an abandoned cart flow triggered by added to cart, with trigger setup on left and flow on right

The Added to Cart event contains similar data to the built-in Checkout Started event. In order to dynamically populate your flow emails, you can use the data from the event and build an email similar to a standard Abandoned Cart email.

After at least one Added to Cart event has triggered, you can view the data included in the event by previewing one of your Abandoned Added to Cart flow emails. Inside the preview modal, click on the piece of event data you want to include in your email, and copy the code slug that appears.

Preview email modal in Klaviyo with event.Name in text box and Show directly in Klaviyo radio button selected, with cancel in grey box and preview now in blue box with arrow

You can then paste this code slug into a text block (or elsewhere). In the image below, I've added the title of the product to a simple reminder message.

You could add more about the product as well, and include a link to the product page (although not to the cart).  

Klaviyo’s email editor showing added to cart email 1 with event.Name code inserted in place of the product name viewed by the customer

After saving the block, when you preview the email the data dynamically appears.

Preview of email in Klaviyo showing lips with pink lipstick in center below We saw you checking out MATTE GLOSS - PINK and Close Preview in blue box

Since the flow triggers when someone adds a single item to their cart, only one item will display in the email. Unlike with an Abandoned Cart flow, there are not multiple items to loop over.

Check out our guide on how to Personalize Flow Emails with Dynamic Event Data to learn more.

Additional Resources

Guide to Creating an Abandoned Cart Flow

Reviewing Your Shopify Data

Troubleshooting Your Shopify Integration

 

x
Was this article helpful?
502 out of 922 found this helpful