Guide to Creating an "Added to Cart" Event for Shopify

read
Last updated at:

Overview

Learn how to create a custom Added to Cart event for Shopify that tracks when a customer adds an item to their cart, which can be used to trigger an abandoned cart flow. Creating a custom Added to Cart event involves modifying a JavaScript snippet (included in this guide) and pasting it into your Shopify theme files.

Klaviyo’s built-in Shopify integration already tracks a Checkout Started event when a customer adds item(s) to their cart and then enters 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 abandoned cart flow as soon as a customer adds an item to their cart.

Please note the Added to Cart event is only tracked for users previously cookied by Klaviyo, and that you must already have Viewed Product tracking installed in order for the Added to Cart event to function properly.

Adding the “Added to Cart” Snippet

For Shopify 2.0 Themes

If your Shopify store uses a Shopify 2.0 theme, you’ll need to add the Added to Cart code snippet via Custom Liquid block. Just like with non-2.0 Shopify themes, you may need to edit the content of the snippet. Skip ahead to step three of the following ‘For All Other Themes’ section to learn how to edit your snippet before pasting it in your custom liquid block. 

  1. In Shopify, navigate to your theme and click Customize
  2. At the top of the page, click the Home page dropdown, and select Products > Default product to be brought to your default product page. 
  3. Click Add section in the left sidebar, and then select Custom Liquid.
  4. Paste the snippet below into the Custom Liquid text box.
    <script type="text/javascript">
    var _learnq = _learnq || [];
    	document.getElementById("AddToCart").addEventListener('click',function (){
     		_learnq.push(['track', 'Added to Cart', item]);
    	});
    </script>
  5. Click Save in the upper right. 
  6. In the left bar, your new Custom Liquid block for Added to Cart should automatically have been placed below the other sections on the page, including your Custom Liquid block for Klaviyo’s Viewed Product tracking. 
    1. If your Added to Cart block needs to be moved, hover over the block and click the six dots to drag it below your other sections.
      Shopify product page section hierarchy with two custom liquid sections, one showing six gray dots, below other product setions

Added to Cart tracking has now been added to your Shopify store. 

For All Other Themes

       1. To add the 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>

       2. 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

       3. Next, check if you need to modify your snippet. To do this, check the ID of the “Add to Cart” button on your site, and see if it matches the AddToCart variable in the snippet. The placement of the Add to Cart variable, whose default name is AddToCart, is highlighted within the snippet below.

Klaviyo's Added to Cart snippet with Add to Cart button ID highlighted in yellow

       4. If the ID of the Add to Cart button on your site isn’t AddToCart, you’ll need to change the text within the quotes to match the button’s ID. To check the ID of the button, open up one of your site’s product pages, right-click your "Add to Cart" button, and select Inspect.

       5. The console will open, showing the source code of your "Add to Cart" button. The following image shows the ID of the "Add to Cart" button highlighted in the console. The ID of the button on the page shown here (addToCart-product-template) is different from the variable in the default snippet. Update the snippet to match the ID on the page.

If your source code isn’t showing a button ID, skip ahead to the next section and learn how to use an alternate snippet with class notation instead of button notation. 

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

Klaviyo's Added to Cart snippet with addtoCart product template button ID highlighted in pink

       6. Once you’ve saved your product.liquid file, you’ve finished adding the snippet. 

Alternate Snippet for "Add to Cart" Button without a Button ID

Most Shopify Theme files use a button 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 (which you can determine by following the steps in the prior section) and instead uses a class notation, you'll use an alternate code snippet to enable the "Add to Cart" event.

In the console, your code may look something like this:

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, where class = “btn product-form_cart-submit btn--secondary-accent”

       1. If your button is defined by class notation, paste the following alternate 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>

       2. This code will likely need to be modified with your class name. Compare your button code in between the quotations, highlighted in the following example, with the contents in between the parentheses after getElementsByClassName in the code snippet above. For example, the class listed in the screenshot is “btn product-form_cart-submit btn--secondary-accent” and the variable listed in the snippet is “add-to-cart”.

Add to cart button code in console with class equals btn product-form_cart-submit btn--secondary-accent highlighted in yellow

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

For example, the code snippet below has been modified with the classname value “btn product-form_cart-submit btn--secondary-accent” surrounded by double quotations.

Klaviyo's alternate Added to Cart snippet with classname value btn product-form_cart-submit btn--secondary-accent

       3. Once you’ve saved your product.liquid file, you’ve finished adding the snippet. 

Troubleshooting Your “Added to Cart” Snippet

After you’ve added the snippet, it should watch the "Add to Cart'' button and track an Added to Cart event whenever a cookied visitor clicks this button. This event functions similarly to the Viewed Product event. Each item someone adds to their cart will trigger a new event, and you can view these events by navigating to Analytics > Metrics, searching for the event, and clicking on the Activity Feed.

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

If you are not seeing Added to Cart events in your account, try the following:

  • Make sure your Klaviyo.js (also known as the Active on Site snippet) is working, which is necessary for Added to Cart to function properly. This should have been added to your site automatically when you integrated with Klaviyo, but you can check that it’s working by following the steps in How to Install Klaviyo.js for Shopify Stores.
  • Make sure your Viewed Product tracking is working, which is also necessary for Added to Cart to function properly. This snippet is added manually, and you can learn how to add and test it in the Viewed Product section of our How to Integrate article

If you are still encountering problems with your Added to Cart snippet, it could be due to an issue with identifying the Added to Cart button. In this case, please contact Klaviyo support

The Abandoned "Added to Cart" Flow

Using the Flows Library

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 essentials section of the library, you will find the standard Abandoned Cart Reminder flow. This flow is triggered by the Checkout Started event.

Screen_Shot_2021-11-10_at_12.59.12_PM.png

You can also use an Abandoned Cart flow specifically triggered by the Added to Cart event. To use this flow, click into the "Prevent lost sales" goal section.

Screen_Shot_2021-11-10_at_1.24.53_PM.png

The Added to Cart Abandoned Cart flow tends to target more casual potential shoppers who have yet to start checkout.

You can also filter or search for all Abandoned Cart Reminder flows by searching "abandoned cart" in the toolbar or navigating to the "Prevent lost sales" goal section on the library landing page.

Screen_Shot_2021-11-10_at_1.37.02_PM.jpg

If you implemented our standard Shopify Added to Cart snippet, this flow will be ready to go with all the recommended filters and dynamic email content ready to power personalized cart followup emails.

Building Your Flow from Scratch

If you'd like, you can also create a new flow and select your custom Added to Cart metric as the trigger, instead of using the pre-built flow. You can build the rest of the flow out following the model of an Abandoned Cart flow, but make sure to update the dynamic content to reflect the Added to Cart event’s data structure.

Make sure to add a condition such as “Added to Cart zero times since starting this flow” to 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.

Additionally, 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.

Want to edit your Abandoned Added to Cart emails in Klaviyo's new template editor? In the coming weeks, you'll have the option to convert your existing templates to the new editor. The following instructions refer to Klaviyo's classic template editor.

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, we’ve added the title of the product to a simple reminder message.

You can also add more about the product and include a link to the product page (although not a link to the cart). This is because Added to Cart is sent from the front-end, and a cart rebuild URL does not exist yet for the customer. If you wish to leverage the cart rebuild URL, you should use the standard Abandoned Cart flow triggered by the Started Checkout event.

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 a ‘Started Checkout’ 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?
591 out of 1071 found this helpful