Recently viewed products in home page dawn theme

[Sivadarshan]

Is it possible to add recently viewed products in home page in  dawn v15.1.0 

[rifat_ShopiDevs]

@Sivadarshan , hi hope you are well
yes possible, you need do it by custom code 
need custom logic 

<style>
  .recently-viewed-products {
    margin: 20px 0;
  }
  .recently-viewed-products h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .recently-viewed-products .grid {
    display: flex;
    flex-wrap: wrap;
  }
  .recently-viewed-products .grid__item {
    flex: 1 1 25%; /* Adjust as needed */
    margin: 10px;
    text-align: center;
  }
  .recently-viewed-products img {
    max-width: 100%;
    height: auto;
  }
</style>

<div class="recently-viewed-products">
  <h2>Recently Viewed Products</h2>
  <div class="grid"></div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const recentlyViewed = JSON.parse(localStorage.getItem('recentlyViewed')) || [];
    const productId = '{{ product.id }}';

    // Store the current product ID in local storage
    if (productId && !recentlyViewed.includes(productId)) {
      recentlyViewed.push(productId);
      localStorage.setItem('recentlyViewed', JSON.stringify(recentlyViewed));
    }

    // Display recently viewed products
    const productContainer = document.querySelector('.recently-viewed-products .grid');
    recentlyViewed.forEach(function(id) {
      fetch(`/products/${id}.json`)
        .then(response => response.json())
        .then(data => {
          const product = data.product;
          if (product) {
            const item = document.createElement('div');
            item.classList.add('grid__item');
            item.innerHTML = `
              <a href="${product.url}">
                <img src="${product.images[0].src}" alt="${product.title}">
                <h3>${product.title}</h3>
                <span>${Shopify.formatMoney(product.price, Shopify.money_format)}</span>
              </a>
            `;
            productContainer.appendChild(item);
          }
        });
    });
  });
</script>

{% schema %}
{
  "name": "Recently Viewed Products",
  "settings": [],
  "presets": [
    {
      "name": "Recently Viewed Products",
      "category": "Custom"
    }
  ]
}
{% endschema %}

Hope its work for you
Thank you

[namphan]

Hi @Sivadarshan,

Are you referring to the 'Related products' section? This can be displayed, but you need to have an anchor product for it, where to check and display the products around, similar to the setup of the 'Search & Discovery' app.

Please let me know, I will check it.

[rifat_ShopiDevs]

@Sivadarshan hi, hope you are well.
if you want to use app, then you can go with this app EasyDisplay: Product Showcase . this app have recent view app features and lots of nice features
Thank you