@BrianThomas099 Just looking at the demo version of the Shopify Impulse Theme, it looks like they use the class name “add-to-cart” so the second method (by class) should be the right approach:

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

This is the code for the Add to Cart button I see in the Theme:

So to me, it looks like it should all work properly…  Here’s a few troubleshooting ideas to consider trying:

• Make sure you are getting events for “Added to Cart” (before you check for emails in that Flow).  You can do this by going to your “Analytics → Metrics → Added to Cart.  Verify that there is some activity there.  If you have activity, then proceed to the following troubleshooting ideas.
• Add to Cart event trigger for a Flow requires the user that is already “identified” by Klaviyo.  Are you sure you have previously “Subscribed” or “Opened/Clicked” an email?  Sometimes when you use test emails or in a separate browser, there’s no identified user in that session, or a different one than the one you expect. Since Klaviyo doesn’t know who “Add to Cart” - that event may fire, but it still doesn’t know who it is to know who to send the email.  
• Check to make sure your Flows is triggering on the correct metric - this new one you created for “Added to Cart” and that messages in the Flow are set to Live (or if Manual, you can see it in the review queue).
• Make sure the email you are testing with, has double opted-in (if you have that enabled). 

See if any of the above helps, and report back!

Joseph,

Thanks for the quick reply!  I installed that snippet in product.liquid.  However, when i go to Analytics → Metrics there is no “Added to cart”  Is there a lag time between when i update the code and Klaviyo recognizes the changes?

Thanks

Brian

Hello again, and thanks for your help!  Klaviyo tech support was able to help with an answer.  This is what we are using now:

<script text="text/javascript"> var _learnq = _learnq || |]; document.getElementById("AddToCart-{{ product.id }}").addEventListener('click',function (){      _learnq.push(q'track', 'Added to Cart', item]); });</script>

Hi @BrianThomas099, 
Thanks so much for following up in this thread and sharing your results for this javascript Add to Cart issue. Glad that you were able to identify the right JS to use for the Shopify Impulse Theme! Although this in particular seemed like a code issue with the theme, @retention’s troubleshooting examples are totally spot on for what to look out generally. 

Hi,

I am also experiencing issues with the add to cart snippet. We use the impulse theme with some pagefly elements. We firstly tried the method outlined by klaviyo, then used the snippet @BrianThomas099 added above. This still did not work and then reached out for support. Sadly the Klaviyo support was not particular helpful in solving this issue…

You'll want to work with your developer or theme's developer to 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 we can track the metric off of a single identifier.

Now archetype ( the impulse theme developer) got back to me. They see it as a klaviyo issue… and so I am back to square one.

Does anybody else also experience this problem and how did you fix it?

Or do I really need to hire a developer in order to be able to send automatic abandoned cart mails?! We are working on a shoestring budget and really can’t afford such an expanse...

Thank you guys so much!

Elisabeth  

Hello @Elli,

I want to apologize for the frustration you are having in trying to implement Klaviyo’s add to cart snippet to your Shopify theme. 

From the response of the Klaviyo support member, it sounds like the buttons of the theme you are using are not consistent throughout. Theme developers are not required to follow some basic recommended guidelines when building their themes such as using either a consistent ID or a global class that is applied throughout the product pages, which are best practices. 

By being able to identify these consistent button IDs or global classes, Klaviyo is made aware of the button being clicked on and is then able to trigger the custom add to cart event. 

Working with the theme developer is often times the most direct way to resolve this as they would be the ones who coded and created the theme. Alternatively, you can take a look at Klaviyo’s extensive network of agency partners who may be able to assist in this as well.

Furthermore, an alternative to using the add to cart method to trigger your abandoned cart emails would be using Klaviyo’s default abandoned cart method which would be triggered when a Started Checkout event occurs. Because the Started Checkout event would be one synced directly from Shopify, it would require no coding and is available out of the box. Klaviyo also offers a pre-built flow for you to use within the Flows Library which you can customize and activate. You can fins instructions on how to set this up and learn more about the default abandoned cart flow triggered by the Started Checkout event from the Creating an Abandoned Cart Flow and Objective Video: Turn On an Abandoned Cart Flow articles. 

Thank you for being a member of the Klaviyo Community!

David

Hi, did anyone find a way around this yet? I have also tried following Klaviyo’s instructions and using the above coding to no avail :/ 

It’s a pretty common theme so this surprises me that it seems to be do difficult, if possible at all.Leaves a lot of money on the table. 

Hello @HannahVHC,

Apologize on the confusion you are having in implementing the Add to Cart functionality.

From the screenshot shared by @retention in their comment above, since it appears the Impulse theme has both an ID and a Class notation for their buttons, you’ll want to use the Alternate Code Snippet for "Add to Cart" Button with Class Notation installation method as detailed in the How to Create a Custom "Added to Cart" Event for Shopify Klaviyo Help Center Article. From the screenshot shared, it also appears that the Class of "btn btn--full add-to-cart" being used is an exact match to the example highlighted in the Alternate Class installation method of the article provided. 

@MelvynWittwer had the exact same experience in their Community post as well!

I hope this helps!

David