Where to set up view web tracking code?

Theme version! Should I contact support?

Hi @david.to I have no words to say you. Thank you so much for your help. Now I follow the instructions and it’s worked! Thank you Thank you!

Hi David! I’m using Shopify 2.0 and followed the article you shared above. In my default product page, however, I’m not seeing thing that says I can add “custom liquid”. I only see blocks to add for “custom content” and “custom HTML.” I tried pasting the code in “custom HTML” but am getting this error message. Could you please advise?

Hey @Diana123,

HTML and Liquid/JSON, although similar are technically different languages. Instead of using the Custom HTML option, I would first suggest trying out the Custom Content option in lieu of a Custom Liquid option. 

Depending on the theme developer, they may have reworded the “Custom Liquid” phrasing differently or omitted it all together. If using the Custom Content option still doesn’t work after installing and testing, you can also use an alternative installation method to install the Viewed Product code that is applied directly to your theme’s code. 

1. Navigate to Shopify admin > Online Store > Edit Code, you should now see a product.json template.
2. Click on the product.json template and refer to the name you see listed within sections > main > type:
   Please note, the customer may not have titled this section as “main”. Technically, this is just the word that customers are using to reference this section. It could be titled anything, but Shopify recommends using “main”, so we need to assume customers are doing the same.

   

    

3. Once you identify the section title, you will see a “type” nested under the section title. The “type” refers to the Section template file where we need to paste our snippets.
4. In this example, the “type” is product-template. We will need to locate that file within the Sections folder:

   

    

5. Once you locate the file that corresponds with the “type” (in our case, the product-template.liquid section file), open up the file.
6. Once you have opened the product-template.liquid file (or whichever file is associated with the “main” section, search for {% schema %} within the code.

   

    

7. Then, you can proceed to insert the Viewed Product snippet and Add to Cart snippet (if desired) directly above the {% schema %} and click Save.

Here’s the Viewed product snippet again if you needed it:

<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>

If you’re still having trouble or uncomfortable adjusting your theme’s code yourself, I would suggest reaching out and working with your theme developer or working with an accredited Klaviyo Partner who can further assist you.

David