You Will Learn
- 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 how-to article.
Adding the Snippet
1. To enable Added to Cart tracking, you’ll need to add a code snippet to your BigCommerce product.html file. To find the file, open your BigCommerce admin and navigate to Storefront > My Themes, find your current theme, and click the Advanced Settings dropdown. Then, search for the product.html file and click to open it.
2. Paste the snippet below directly underneath the Klaviyo Viewed Product snippet.
The following screenshot shows this snippet added to the bottom of the product.html file.
3. 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
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.
4. 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.
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
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.
5. 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’ll use an alternate code snippet 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:
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
product-form_cart-submit btn--secondary-accent and the class in the snippet is named
If these two don't match, change the code snippet to reflect the class name for your button.
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.
3. 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:
- Navigating to Analytics > Metrics
- Searching for the event
- Clicking Activity Feed
If you don’t see 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 the confirming web tracking installation section of our How to Integrate with BigCommerce article.
- Check that 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 “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.
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.
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.
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. The abandoned cart flow triggered by Added to Cart 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.
If you implemented our standard 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.