How to add "Add to Cart" snippet with Shopify Turbo theme

@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(['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(['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">[View Terms]</a></p> <button type="submit" class="action_button add_to_cart">

Could these be conflicting?

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...