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 Dawn Theme

If your Shopify store uses the Shopify 2.0 Dawn theme, you’ll need to add the Added to Cart code snippet in a different way than for other themes.

  1. Find your main product template by navigating to your Shopify admin and going to Online Store > Edit Code
  2. Select product.json from the Templates folder.
  3. Confirm “type”, which by default is main-product for new stores using Dawn, and product-template for stores converted to Dawn from a vintage theme.
  4. Navigate to the Sections folder and find the associated type.liquid file, such as main-product.liquid, or product-template.liquid
  5. Then, search for the {% schema %} tag in the code and insert the snippet directly above it, and below the Viewed Product snippet.

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. The standard Abandoned Cart Reminder flow that you’ll see in the library is triggered by the Checkout Started event, while the flow triggered by the Added to Cart event is labeled as such. The Added to Cart Abandoned Cart flow tends to target more casual potential shoppers who have yet to start checkout. 

In the library, you can filter or search for all Abandoned Cart Reminder flows, and find the one labeled with the 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 and dynamic email content ready to power personalized cart followup emails.

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

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.

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?
540 out of 984 found this helpful