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

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

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(['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 || [];
	document.getElementById("ProductSubmitButton-template--16982598844576__main" type="submit" name="add").addEventListener('click',function (){
 		_learnq.push(['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