Solved

Add to cart trigger

  • 18 March 2023
  • 2 replies
  • 775 views

Badge +1
  • Contributor I
  • 1 reply

I was wondering if someone could give me a hand….

I’m trying to add a ‘add to cart trigger’ and the flow keeps saying I need to add special code. I have added what I believe to be the code and I have altered the button ID as the help article describes https://help.klaviyo.com/hc/en-us/articles/115001396711#where-should-i-paste-my-snippet-3, but its still saying the code needs to be loaded

Here’s what I’ve done:

Added this code above the </body>:

     {% if product %}
<script type="text/javascript">
var _learnq = _learnq || [];
    document.getElementById("add_to_cart global-button reverse global-button--primary ajax-submit").addEventListener('click',function (){
         _learnq.push(['track', 'Added to Cart', item]);
    });</script>
      {% endif %}

 

I have added what I believe to be the button ID in red above to the script, based on a button on my site: https://www.mrpoppinsandco.com/collections/leisure-bags/products/shop-kahoots-bloom

 

I wasn’t sure if I needed to add snippet 2 or 3 so I’ve tried both and altered the add to cart button ID and still nothing.

is anyone able to support me to get this working?

 

 

I am using Turbo in Shopify 2.0

icon

Best answer by Tonio 18 March 2023, 12:29

View original

2 replies

Userlevel 3
Badge +9
  1. Make sure you have added the Klaviyo tracking code to your Shopify store correctly. You can check this by viewing the source code of your store's homepage and searching for the Klaviyo tracking script. The script should be located just before the closing </head> tag.

  2. Verify that the button ID you are using in your code is correct. You can do this by inspecting the button on your store's product page and checking the id attribute of the button element. The id should match the one you are using in your code.

  3. Try changing the button ID in your code to a more specific selector. Instead of using the entire button ID, you can try using a more specific selector that targets just the button element. For example, you can use document.querySelector('.product-form__cart-submit') instead of document.getElementById("add_to_cart global-button reverse global-button--primary ajax-submit"). This should help ensure that the script is targeting the correct button element.

  4. Check if there are any errors in the browser console. When you load your store's product page and click on the "Add to Cart" button, open the browser console (usually accessible by pressing F12) and look for any error messages related to your script. This can help you identify any issues with the code.

Badge +1

thanks @Tonio  the instructions say “before the closing </body> tag” but I’ll try the head tag

Reply