Skip to main content

Hi there,

First of all, apologies for making another post on this issue, but I haven’t found any solutions that worked in the various other posts regarding this problem. 

Basically, I’m trying to set up add to cart tracking as per the documentation, but have been unsuccessful.  Our shopify site doesn’t have an ID, but instead uses class, so I’m using the alternate code snippet.

Things that have been done:

  1. Viewed product code has been put in the product.liquid file
  2. Viewed product code is successfully firing the viewed product events (for my email as well)
  3. Added the added to cart snippet below the viewed product code

Our Shopify site’s add to cart button code is here:

 

The code that I have inserted into product.liquid is here:

 

Different variations of the querySelector value I’ve tried to use:

‘.action_button’

‘action_button’

‘action_button.add_to_cart’

‘.action_button.add_to_cart’

 

All have not worked. I’ve tested each variant by adding to cart on our site after the change. Viewed product always fires correctly and instantly (meaning I am cookied already), but there is no add to cart metric added or event fired. 

 

 

Hi @KeeveW,

Thank you for sharing your question with the Klaviyo Community.

Added to Cart can be tricky! You’ve done a great job working through it all so far - I have a couple of additional recommendations.

First, I recommend trying just using .add_to_cart in the querySelector, if you’re using Turbo theme, then try without the period, so just add_to_cart and then add a discrete item to your cart. Second, if you use custom product.liquld files, ensure you have added the class notation snippet to these files as well so it is not only the Viewed Product snippet in these files. Lastly, if you’re still having trouble, I recommend reaching out to support to take a closer look at your website to troubleshoot further. If one of the first two solutions resolves your issue, it would be helpful if you could follow-up in the thread and let us know to help others in the future who may run into the same issue 🙂 . Your post was very clear and informative!

Thanks so much and have a wonderful day.


Hi @dov.derin, thanks for the recommendations. It appears I made a typo in my original post, I have tried already ‘.add_to_cart’ and ‘add_to_cart’ and not action button. 

For the second recommendation, I’m not 100% sure if it we are in fact using custom product liquid files. I think the theme is either custom or heavily edited. This is the product.liquid code:

 

 

Second, if you use custom product.liquld files, ensure you have added the class notation snippet to these files as well so it is not only the Viewed Product snippet in these files. 

Thanks so much and have a wonderful day.

 

How do I go about doing this?


Hi @KeeveW,

Thank you for your reply and for providing that helpful screenshot.

That looks good!

You won’t necessarily need the Viewed product snippet in custom product.liquid files, that would only apply if you are noticing that the Viewed Product script isn’t appearing on all product pages and you have custom product.liquid files available in the Shopify admin. When testing Added to Cart I recommend double checking that both the Viewed product and Added to Cart snippets are present on the page by inspecting the page, if so then it’s just a matter of getting the right class in there.

On that point, I recommend trying the .action_button in the querySelector and if you’re using Turbo theme, then try without the period, so just action_button. Then self-identify your browser and add a discrete item to your cart. Check out the metrics tab for Added to Cart.

I hope this helps resolve the issue. If not, you likely have an additional Klaviyo js snippet on your page which could also prevent this metric from appearing. If you notice this is the case, I recommend reaching out to support to have a closer look at your website to provide next steps.

Thanks and have a great day.


@KeeveW to make sure Klaviyo is also recognizing you, please use ?utm_email=your-email-address in the URL this way you're sure Klaviyo is identifying you as a user.

The way I go about this normally is by opening up the browser developer tools and adding the 2 lines 37 and 38 of your last screenshot in the console and just testing with that. You can perfectly test this without adding it to the theme files.

If you can code a bit you could even send a alert message in your screen so you know it's working.

Another thing to check is if you're seeing errors in the console (when you click). Sometimes typos happen and cause an error to happen. 

Not sure if this would be the best solution but you could add an ID to the button.

Last thing you want to check is to view the HTML of the product page and make sure all the data is being populated. Item, title, URL etc.

 

Hope this helps a bit


Hi I’m having this same issue but I’m not sure what my add to cart button is called. 

 


Hi @TZ210,

Thanks for your note.

I noticed you have an existing thread open and my colleague @david.to is addressing your question in that thread linked below 🙂 Feel free to post a reply there.

Thanks and have a great rest of your day.


Reply