How to create an "Added to Cart" event for BigCommerce

read
Last updated at:

You will learn

Learn how to create an Added to Cart event for BigCommerce that tracks when a customer adds an item to their cart and can trigger an abandoned cart flow. Added to Cart events do not automatically track when you integrate with BigCommerce; you must first add (and potentially modify) a JavaScript snippet (included in this guide) to your BigCommerce theme files.

  • You do not need to create the Added to Cart event to send an abandoned cart flow; the Added to Cart abandoned cart flow is separate from the standard abandoned cart flow, which is triggered by Started Checkout
  • Klaviyo’s built-in BigCommerce integration already tracks a Started Checkout event when a customer enters their email during the checkout process after adding item(s) to their cart. 

Before you begin

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

You must already have Viewed Product tracking installed in order for the Added to Cart event to function properly. Typically, Klaviyo customers install this during the BigCommerce integration process and the instructions can be found in our integration article

Add the snippet

  1. Open your BigCommerce admin and navigate to Storefront > My Themes.
  2. Find your current theme, and click the Advanced Settings dropdown.
  3. Search for the product.html file and click to open it.
  4. Paste the snippet below directly underneath the Klaviyo Viewed Product snippet.
    <script text="text/javascript">
    var _learnq = _learnq || [];
    document.getElementById("form-action-addToCart").addEventListener('click',function (){
     _learnq.push(['track', 'Added to Cart', item]);
    });
    </script>
    
  5. The following screenshot shows this snippet added to the bottom of the product.html file.
    BigCommerce product.html file open in file editor with Klaviyo added to cart snippet pasted on the bottom
  6. Next, check if you need to modify your snippet. To do this, you’ll need to check the ID of the “Add to Cart” button on your site, and see if it matches the “Add to Cart” variable highlighted in the snippet below, whose default is form-action-addToCart.
    Klaviyo added to cart snippet in white on black background with form-action-addToCart in yellow
  7. 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.
    BigCommerce store with demo item Smith Journal, right click menu open on Add to Cart button with Inspect highlighted in blue
  8. The console will open, showing the source code of the “Add to Cart” button. The following image shows the ID of the "Add to Cart" button highlighted in the console.
    BigCommerce store demo item with Chrome console open and add to cart button ID, form-action-addToCart, highlighted
  9. The ID of the button on the page shown here matches form-action-addToCart, so no changes need to be made.
    • If the ID of the “Add to Cart” button on your site isn’t form-action-addToCart, you’ll need to change the variable text within the quotes to match the button’s ID
  10. 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. 
  11. When you’re done, save your product.html file. 

You’ve finished adding the snippet and will now track the Added to Cart event. 

Alternate snippet for "Add to Cart" button without a button ID

For styling reasons, some sites use a class notation instead of a button ID for “Add to Cart” buttons.

If your “Add to Cart button does not have a button ID (which you can determine by following the steps in the previous section) and instead uses a class notation, you should use the alternate code snippet below to enable the Added to Cart event. 

  1. If your button is defined by class notation, paste the following alternate snippet at the bottom of your product.html file:
    <script text="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 class name 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 name in the screenshot is btn product-form_cart-submit btn--secondary-accent and the class in the snippet is named add-to-cart.
    Add to cart button code in Chrome console with button class, btn product-form_cart-submit btn--secondary-accent, higlighted in yellow
    • If these two don't match, change the code snippet to reflect the class name for your button.
  3. 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 alternate added to cart code snippet in white on black background with classname modified to match the class in the previous screenshot, btn product-form_cart-submit btn--secondary-accent
  4. Save your product.html file

Once you save, you’ve finished adding the snippet and can now track the Added to Cart event. 

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. You can view these events by:

  1. Navigating to Analytics > Metrics in Klaviyo
  2. Searching for the event
  3. Clicking Activity Feed
    Added to cart metric activity feed in Klaviyo, list shows profile names that have recently added to cart

If you don’t see Added to Cart events in your account, try the following:

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

The "Added to Cart" abandoned cart flow

When creating an abandoned cart flow (either using Added to Cart or Started Checkout) you can leverage Klaviyo SMS in addition to email. For compliance reasons, make sure to only send one SMS in your flow and if you are using multiple types of abandoned cart flows, make sure to only use SMS in one of them. 

In the Essentials section of the library, you will find the standard abandoned cart reminder flow. This flow is triggered by the Started Checkout event.

Card for standard abandoned cart reminder flow for BigCommerce in the Klaviyo flow library

To get started with an abandoned cart flow using the Added to Cart event, we recommend using the pre-built flow available in Klaviyo's Flow Library which has the proper flow filters already set up. This flow tends to target more casual potential shoppers who have yet to start checkout.

The abandoned cart flow triggered by the Added to Cart event can be found in the "Prevent lost sales" goal section. 

Card for added to cart abandoned cart reminder flow for BigCommerce in the Klaviyo flow library

If you implemented the BigCommerce 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.

Additional resources

x
Was this article helpful?
42 out of 85 found this helpful