How to add recently viewed products in shopify

 Have you ever visited a website, browsed through products, left, and then wanted to go back to something you saw earlier? It's a common online shopping experience, and it's precisely why we've implemented a new feature on our store: Recently Viewed Products for the Dawn theme.

Introducing Recently Viewed Products

Our Recent Products section keeps track of the items you've recently browsed, making it easier for you to revisit them without having to search all over again. It's like your personal shopping assistant, remembering your preferences and making your shopping experience more convenient.

How It Works

Behind the scenes, our website cleverly saves the details of the products you've viewed using advanced JavaScript techniques. Here's a quick rundown of how it operates:

Data Collection: Whenever you view a product page, our website captures essential details like the product title, image, price, and URL.

Local Storage: This information is securely stored in your browser's local storage, ensuring that it's accessible whenever you return to our site.

Display: The Recent Products section dynamically fetches this data and displays it for your convenience, allowing you to quickly jump back to any item you've recently checked out.

Customizable Title

You can customize the title of the Recently Viewed Products section to suit your preferences. Whether you prefer "Recently Viewed" or something more personalized, you can easily adjust it in the settings.

How to Access

Finding the Recently Viewed Products section is a breeze. Simply navigate to our homepage, and you'll spot it prominently displayed, ready to show you the items you've been eyeing.

Try It Out Today!

Ready to experience the convenience of Recently Viewed Products? Head over to our store now and start exploring. Whether you're planning your next purchase or simply revisiting items you loved, this feature makes your shopping journey smoother than ever.

Update Instructions

To enable the Recent Products section on your store, follow these simple steps:

Create a New Section File: Add the provided code snippet to a new file named recent-products.liquid.

<div class="page-width">

    <h2 class="product-recommendations__heading h2 center">{{ section.settings.heading | escape }}</h2>

    <ul class="recently-viewed grid product-grid grid--4-col-desktop grid--2-col-tablet-down" role="list">

    <!-- Recently viewed products will appear here -->

    </ul>

</div>

<script>

function setRecentlyViewedProducts() {

  const productData = {

    productTitle: "{{ product.title }}",

    productImg: "{{ product.featured_media | image_url: width: 533 }}",

    imgWidth:"{{ product.featured_media.width }}",

    imgHeight:"{{ product.featured_media.height }}",

    productPrice: "{{ product.price | money_with_currency }}",

    productUrl: "{{ product.url }}",

    productImageAltText: "{{product.featured_media.alt | escape }}"

  };

  const productList = [];

  let jsonResp, jsonRespArr, jsonRespArrStr;

  const numberOfProducts = 4;

  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="grid__item">

     <div class="card-wrapper underline-links-hover">

      <div class="card card--standard card--media " style="--ratio-percent: 100%;">

        <div class="card__inner color-background-2 gradient ratio" style="--ratio-percent: 100%;">

         <div style="position:static" class="card__media">

         <div class="media media--transparent media--hover-effect">

      <img class="motion-reduce" src="${item.productImg}" width="${item.imgWidth}" height="${item.imgHeight}"  loading="lazy" alt="${item.productImageAltText}"/>

         </div>

         </div>

       </div>

       <div class="card__content">

       <div class="card__information">

       <h3 class="card__heading h5">

       <a class="full-unstyled-link" href="${item.productUrl}">${item.productTitle}</a></h3>

         <div class="card-information">

           <div class="price ">

             <div class="price__container">

               <div class="price-item price-item--regular">

                   ${item.productPrice}

               </div>

             </div>

           </div>

         </div>

       </div>

       </div>

       </div>

       </div>

    </li>

   `);

  });

  const newProductData = `${recentlyViewedHtml.join("")}`;

  const fullContent = document.getElementsByClassName("recently-viewed");

  fullContent[0].innerHTML = newProductData;

}

document.addEventListener("DOMContentLoaded", function (event) {

  getRecentlyViewedProducts();

});

</script>

{% schema %}

  {

    "name": "Recent Products",

    "settings": [

      {

      "type": "text",

      "id": "heading",

      "default": "Recently Viewed",

      "label": "Title"

    }

    ]

  }

{% endschema %}

Update Product JSON: Include the details of the Recent Products section in your product.json file within the Templates folder.

    "recent-products": {

      "type": "recent-products",

      "settings": {

      }

    }

Add to Order: Don't forget to add the section name to the order to ensure it appears correctly on your store.

  "order": [

    "main",

    "related-products",

    "recent-products" // Add this in order

  ]

}

That's it! With these updates in place, your customers can enjoy the benefits of the Recently Viewed Products feature on your store.

Enhance your store's functionality and make shopping more convenient for your customers with the Recent Products section. Try it out today and elevate your online shopping experience!