Solved

i want to add snippet code to product.json for add to cart event any help please

  • 8 April 2022
  • 6 replies
  • 487 views

Badge

Hello Guys 

i have installed debutify theme on my shopify store and now i want to add snippet code of "Added to Cart" Event, but the problem is i have product.json file

in the guide here: Guide to Creating an "Added to Cart" Event for Shopify – Klaviyo - Help Center 

they just mentioned how to add it on product.liquid file now my question is how to add the code on json file i really need your help guys. Thanks

icon

Best answer by alex.hong 15 April 2022, 00:45

View original

6 replies

Userlevel 6
Badge +52

Hi there @medox744s,

Welcome to the Community.

 

I understand you are wanting to setup the Added to Cart event into your account. In order to successfully trigger the metric you will also need to install the Viewed Product and Add to Cart snippets. I would suggest to add the following Viewed Product snippet on your product.liquid file or in the corresponding product file in your theme:
 

<script type="text/javascript">
var _learnq = _learnq || [];
var item = {
Name: {{ product.title|json }},
ProductID: {{ product.id|json }},
Categories: {{ product.collections|map:'title'|json }},
ImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",
URL: "{{ shop.secure_url }}{{ product.url }}",
Brand: {{ product.vendor|json }},
Price: {{ product.price|money|json }},
CompareAtPrice: {{ product.compare_at_price_max|money|json }}
};
_learnq.push(['track', 'Viewed Product', item]);
_learnq.push(['trackViewedItem', {
Title: item.Name,
ItemId: item.ProductID,
Categories: item.Categories,
ImageUrl: item.ImageURL,
Url: item.URL,
Metadata: {
Brand: item.Brand,
Price: item.Price,
CompareAtPrice: item.CompareAtPrice
}
}]);
</script>


From here, you will add the Add to Cart snippet directly below the Viewed Product snippet:
 

<script type="text/javascript">
var _learnq = _learnq || [];
var classname = document.getElementsByClassName("zpa-btn-custom zpa-mobile-btn-size zpa-add-to-cart-btn zp zpa-button-size-full-width");
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>

 
If you happen to have a Shopify 2.0 theme I would suggest to review this video that will instruct you step by step on how to add the scripts. If you do not have a Shopify 2.0 theme, you can review this article that will provide you step by step instructions how where to paste the snippet I've provided for you.

After making this update, Viewed Product tracking and Add to Cart tracking should now be applied to all of your product pages. You can test this out as a cookied (identified) profile by doing the following: 
 

  1. Go to your website
  2. Add ?utm_email=youremail@example.com to the end of your website URL (of course using your email address in place of this example email address) like this: www.yoursite.com?utm_email=youremail@example.com
  3. Proceed to view a product page
  4. Press the Add to Cart button
  5. Check your profile within Klaviyo to see that the Viewed Product metric and Added to Cart metric were properly recorded.

Thanks,

Alex

Badge

Hi @alex.hong thank you for your support but the problem i have is that my theme has product.json and when i add the code it shows me this error message : 

This file contains the following errors:

  • Error: Invalid JSON: unexpected token

how i can fix this error and add the “add to cart” snippets to json file

thank you 

Userlevel 6
Badge +52

Hi @medox744s,

We have a document in our help center named Where to Paste a Form's Embed Code that provides instructions on how to add an embedded form to your Footer.  If those instructions do not work, it is likely due to the way your theme has been configured.  In which case, you'll need to work with a developer for further assistance.

Additionally, I would take a look at this article which explains why you are getting an error. If you are running into issues with the instructions or are finding technical difficulties, I would also recommend finding a Klaviyo partner to work with.

 

Thank you,

Alex

Badge +2

Same question. I’ve got a product.json as well, no product.liquid.

Userlevel 6
Badge +52

Hi @raWildflows,


Shopify 2.0 was introduced to allow developers more freedom to edit code in JSON instead of Liquid template theme files within Shopify. The main difference you'll face after upgrading to Shopify 2.0 is that most of the features now rely on JSON templates. Shopify has created this guide, which provides step by step instructions for converting a Liquid template into a JSON template, and moving any required Liquid code into sections that you can include in the new JSON template. 

That said, Klaviyo's Viewed Product snippet and Added to Cart snippets can now very easily be added via a Custom Liquid block for Shopify 2.0 Themes. To do this, please follow the steps below:
 

  1. In Shopify, navigate to your theme and click Customize
     

  2. At the top of the page, click the Home page dropdown, and select Products > Default product to be brought to your default product page. 
    ?name=inline685893383.png
    ?name=inline-1331390334.png
    ​​​

  3. Click Add section in the left sidebar, and then select Custom Liquid.
    ?name=inline-2043703939.png
    ?name=inline-343879352.png
    ​​

  4. Paste the Viewed Product snippet and/or the Add to Cart snippet into the Custom Liquid text box.
    mceclip2.png
    *If you are pasting both snippets, you can do this all at once with the Add to Cart snippet directly beneath the Viewed Product snippet. 
     

  5. Click Save in the upper right. 

Did that help?
 

Badge +2

Yup, it’s a Shopify 2.0 theme. Didn’t realize. Thanks @alex.hong.

Reply