Topic summary
The New Horizon theme lacks a built-in Recently Viewed Products section. Several solutions are proposed:
Available Options:
- Install a third-party app from the Shopify App Store specifically for recent product viewing
- Use the theme’s existing ‘Recommended products’ section as an alternative, which displays related or complementary items
- Utilize Shopify’s AI assistant “Sidekick” (accessible via head icon in top toolbar) to generate custom code
Custom Code Solution:
One user provides a complete JavaScript implementation:
- Add tracking script to theme.liquid that stores product handles in localStorage (max 5 products)
- Create a display section using custom liquid code
- The code automatically saves viewed products and renders them with product cards including images, titles, prices, and add-to-cart buttons
- Fetches product data via Shopify’s products.json endpoint
The custom code approach requires manual theme file editing but offers full control without additional app costs.
This theme does not have this function so you can try to use an app to add this section. You can find app fit your request in Shopify app store
Add this code in theme.liquid code
{% comment %} start recently view js for product page {% endcomment %}
<script>
document.addEventListener("DOMContentLoaded", function () {
const recentProductsKey = "recently_viewed_products";
function saveRecentlyViewed(productHandle) {
let products = JSON.parse(localStorage.getItem(recentProductsKey)) || [];
products = products.filter(p => p !== productHandle); // duplicate remove
products.unshift(productHandle); // new first
if (products.length > 5) products.pop(); // max 5
localStorage.setItem(recentProductsKey, JSON.stringify(products));
}
function renderRecentlyViewed(containerSelector) {
let products = JSON.parse(localStorage.getItem(recentProductsKey)) || [];
if (!products.length) return;
fetch(`/products.json`)
.then(res => res.json())
.then(data => {
let container = document.querySelector(containerSelector);
if (!container) return;
let html = "";
products.forEach(handle => {
let product = data.products.find(p => p.handle === handle);
if (product) {
html += `
<div class="product-card">
<a href="/products/${product.handle}">
<img src="${product.images[0]?.src}&width=400&height=400&crop=center" alt="${product.title}">
</a>
<h2>${product.title}</h2>
<p>${Shopify.formatMoney(product.variants[0].price)}</p>
<button
type="button"
class="quick-view-btn"
id="quick-view-add-to-cart"
data-product-handle="${product.handle}">
${product.available ? 'Add to Cart' : 'Sold Out'}
</button>
</div>
`;
}
});
container.innerHTML = html;
});
}
{% if template contains 'product' %}
saveRecentlyViewed("{{ product.handle }}");
{% endif %}
renderRecentlyViewed("#recently-viewed-container");
});
</script>
{% comment %} end recently view {% endcomment %}
Add this code in custom liquid code or create scetion and add this code
<!-- Recently Viewed -->
<div class="recently-viewed" id="recently-viewed" {% if cart.item_count == 0 %}style="display:none"{% endif %}>
<h3>Recently viewed</h3>
<div id="recently-viewed-container" class="recently-viewed-list"></div>
</div>
Hi @Naeem55,
I checked and the current Horizon Theme does not support Recently Viewed Product Section. However, you can use the ‘Recommended products’ section, which will help display ‘Related’ or ‘Complementary’ products.
If I helped you, then a Like would be truly appreciated.
