Skip to main content
  • EN
Solved

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

  • 25 December 2020
  • 14 replies
  • 2500 views

Hello,

I have added the “add to cart” snippet and have followed the instructions: https://help.klaviyo.com/hc/en-us/articles/115001396711-Create-a-Custom-Added-to-Cart-Event-for-Shopify#alternate-code-snippet-for--add-to-cart--button-with-class-notation4

 

However "Add To Cart" matric does not appear. I use Turbo theme.

 

This is code snippet i add to shopify:

 

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

 

Please help me

 

Thank you

14 replies

retention
Rank
Userlevel 7
Badge +59

@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!

Joseph Hsieh // retentioncommerce.com // twitter: @retention
Y
Rank
Badge +2

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.

 

 

jenny13857
Rank
Badge +1

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

J
Rank
Userlevel 1

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,

Detters
J
Rank
Userlevel 1

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?

Detters
J
Rank
Userlevel 1

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(['track', 'Added to Cart', item]);
  });
</script>

Now the Add to cart Trigger is functioning. Sweet

Detters
cassy.lee
Userlevel 6
Badge +9

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. 

G
Rank
Badge +1

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

E
Rank
Badge +1

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

Dov
Userlevel 7
Badge +61

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

AddCart2.png

With the contents of the code snippet


AddCart7.png

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 

AddCart8.png

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:

mceclip0.png

 

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.

DD
C
Rank
Badge +1

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 || [];

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

  _learnq.push(['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

David To
Rank
Userlevel 7
Badge +60

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

H
Rank
Badge

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(['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?

David To
Rank
Userlevel 7
Badge +60

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

 

Reply


Most helpful members this week

Terms & ConditionsCookie settings