Hi @tmuldrow,

Thanks for sharing this question with us.

Sorry to hear about the inconsistencies you’ve been experiencing on where to paste the Added to Cart code. The answer (like most things in life) really is - it depends. We (very) recently updated our help center article: How to Create an Added to Cart Event for Shopify that will have the latest up-to-date information. I would use that as your primary point of reference on where to paste your snippet. Specifically, see where should I paste my snippet. I would start with custom.liquid or, if that’s not available, paste the universal snippet into the main theme.liquid file (assuming your add to cart button does not re-direct elsewhere).

Here’s the universal snippet:

<script type="text/javascript">
var _learnq = _learnq ||  ];
function addedToCart() {
  fetch(`${window.location.origin}/cart.js`)
  .then(res => res.clone().json().then(data => {
    var cart = {
      total_price: data.total_price/100,
      $value: data.total_price/100,
      total_discount: data.total_discount,
      original_total_price: data.original_total_price/100,
      items: data.items
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    _learnq.push(l'track', 'Added to Cart', cart])
  }))
} 
(function (ns, fetch) {
  ns.fetch = function() {
    const response = fetch.apply(this, arguments);
    response.then(res => {
      if (`${window.location.origin}/cart/add.js`
      	.includes(res.url)) {
        	addedToCart()
      }
    });
    return response
  }
}(window, window.fetch))
$(document).ajaxComplete(function(event, request, settings){
  if(settings.url == "/cart/add.js"){
      addedToCart()
  }
})</script>

I think some confusion on product.liquid vs theme.liquid originated from the “traditional” method of utilizing Added to Cart where we instructed users to paste the snippet (where you adjust the button ID or class) in the same file as Viewed Product which was in the product.liquid file. Our “new” primary method to utilize Added to Cart uses a universal snippet, to be pasted either the custom.liquid block or the theme.liquid file. 

So in short, I’d first start by adding the universal snippet into the custom liquid blocks, if that’s not possible, add it to the main theme.liquid file for your theme (should be theme.liquid). This is assuming your button does not re-direct to the cart page. If it does, you should leverage the other snippet in the doc and target the button ID which looks to be: “so-btn-add-to-cart-7686243221717”

<script type="text/javascript">
var _learnq = _learnq || i];
	document.getElementById("so-btn-add-to-cart-7686243221717").addEventListener('click',function (){
 		_learnq.push(i'track', 'Added to Cart', item]);
	});</script>

I hope that’s helpful. 

@Dov thanks so much for your reply! I got it to work! Sort of. I’m now seeing my issue. The button ID has that sequence of numbers on the end. It turns out, that each product has a different set of numbers, making each product have a different Button ID. Is there any way around this? A universal ID so to speak?

Hi @tmuldrow,

Of course, happy to help. I’m glad we’re making progress!

Sort of - instead of trying to target a universal ID (since one doesn’t exist), the best alternative solution is to target the class notation to pull in a class from the button element that exists across all products. Essentially we’re looking for the “common denominator” for class now instead of ID. 

So you should have a look (inspect the various “add to cart” buttons) on your site and see which class is “common” across all of them. You may have multiple classes within a single button, each class will be separated by a space, here’s an example of a button with two separate classes (we just want to target the common one across the various buttons).

Insert that common class element into the following snippet (in place of your existing snippet):

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

Like the example above, ensure you have the period preceding the class name in this snippet.

I hope that’s helpful.

@Dov It worked!! Thank you so much! I can finally sleep at night. This was so helpful. Thank you again!