Hi there,

The snippet you’ve provided uses “add-to-cart” as the class name. Based on the button code you’ve also provided, it looks like the name of the class is actually “ProductForm__AddToCart” -- as a result, I’d suggest switching the querySelector to use ‘.ProductForm__AddToCart’ or whatever the actual class name is for your Add to Cart button.

Best,

Caroline

@Blythe_Adrian  … Going on what @caroline suggested, try this:

<script type="text/javascript">
  var _learnq = _learnq || q];
  document.querySelector('ProductForm__AddToCart').addEventListener('click',function (){
    _learnq.push(p'track', 'Added to Cart', item]);
  });
</script>

Let us know if it worked!

Hey guys! Help me! My add to cart button looks like this. Nothing matches on klaviyo’s article.

Hi @Lee,

Thanks for sharing your question with the Klaviyo Community.

I can see that your button does not have an ID and instead uses a class notation. In this circumstance, you’ll need to paste an alternative snippet of code into Shopify. Maybe you can clarify what you mean by “nothing like this” and “nothing matches on Klaviyo’s article” because our article on Added to Cart does detail the code to use for a button using class here.

If you’re still having trouble logging the Added to Cart event, after reviewing the article, I recommend reviewing the posts from this thread. The last post on the thread summarizes the necessary steps you need to take to successfully log the Added to Cart metric.

Thanks and have a wonderful day.

Hey there, I am having the same problem. It looks as if i have a button id and a class notation. I have tried following the steps both, applying everything i can think of.

can anyone help?

Hello @ethan,

The button code you highlighted actually resembled the example found in the Alternate Code Snippet for "Add to Cart" Button with Class Notation subsection of the How to Create a Custom "Added to Cart" Event for Shopify article Klaviyo offers. Although they are not exactly the same, the same theory would apply since your button is using multiple classes. I would suggest editing and using the base code below in your product page to apply this add to cart functionality:

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

After customizing and installing the code, I would also suggest testing it by following the below steps which I’ve mentioned in a similar Community post:

You can cookie your own browser with your desired email by following these steps:

• Navigate to your website/homepage in an incognito browser
• Add the following to the end of your store URL, replacing example@gmail.com with your email address:
  ?utm_email=example@gmail.com
  • Example URL: wwww.ExampleWebsite.com/?utm_email=example@gmail.com
• After you reload the page your browser should be cookied with your desired email address, which would create a profile within Klaviyo
• Search in Klaviyo for your email address

If you are still having trouble I would encourage you working with a developer or the Shopify’s theme developer use an ID that's consistent across all product pages, or add a class to all of their product pages (such as "add-to-cart"), so that the metric can be tracked off of a single identifier. You can also finding a Klaviyo partner who can also further help you with this as well.

I hope this helps!

David

Hey @david.to 

Thanks for your response! I’ve tried what you have recommended but still no luck.

Could you be more specific on what my class notation exactly is?

Also I’ve looked through my other liquid files and cant find anywhere else that would require the code snippet.

I am also a little confused because when I first applied the snippets and was accepted to make the flow, it tracked myself adding to cart once, making me think it was successful but since then it hasn’t worked.

I’ve done a lot of work on this theme and don’t want to have to make a whole new website just for this metric.

Thanks, ethan

Hello @ethan,

The class notation, from your screenshot seems to be btn btn--full product-form__cart-submit btn--secondary-accent.

If you were able to track an add to cart event, then that would mean that the code you first used and applied did work correctly. Keep in mind that the add to cart event would only be triggered if your browser is cookied. Even if your code was installed correctly but your browser was not cookied and you added an item to the cart, the event would not trigger and track. 

David