@younow5tr The code that you’ve shared looks good.

After checking the demo of the Turbo theme for Shopify, I can confirm that the Add to Cart button contains the “add_to_cart” class.
 

That being said, and assuming you’ve implemented the code correctly, the only thing before the “Add to Cart” metric appears in your Klaviyo’s Metrics section is the first action/event.

As in many elements of Klaviyo, for something to be recognized and start appearing, it has to have at least one event happened for it so it’s captured in Klaviyo’s database.
For example, when you set an Email in a Flow, and you want to create a Segment of people who received that Email, you can not find that Email in the selectable suggestions until at least one email is sent.

Similar to that, even if you’ve set everything correctly for the “Add to Cart” metric, Klaviyo doesn’t know what you’ve done in the Shopify’s code until at least one event happens that will push data to Klaviyo. At that point Klaviyo will recognize the new data and create the “Add to Cart” metric.

All you need to do to push that first event into Klaviyo is to add something to cart from identifiable browser. Remember that the “Add to Cart”, same as the “Viewed Product” feature works only for existing subscribers, that are browsing from a browser with which they’ve previously opened your email. Whenever some of your subscribers opens one of your emails, a cookie is created that connects that browser with the subscriber. After that, whenever your subscriber comes to your web store from the same browser, Klaviyo knows which subscriber that is.

The other way to push that first event is to wait for it to happen naturally. If you already have subscribers in your list and you’re actively sending emails to them, it’s a matter of time before someone adds something to cart and create that first event.

If this doesn’t help, please share more details and I’ll be happy to help.

Cheers!

Thank you Joseph for the very clear explanation.

I have been waiting for 2 days. Many subscribers have come back and hit 'add to cart' button. But “Add to Cart” metric still DO NOT appears. I  do not understand.

I had the same question in my mind but got the right answer from this thread so thanks. 

Hi there,

I use the Turbo theme as well and also placed the Add to cart trigger script as follows:

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

I too have been unable to add the Abandoned Cart Reminder Flow to my site because there is a red x that states: This flow requires setting up a special "Added to Cart" metric.

Also, I think Klaviyo should rename their other Abandon Cart Flow, because, in all truth, they are Abandoned Checkout Flows, not Abandoned Cart Flows.

I will report back if time is all it takes to wait for an existing profile to add to cart, but this script has been installed for days and my store does a lot of business per day.

Many thanks,

Correction… I added the script with .add_to_cart, not .add-to-cart:

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

I am wondering if this needs to be the only place this exact class exists in the code of the button other than the script.If I view the source of my product detail, I see other instances of “action_button add_to_cart” in the sorurce for the mini-cart such as:

I Agree with the Terms & Conditions</label> <a href="/pages/policies" target="_blank" class="tos_icon">tView Terms]</a></p> <button type="submit" class="action_button add_to_cart">

Could these be conflicting?

I got help today on this. For Turbo theme you need to remove the . before add_to_cart

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

Now the Add to cart Trigger is functioning. Sweet

Hi @jlytle, 

Thanks so much for coming back to the Community and sharing your solution for this! So glad to hear that you were able to figure it out and really appreciate you spreading the word on the Community! I know many others will find this useful too. 

Appreciate you, and thanks for being a part of the forum! 
-Cass. 

Hello ! I have the same problem, but the code don’t work…

Anyone have a solution? :D

Thanks a lot for your help,

Best,

Thomas

the posted solution does not work for me either.. would love if this is reopened or if Klaviyo can give us the correct answer. Turbo is one of the most popular shopify themes out there...

Hi @Gollum & @edgeecom,

Thank you both for your follow-up replies. I’ll provide as much clarity as I can here.

Ultimately, in order for the Added to Cart metric to work, it requires the id or class of the button to match the id or class of the Added to Cart snippet (called out in Klaviyo’s Added to Cart for Shopify documentation). This may not always be resolved by removing the period unless that is what is causing the discrepancy between the two snippets of code. Using the example of a button that uses a class, if you navigate to your website and inspect the page:

Compare your button code

With the contents of the code snippet

If these two don't match, change the code snippet to reflect the class or id information contained in the button.

For example, this code snippet has been modified to reflect the class value product-form__cart-submit 

Also important to note is that query selectors for buttons with multiple classes need to have those classes separated by a period. For example, in this code snippet, the classes 'btn', 'btn--full', and 'add-to-cart' are all separated by a period:

Assuming all of the above has been done correctly, also note that the Added to Cart event will only tracked for browsers that have already been cookied (self-identified) by Klaviyo. 

A browser is self-identified only after somebody has done at least one of the following: filled out a Klaviyo sign-up form, previously clicked through a Klaviyo email, self-identified using a UTM parameter. Only after one of these actions are taken and a user subsequently adds an item to their cart, will an Added to Cart metric appear under Analytics > Metrics in Klaviyo.

Finally, you must already have Viewed Product tracking installed in order for the Added to Cart event to function. This is because Added to Cart “calls upon” the Viewed Product snippet to recognize when someone has added an item to their cart. Also, the Viewed Product snippet must be installed above the Added to Cart snippet in the code for your website.

That was a lot of information - to summarize:

1. Ensure you have a match between the id or class of the button and the id or class of the Added to Cart snippet
2. If there are multiple classes being used, ensure all classes are separated by a period
3. Ensure that you have Viewed Product tracking installed above the Added to Cart snippet in the code
4. In order to track an Added to Cart event, the browser adding the item must have already been cookied or self-identified i.e. through previously filled out a Klaviyo form, clicking through a Klaviyo email or self-identified using a UTM parameter
5. Once all of the above conditions are met, you can test the Added to Cart functionality by adding an item to your cart from a cookied browser

Thanks, and have a great day.

I am using the Flow Theme 2.0 in shopify.

The code when I go to inspect it on the website looks like this

There is a clear “ID”

So then I go next to the code provided by Klaviyo.

<script type="text/javascript">

var _learnq = _learnq || n];

document.getElementById("AddToCart").addEventListener('click',function (){

  _learnq.push(q'track', 'Added to Cart', item]);

});</script>

Specifically in the getElementByID it shows the correct AddToCart without needing to even edit the code they give.

Using the 2.0 method, I can see in Klayvio the “viewed product” action happening. However, I cannot see the Added To Cart. 

It appears that everything I have done after reading many forums is correct.

Can someone help me figure out why the Added to Cart isn’t showing up, even though the button ID is correct. I have the viewed product custom liquid above the added to cart’s custom liquid. 

Very frustrating. 

Thanks

Hey @Charlie.Willman,

From your screenshot, it actually looks like your button is clearly using a class notation. Because of this, instead of using the default code provided, you’ll want to edit and use the code snippet found under the Alternate Snippet for "Add to Cart" Button without a Button ID section of the Guide to Creating an "Added to Cart" Event for Shopify Help Center article. All the while ensuring you’ve edited the snippet to align with your button’s class before pasting and saving it into a Custom Liquid text box. 

Although both an ID and a Class are present to identify your button, using the alternate Add to Cart snippet using the Class identifier would be best practice for consistency across your theme. I’ve elaborated a bit on this in a similar Community post which I’ve included below along with some others ones that I believe may be helpful!

David

I am using the Shopify Sense Theme.

This is what I see when I click Inspect on Add to Cart button:

When I click add to cart, it does not redirect, rather a popup comes:

I entered the following snippet into Custom Liquid:

<script type="text/javascript">

var _learnq = _learnq || |];

document.getElementById("product-form__submit").addEventListener('click',function (){

  _learnq.push(u'track', 'Added to Cart', item]);

});</script>

Whenever I do a test, I still do not see “added to cart” on Klaviyo

What am I doing wrong?

Hello @Happy Happy,

I would suggest taking a look at my previous comment.

Like many, it seems like you’re making the mistake of using the Add to Cart snippet that indicates your button is an ID when you’re button is defined by a class notation. You can find information on how to properly identify and install the snippet from the Snippet 3: For buttons with redirects defined by class notation subsection of the How to create an "Added to Cart" event for Shopify Help Center article.

David

Hello, I carefull read over all the comment, but I was not able to find an answer for my case.

I am using Trade 14.0.0, I added the snippet in the product page and I am now trying to add the Snippet 2 to my theme.

After inspecting the add to cart Button, from this I was able to identify that  my Add to Cart button is defined by a button ID here below:

<button id="ProductSubmitButton-template--16982598844576__main" type="submit" name="add" class="product-form__submit button button--full-width button--secondary">
            <span>Add to cart
</span>

Now, I need to make sure that I match the default snippet (AddToCart). 

If I understood correctly, This is going to be my code
 

<script type="text/javascript">
var _learnq = _learnq || o];
	document.getElementById("ProductSubmitButton-template--16982598844576__main" type="submit" name="add").addEventListener('click',function (){
 		_learnq.push(o'track', 'Added to Cart', item]);
});</script>

First question, is that correct?
if so where do I add that snippet based on my theme?


Thank you in advance