Hi @WoobiesShoes,

Thanks for sharing your question with the Klaviyo Community.

Since your button uses “class” notation and contains multiple classes, you should be following the instructions outlined here.

In short, you will have to replace the “add-to-cart” portion of the below snippet (which is already pasted in your Shopify product.liquid file) with the classes present in your button, separated by spaces. As you can see from the page inspection, those classes are “btn btn--full add-to-cart spo-container”. This is what that portion of the snippet looks like now:

  var classname = document.getElementsByClassName("add-to-cart");

With the updates that portion of the code will look like the following: 

  var classname = document.getElementsByClassName("btn btn--full add-to-cart spo-container");

Once you make this update and save. You will have to add an item to your cart from a cookied browser. That is, a browser that has previously filled a Klaviyo sign-up form or clicked through a Klaviyo email. Alternatively, you can cookie yourself through self-identifying the browser first and then add an item to your cart.

Thanks and have a wonderful day.

Thank you for the reply, after updating the code snippet with the new button name just like you had instructed, it still is not registering with Klaviyo that it is installed properly for the abandoned cart reminder flow.

Any thoughts on what I should do now?

Hi @WoobiesShoes,

Thanks for your reply.

The “This flow require setting up Added to Cart metric” notice won’t disappear instantly after adding Added to Cart metric, it takes some time before Klaviyo “recognizes” Added to Cart in that modal since you just installed it, so I wouldn’t be overly concerned with that. Your best off checking the Analytics tab under Metrics to see if Added to Cart is showing up there as a discrete metric. If so, you’re good to go -- just create a net-new metric-triggered flow off of Added to Cart. If you do not see Added to Cart under Metrics, there are a couple of other things to check:

1. Ensure that you have Viewed Product tracking installed above the Added to Cart snippet in the code
2. Ensure the browser is first self-identified before adding an item to your cart (I think you’ve done this already)
3. Inspect your home page and search for “company_id”. Look for Klaviyo’s onsite js there should only be 1 public API key present on your page included in this script. Sometimes, if you previously integrated this URL with Klaviyo, either in another Klaviyo instance or if you used the Klaviyo plug-in for Shopify to integrate (rather than following the Klaviyo-led integration steps here), duplicate snippets of Klaviyo onsite js will present itself on the page. Having multiple snippets of this javascript will interfere with the ability of Added to Cart to work. If this is the case, you’ll need to reach out to support to get the duplicate scripts removed. Also, in your request, notify support of the public API key of your account (do not post it here for security purposes). That guide shows you how to locate it. Once that is taken care of, try repeating the steps of identifying the browser and adding an item to your cart. If this was the blocker, it should work after taking these steps.

I hope this helps! Please do let us know if you’re still having trouble after this.

Hello, 

I am unable to find the location to paste the code for class notation. When i go to my prodcut.liquid this is what i see. i current have the turbo theme page. Can someone please help. i contacted Klaviyo and they are unable to help 

Product.liquid

WHen i go to the product-template. There isnt a “Script”

This is my site with inspect 

Please help

i was able to paste the script but it does not appear to trigger on Klaviyo. i even changed the “-” to “_” but it didnt work 

Hello @Hafs,

Thanks for sharing this information with the Community.

Since your button uses both id and class, I recommend trying to use the class notation snippet and using “add_to_cart” in that snippet. If that does not work, I would try including the first two classes, “action_button” and “add_to_cart” in the snippet (separated by spaces), followed by using all 3 classes contained under class, separated by spaces in the snippet. See the code snippet below for an example of what it would look like with all 3 classes included. From there, you will need to cookie your browser to log the “Added to Cart” event. I recommend reviewing the best answer in the thread below for more information on that portion of the solution since there are other pre-requisites in order to successfully log the “Added to Cart” event. 

<script type="text/javascript">
  var _learnq = _learnq ||  ];
  var classname = document.getElementsByClassName("action_button add_to_cart action_button--secondary");
  var addToCart = function() {
  _learnq.push(n'track', 'Added to Cart', item]);
  };   for (var i = 0; i < classname.length; i++) {
  classnamehi].addEventListener('click', addToCart, false);
  }
  </script> 

Thank you DD, i tested these and tried adding to cart to trigger the event but it didnt work either. Will you like me to send you my site directly to review the code i have in?

Hello @Hafs,

Since none of the above worked out for you, I recommend contacting our support team to have a closer look at your site. Thank you for your understanding.