Hello @Benjamin at GROWTH Croissance,

Great question!

Your assumption surrounding the limitations of the Viewed Product snippet and how it interacts with multi-product pages is correct. Klaviyo’s Add to Cart function triggers an event when a customer clicks on the add to cart button on your product pages. Because this code works in tandem with the Viewed Product snippet, the Add to Cart code is able to leverages the Viewed Product snippet to identify the product details on what item has been added by your customer. Klaviyo’s default implementation of the Viewed Product and Add to Cart codes are meant to be used on a product page where it would identify the individual product. 

Both the Viewed Product and Add to Cart codes snippets are Track calls, that take advantage of Klaviyo’s Track and Identify API. As such, it wouldn’t be impossible to create your own custom Track calls meant to be used on a collection’s page or a multi-product page to attain similar functions. For this, I would recommend working with a developer to build out this functionality or finding a Klaviyo partner who can assist in creating this function. I would also suggest using and reviewing the following resources Klaviyo offers on APIs and custom work:

• Getting Started with Klaviyo APIs
• Track and Identify API Reference
• Klaviyo's API Reference Documentation
• Integrate a Standard Ecommerce Platform
• Setting Up API-based Transactional Events
• Setting Up API-based Website Activity Events
• Technical Terms Glossary

Thanks for being a member of the Klaviyo Community!

David

Okay David, I will try, as sound I will have the time, to feed a _learnq myself for each product dynamically, I should manage to find my way like that but it could be a good thing if a compliant snippet get public from Klaviyo for that… If I find the time to do it I will not hesitate to share it...

Hey everyone. I am running into an error when I have already pasted my ‘add-to-cart-button’ code onto the Shopify product page. 

The error is “item can not be found”. 
Here is what I have checked previously before I post here. The button doesn’t have ID so I guess that’s why I am using the Class version. 

https://help.klaviyo.com/hc/en-us/articles/115001396711-Create-a-Custom-Add-to-Cart-Event-for-Shopify

Hi @Akselpd,

Thanks for sharing this with the Klaviyo community.

First, you will need to paste the added to cart snippet in your main product.liquid file in addition to any custom product.liquid files. Keep in mind that anywhere the Viewed Product code is located (which should also be in these files) you will need to place the Added to Cart code below it in the code. For more information on pasting the Viewed Product code for Shopify, I recommend reviewing our article on this topic here. Additionally, using ID vs class (or vice versa) will not impact the ability of the code to locate the item. Can you confirm that this item is in fact located on a product page and not another type of file/page? That may also be a reason for this error.

In addition, I strongly recommend reviewing the thread below for potential solutions:

If you still have questions after reviewing all of the above information, can you show us a screenshot of where you are seeing this error exactly? Please redact any sensitive information such as email addresses or API keys. 

Thank you!

Hi there, @Dov, 

Thanks for you answer! I love that you mentioned View Product snipped because apparently that is what I have just found missing. 

So I went to add it onto the product.liquid file in Shopify theme. Here is a screenshot. 

Can I know why Klaviyo flows aren’t still working? 

I have run a check through the Klaviyo Wizard setup and I still can’t find problems. What is still there to be solved? 

Hello @Akselpd,

Glad to hear the Viewed Product portion of the solution was helpful.

Ok - I would try using just “add-to-cart-button” between the quotes, so this portion of the snippet looks like the following:

document.getElementsByClassName("add-to-cart-button");

and the whole snippet will look like:

script type="text/javascript">
  var _learnq = _learnq || a];
  var classname = document.getElementsByClassName("add-to-cart-button");
  var addToCart = function() {
  _learnq.push(n'track', 'Added to Cart', item]);
  };   for (var i = 0; i < classname.length; i++) {
  classnameli].addEventListener('click', addToCart, false);
  }
</script> 

then, before you test adding an item to your cart, ensure you are cookied in the browser (which can be achieved through filling out a Klaviyo sign-up form on your site or clicking through a Klaviyo email) and see if an “Added to Cart” event is recorded on the Klaviyo profile. The event will be located on the same profile (email address) you filled the sign-up form with. If this event is showing up on the profile but the flow is still not working, then I recommend checking out this article below on why users may not be entering a flow:

Hi @Dov,

I have a similar case with a different client. How do I escape and solve that systemic issue?

I have posted pictures and the problem here.

 

 Thank you!

Yours,
Alex

Hi @Akselpd,

Here is an alternative solution, replacing the current Added to Cart snippet with the following snippet (using the classes from your other post):

<script type="text/javascript">
  var _learnq = _learnq || |];
  document.querySelector('.btn.product-form__cart-submit.btn--secondary-accent').addEventListener('click',function (){
    _learnq.push(h'track', 'Added to Cart', item]);
  });
</script>

Essentially, this involves adding a period before the opening class, and separating all subsequent classes by a period. I would copy and paste the classes directly from the source code on the page to your liquid file in Shopify and then add in the periods after (to make sure the classes are 100% correct) since I typed the classes out based on your screenshots. From there, run through the usual steps to cookie the browser and add an item to the cart.

What do you mean by copy/paste the classes directly from the source code on the page to my product.liquid file in Shopify? 

I am little confused. So I substitute my current ‘Add to cart’ code with the one you have just provide above for me. Is there anything else I need to add to it so it works? 

Where can I find that source code to copy the classes from my previous post? 
Where can do I need to put the period again? 

Thank you for the patience and the empathy I am highly depended on your support to finish this client’s case. My technical skills are on the edge. 

Yours,
Alex 

Hi @Akselpd,

Sorry I think I added more confusion than was necessary there. All I meant by “copy/paste the classes directly from the source code on the page to my product.liquid file in Shopify” was to copy the existing classes for the button from the console and paste them into the product.liquid file.

The simplest solution here is to simply replace your existing snippet for Add to Cart with the following code:

<script type="text/javascript">
  var _learnq = _learnq || r];
  document.querySelector('.btn.product-form__cart-submit.btn--secondary-accent').addEventListener('click',function (){
    _learnq.push(q'track', 'Added to Cart', item]);
  });
</script>

Then run through the usual steps to cookie the browser and adding an item to the cart to trigger the event.

Hi @Dov,

Unfortunately, I don’t get it. I have substituted my code with the one above you have provided.

Besides, that I don’t see the classes from the source of my product page. 
Can you, please, share with me what they are? 

Yours,
Alex
 

Hello @Akselpd,

Thanks for your follow-up post.

Basing my judgement on the screenshot from your other post, that snippet should include all of the necessary classes. Since we don’t investigate individual accounts in the community, and you’re still experiencing difficulty getting the Added to Cart event to fire, I advise contacting Klaviyo support to have them take a closer look at your specific account to ensure the classes for your button and the Added to Cart snippet align. I also recommend reviewing the pre-requisites below to ensure you’re meeting these criteria required to fire the Added to Cart event. 

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 for being a member of our community!