Skip to main content
raWildflows
Partner - Silver
Partner - Silver
April 14, 2022
Solved

Added To Cart Snippet on Shopify - changing class

  • April 14, 2022
  • 9 replies
  • 447 views

Hi team - 

I’m working with a new client.

She has a Shopify store, Klaviyo integration was already there. I started setting things up and noticed the Viewed Product didn’t fire since August and Added To Cart metric wasn’t even there.

 

Viewed Product

There was a website update, since then the VP wasn’t firing anymore. I wanted to re-instal, but couldn’t find product.liquid, but product.json. In stead I pasted the Viewed Product snippet in main-product.liquid and it is working right now.

Please let me know if there’s another best practice in this case.

 

Added To Cart

I’ve read the documentation and watched the video’s. 

No Button ID. So looking for the class notation. Unfortunately, I found that the class notation is changing, Every product has it’s own.

​​​​​​

Extra information

  • The store offers pre-orders as well as ‘direct orders’ (?)

Would appreciate any help. Feel free to reach out with questions. 

 

/ RA

 

 

 

 

    This topic has been closed for replies.
    Best answer by Mailbox Manny

    Hey @raWildflows, are you able to go into the liquid theme files and add a static class to that button as well (won’t change the styling, just for the purpose to work with with the snippet)?

    9 replies

    stephen.trumble
    Klaviyo Alum
    April 14, 2022

    Hey @raWildflows 

    Thanks you for all the info and some great questions! 

    Do you know what theme on Shopify the client is using? Some of the themes have different titles for the files, but as long as it is working I would keep it in main-product.liquid file. As for the add to cart question, there are two different snippets you can use, one for buttons and another for class notation, like yours above. Is this the snippet that is installed for class name?

    <script type="text/javascript">
    var _learnq = _learnq || [];
    var classname = document.getElementsByClassName("add-to-cart");
    var addToCart = function() {
    _learnq.push(['track', 'Added to Cart', item]);
    }; for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', addToCart, false);
    }
    </script>
    -Stephen
    raWildflows
    Partner - Silver
    Partner - Silver
    April 15, 2022

    Hi Stephen,

    She’s using the Showcase theme. That’s Shopify 2.0 if I’m not mistaken - added the Active On Site snippet in a custom liquid block on product level and it works like a charm :) - thanks @alex.hong 😁.

    Now I’m still struggling with the ATC snippet. 

    They (unfortunately) don’t come with a button ID. So I’m using the “Alternate Snippet for "Add to Cart" Button without a Button ID” using the class notation. 

    The problem I’m facing is that the class notation isn’t static, like the example in this article:

    “btn product-form_cart-submit btn--secondary-accent”

    The class notations are changing every time I’m refreshing the page. So they’re unique/variable/ever-changing. 

    Before refresh:

    class="button pn-button-1cwmu5w1yhr"

    After refresh: 

    class="button pn-button-wkwye3xd1p9"

    Same product.

    Here’s a link to a product page

    /RA

    raWildflows
    Partner - Silver
    Partner - Silver
    April 21, 2022

    bump bump bump 

    Mailbox Manny
    Partner - Silver
    Partner - Silver
    April 28, 2022

    Hey @raWildflows, are you able to go into the liquid theme files and add a static class to that button as well (won’t change the styling, just for the purpose to work with with the snippet)?

    Subscribe. Segment. Send. Repeat.
    stephen.trumble
    Klaviyo Alum
    May 2, 2022

    Hey @raWildflows 

    I was waiting for some guidance on this myself but @Mailbox Manny suggestion would be best case scenario. Were you able to add a static class to the button?

    -Stephen
    raWildflows
    Partner - Silver
    Partner - Silver
    May 6, 2022

    It worked! Thank you so much @Mailbox Manny and @stephen.trumble. Needed the help of a developer to find the button, but we did it! Enjoy your weekends :)

    stephen.trumble
    Klaviyo Alum
    May 6, 2022

    Awesome @raWildflows! So glad you were able to finally get a solution that work. Thanks @Mailbox Manny for having really great answers all the time!

    -Stephen
    Partner - Gold
    October 6, 2022

    It worked! Thank you so much @Mailbox Manny and @stephen.trumble. Needed the help of a developer to find the button, but we did it! Enjoy your weekends :)

    How did you add the class? please help me

    Pro_eCom
    Partner - Gold
    October 6, 2022

    Hey @raWildflows 

    I was waiting for some guidance on this myself but @Mailbox Manny suggestion would be best case scenario. Were you able to add a static class to the button?

    how do i add class code? can you help me ?

    Pro_eCom