Theme version! Should I contact support?

Hello @forman,

From your screenshots, it looks like you may be using a Shopify 2.0 theme. 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 a Shopify 2.0 is that most of the features now rely on JSON templates. 

When using a Shopify 2.0 theme, unlike the default method of installing the Viewed Product code within a theme’s product.liquid file, you’ll need to add the code snippet via a Custom Liquid block. You can find instructions for installing the Viewed Product metric code for a Shopify 2.0 theme under the How to Add Viewed Product Tracking - For Shopify 2.0 Themes subsection of the Guide to Integrating with Shopify Help Center article.

I hope this helps!

David

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(p'track', 'Viewed Product', item]);
  _learnq.push(t'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