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

Last updated at:


This guide walks through adding a custom Added to Cart event that tracks when a customer adds an item to their cart. Our built in BigCommerce integration already tracks a Started Checkout event when a customer adds an item to their cart and progresses to enter their email during the checkout process. The Started Checkout 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.

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 BigCommerce 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 BigCommerce product.html file:

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

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

Next, check to see if you need to modify your snippet. Inside your snippet, the form-action-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.


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 (form-action-addToCart) matches the variable in the snippet, so no changes need to be made.

If needed, update your snippet so the form-action-addToCart variable matches the ID of your "Add to Cart" button.

After you've updated your snippet and saved your theme files, this snippet will watch the "Add to Cart" button, and track an 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.

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

For styling reasons, different websites use 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.

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:AddCart2.png

With the contents of the code snippet:mceclip1.png

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:mceclip2.png

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:mceclip4.png

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.

The "Added to Cart" Abandoned Cart Flow

To build a flow using this event, create a new flow and select Added to Cart 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 Started Checkout 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 3 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.

The Added to Cart event contains similar data to the built in Started Checkout 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.

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.

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

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

Was this article helpful?
26 out of 47 found this helpful