How to Add a Recently Viewed Products Section in Free Shopify Themes
In the world of eCommerce, enhancing user experience is key to boosting sales and customer satisfaction. One effective way to achieve this is by adding a “Recently Viewed Products” section to your Shopify store. While many premium Shopify themes include this feature, it’s not readily available in free themes like Dawn, Fresh, or Sales. This guide will walk you through setting up a “Recently Viewed Products” section on these free themes.
Why Add a Recently Viewed Products Section in Your Shopify Store?
Before diving into the implementation, here’s why this feature is valuable:
- Facilitates Purchase Decisions: Online shoppers often take time to decide. Displaying recently viewed products keeps those items top of mind.
- User Convenience: Customers can easily return to products without searching again.
- Enhanced User Experience: Adds personalization, making your store more engaging.
Step-by-Step Guide to Implement Recently Viewed Products on Shopify Free Themes
Follow these steps to implement the “Recently Viewed Products” section in your Shopify store.
Step 1: Create a “recently-viewed” Snippet in Shopify Admin
- Log in to your Shopify admin and navigate to Online Store > Themes.
- Select your theme and click Actions > Edit Code.
- In the Snippets folder, click Add a new snippet and name it recently-viewed.liquid.
Step 2: Add Custom Code to Track and Display Recently Viewed Products
Check the code into the recently-viewed.liquid snippet:
@media only screen and (min-width: 750px) {
.js-recentPdpBlock {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: var(--grid-desktop-horizontal-spacing);
}
}
@media only screen and (max-width: 576px) {
.js-recentPdpBlock {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--grid-desktop-horizontal-spacing);
}
.c-product img {
height: 230px !important;
}
}
.recently-title h2 {
font-size: 24px;
border-top: 1px solid #d2d2d2;
padding-top: 50px;
}
.c-product {
cursor: pointer;
}
.c-product img {
height: 280px;
width: 100%;
object-fit: cover;
}
.c-product p.c-productPrice {
line-height: 0px;
color: #000;
}
.c-product h3.c-product__title {
line-height: 0px;
padding-bottom: 10px;
}
.c-product h3.c-product__title a {
color: black;
text-decoration: none;
}
a.c-product__url {
position: relative;
}
function setRecentlyViewedPdp() {
const pdpData = {
productTitle: "{{ product.title }}",
productImg: "{{ product.featured_image | img_url: '' }}",
productPrice: "{{ product.price | money | remove_first: '' }}",
productUrl: "{{ product.url }}"
};
const productArr = [];
let jsonResp, jsonRespArr, jsonRespArrStr;
const numberOfProduct = 4;
productArr.push(pdpData);
const currPdpTitle = pdpData.productTitle;
const pdpDataString = JSON.stringify(productArr);
const localData = localStorage.getItem('recently_viewed');
if (localData == null) {
localStorage.setItem('recently_viewed', pdpDataString);
} else if (localData != null) {
const oldPdpData = localStorage.getItem('recently_viewed');
const countPdpData = (oldPdpData.match(/productTitle/g) || []).length;
const reVisitPdp = oldPdpData.includes(currPdpTitle);
if (countPdpData < numberOfProduct && reVisitPdp == false) {
jsonResp = JSON.parse(oldPdpData);
jsonRespArr = jsonResp.concat(productArr);
jsonRespArrStr = JSON.stringify(jsonRespArr);
localStorage.setItem('recently_viewed', jsonRespArrStr);
} else if (countPdpData >= numberOfProduct && reVisitPdp == false) {
jsonResp = JSON.parse(oldPdpData);
jsonResp.shift();
jsonRespArr = jsonResp.concat(productArr);
jsonRespArr = JSON.stringify(jsonRespArr);
localStorage.setItem('recently_viewed', jsonRespArr);
}
}
}
setRecentlyViewedPdp();
const localViewed = localStorage.recently_viewed;
Recently Viewed
function getRecentPdp() {
const pdpData = JSON.parse(localStorage.getItem('recently_viewed'));
const recentViewHtml = [];
pdpData.forEach(function(item) {
recentViewHtml.push(`
`);
});
const recentBlock = `${recentViewHtml.join('')}`;
const contentBlock = document.querySelectorAll('.js-recentPdpBlock');
contentBlock.forEach(element => {
element.innerHTML = recentBlock;
});
}
getRecentPdp();
This code uses Shopify’s product data and local storage to track and display up to four recently viewed products. It’s compatible with various Shopify themes and includes responsive styling for desktop and mobile.
Step 3: Render the Snippet on Product Pages
- In the code editor, open the main-product.liquid file under the Sections folder.
- Search for product-media-model.
- Add the following line after it to render the snippet:
{% render 'recently-viewed' %}
This ensures the “Recently Viewed Products” section appears on product pages.
Step 4: Test and Verify the Feature
- Save your changes and preview your store.
- Visit a few product pages to simulate user behavior.
- Verify that the “Recently Viewed Products” section displays the correct products, persists after page refreshes, and is styled appropriately.
Conclusion
Adding a “Recently Viewed Products” section to your Shopify store enhances user experience by making it easier for customers to revisit products they’re interested in. By following these steps, you can implement this feature on free Shopify themes like Dawn, Fresh, or Sales without needing premium plugins. Test thoroughly to ensure compatibility with your theme and enjoy the benefits of a more personalized shopping experience!
Comments