How To Add Recently Viewed Products Section in Shopify?

The "Recently Viewed Products" section in Shopify is a feature often used in online stores to enhance the shopping experience and potentially increase sales. This section displays products that a customer has recently looked at on the website.

Table of Contents

• Source code
• Why do I need it?
• Not a tech guy
• Create a recently-viewed.liquid file
• Create a stylesheet file
• Create a jquery.product.min.js file
• Add the section in product.json file
• Note

Source code

GitHub repo.

Why do I need Recently Viewed Products Section in my Shopify store?

The "Recently Viewed Products" section in Shopify can offer several benefits to both you as a seller and your customers:

1. Enhanced User Experience: It provides convenience for customers who want to quickly revisit products they've shown interest in. This helps them compare items, make decisions, or remember specific products they were considering buying.
2. Encourages Return Visits: By displaying recently viewed items, you can prompt visitors to return to your site. This serves as a subtle reminder of products they were interested in, potentially leading to a purchase they might have been contemplating.
3. Personalization: It contributes to a more personalized shopping experience. Customers often appreciate feeling understood and catered to. Showing their recently viewed products can make them feel valued and understood as individual customers.
4. Increases Conversion Rates: It can serve as a gentle nudge for customers who might have been hesitant to purchase a product earlier. Seeing the items they've shown interest in can prompt them to make a buying decision.
5. Cross-selling and Up-selling Opportunities: You can strategically use this section to recommend related or complementary products based on what the customer has already viewed. This can increase the average order value by encouraging customers to explore additional products.

I'm not a tech guy

If you are not familiar with code I would suggest hire a Shopify expert. You can hire me or anyone else (just be sure the guy is an expert).

Create a recently-viewed.liquid file

Go to sections folder and create recently-viewed.liquid file. Put the code below inside the file:

{{ 'section-recently-viewed.css' | asset_url | stylesheet_tag }}


<div class="recently-viewed-wrapper page-width">
    <h2>{{section.settings.heading}}</h2>
    <ul class="recently-viewed-grid">
    <!-- Recently viewed products will appear here -->
    </ul>
</div>

<script>
function setRecentlyViewedProducts() {
  const productData = {
    productTitle: "{{ product.title }}",
    productImg: "{{ product.featured_media | img_url: '300x' }}",
    productPrice: "{{ product.price | money }}",
    productUrl: "{{ product.url }}",
    productImageAltText: "{{product.featured_media.alt | escape }}"
  };
  const productList = [];
  let jsonResp, jsonRespArr, jsonRespArrStr;
  const numberOfProducts = 8;
  productList.push(productData);
  const currProductPageTitle = productData.productTitle;
  const productDataString = JSON.stringify(productList);
  const localData = localStorage.getItem("recentlyViewedProduct");

  if (localData === null) {
    localStorage.setItem("recentlyViewedProduct", productDataString);
  } else if (localData) {
    const oldProductData = localStorage.getItem("recentlyViewedProduct");
    const countProductData = (oldProductData.match(/productTitle/g) || []).length;
    const sameProduct = oldProductData.includes(currProductPageTitle);
    if (countProductData < numberOfProducts && sameProduct == false) {
      jsonResp = JSON.parse(oldProductData);
      jsonRespArr = jsonResp.concat(productList);
      jsonRespArrStr = JSON.stringify(jsonRespArr);
      localStorage.setItem("recentlyViewedProduct", jsonRespArrStr);
    } else if (countProductData >= numberOfProducts && sameProduct == false) {
      jsonResp = JSON.parse(oldProductData);
      jsonResp.shift();
      jsonRespArr = jsonResp.concat(productList);
      jsonRespArr = JSON.stringify(jsonRespArr);
      localStorage.setItem("recentlyViewedProduct", jsonRespArr);
    }
  }
}

setRecentlyViewedProducts();
const localViewed = localStorage.recentlyViewedProduct;
function getRecentlyViewedProducts() {
  const productData = JSON.parse(localStorage.getItem("recentlyViewedProduct"));
  const recentlyViewedHtml = [];
  productData.map(item => {
    recentlyViewedHtml.unshift(`
    <li class="recently-viewed-grid-item">
      <a href="${item.productUrl}"> 
  <img class="recently-viewed-img" src='${item.productImg}' loading="lazy" alt="${item.productImageAltText}"/>
      </a>
       <h3><a class="recently-viewed-a" href="${item.productUrl}">${item.productTitle}</a></h3>
       <p>${item.productPrice}</p>
    </li>
   `);
  });
  const newProductData = `${recentlyViewedHtml.join("")}`;
  const fullContent = document.getElementsByClassName("recently-viewed-grid");
  fullContent[0].innerHTML = newProductData;
}

document.addEventListener("DOMContentLoaded", function (event) {
  getRecentlyViewedProducts();
});

</script>

{% schema %}
  {
    "name": "Recently Products",
    "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Recently Viewed",
          "label": "Heading"
        }
 ]
  }
{% endschema %}

We have script code in one place because of the simplicity to show. You can split the code if you would like.

Create a stylesheet file

Navigate to assets folder and create section-recently-viewed.css file, paste the code inside. By the way you can paste CSS into section file. If so, don't forget to delete first line from the section file and use liquid tags {% style %} your styles here {% endstyle %} to wrap your styles. More about liquid you can read here.

Put the styles below inside the file:

.recently-viewed-wrapper {
    margin: 1rem auto;
  }

  .recently-viewed-img {
    width: 100%;
  }

  .recently-viewed-grid {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    list-style: none;
    margin:0; 
    padding: 0;
  }   

  .recently-viewed-grid-item {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .recently-viewed-a {
    text-decoration: none;
    color: #000;
  }

Create a jquery.product.min.js file

This version of recent viewed section use jQuery. If you don't have jQuery in your theme I would think about installing it just for one section. If you don't know installed it or not, I can help you with that (or you can ask a developer who worked previously in the store about the jQuery).

It needs to collect and store cookie data. Go to assets and create jquery.product.min.js file and paste the code into it.

Copy and paste code inside the file:

/**
 * Cookie plugin
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
 
 jQuery.cookie=function(b,j,m){if(typeof j!="undefined"){m=m||{};if(j===null){j="";m.expires=-1}var e="";if(m.expires&&(typeof m.expires=="number"||m.expires.toUTCString)){var f;if(typeof m.expires=="number"){f=new Date();f.setTime(f.getTime()+(m.expires*24*60*60*1000))}else{f=m.expires}e="; expires="+f.toUTCString()}var l=m.path?"; path="+(m.path):"";var g=m.domain?"; domain="+(m.domain):"";var a=m.secure?"; secure":"";document.cookie=[b,"=",encodeURIComponent(j),e,l,g,a].join("")}else{var d=null;if(document.cookie&&document.cookie!=""){var k=document.cookie.split(";");for(var h=0;h<k.length;h++){var c=jQuery.trim(k[h]);if(c.substring(0,b.length+1)==(b+"=")){d=decodeURIComponent(c.substring(b.length+1));break}}}return d}};

 /**
  * Module to show Recently Viewed Products
  *
  * Copyright (c) 2014 Caroline Schnapp (11heavens.com)
  * Dual licensed under the MIT and GPL licenses:
  * http://www.opensource.org/licenses/mit-license.php
  * http://www.gnu.org/licenses/gpl.html
  *
  */
  
 Shopify.Products=(function(){var a={howManyToShow:3,howManyToStoreInMemory:10,wrapperId:"recently-viewed-products",templateId:"recently-viewed-product-template",onComplete:null};var c=[];var h=null;var d=null;var e=0;var b={configuration:{expires:90,path:"/",domain:window.location.hostname},name:"shopify_recently_viewed",write:function(i){jQuery.cookie(this.name,i.join(" "),this.configuration)},read:function(){var i=[];var j=jQuery.cookie(this.name);if(j!==null){i=j.split(" ")}return i},destroy:function(){jQuery.cookie(this.name,null,this.configuration)},remove:function(k){var j=this.read();var i=jQuery.inArray(k,j);if(i!==-1){j.splice(i,1);this.write(j)}}};var f=function(){h.show();if(a.onComplete){try{a.onComplete()}catch(i){}}};var g=function(){if(c.length&&e<a.howManyToShow){jQuery.ajax({dataType:"json",url:"/products/"+c[0]+".js",cache:false,success:function(i){d.tmpl(i).appendTo(h);c.shift();e++;g()},error:function(){b.remove(c[0]);c.shift();g()}})}else{f()}};return{resizeImage:function(m,j){if(j==null){return m}if(j=="master"){return m.replace(/http(s)?:/,"")}var i=m.match(/\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?/i);if(i!=null){var k=m.split(i[0]);var l=i[0];return(k[0]+"_"+j+l).replace(/http(s)?:/,"")}else{return null}},showRecentlyViewed:function(i){var i=i||{};jQuery.extend(a,i);c=b.read();d=jQuery("#"+a.templateId);h=jQuery("#"+a.wrapperId);a.howManyToShow=Math.min(c.length,a.howManyToShow);if(a.howManyToShow&&d.length&&h.length){g()}},getConfig:function(){return a},clearList:function(){b.destroy()},recordRecentlyViewed:function(l){var l=l||{};jQuery.extend(a,l);var j=b.read();if(window.location.pathname.indexOf("/products/")!==-1){var k=window.location.pathname.match(/\/products\/([a-z0-9\-]+)/)[1];var i=jQuery.inArray(k,j);if(i===-1){j.unshift(k);j=j.splice(0,a.howManyToStoreInMemory)}else{j.splice(i,1);j.unshift(k)}b.write(j)}}}})();

Add the section in product.json file

Don’t forget about this step. It’s super important! Go to templates folder and then click on product.json file, paste the code where you would like to show a recently viewed section.

"recently-viewed": {
    "type": "recently-viewed",
    "settings": {
    }
}

Scroll down in the file and you will see "order". Don’t forget to indicate this section in "order", like so.

"order": [
    "main",
    "recently-viewed"
 ]

You can see a little bit different product page layout. It depends on the complexity of the product page.

Note

You can face with possible issues. For example, the code won’t work in your theme. That’s okay and no worries. Every store can have different settings like integrations or whatever. If so, reach me by email I’ll try my best to help you.

Also, I'm working on improvements of the recent viewed section and make it without jQuery. The updated version will be published in the Shopify Snippets and Sections store and will be free for anyone who bought this one.