How to Add Recently Viewed Products in Shopify: A Step-by-Step Guide

Table of Contents

1. Introduction
2. Why Add a Recently Viewed Products Section?
3. Understanding the Technical Foundations
4. Step 1: Create the Snippet for Recently Viewed Products
5. Step 2: Add JavaScript to Capture and Store Recently Viewed Products
6. Step 3: Rendering the Snippet on Desired Pages
7. Step 4: Styling the Recently Viewed Products Section
8. Testing Your Recently Viewed Section
9. Conclusion
10. FAQ

Introduction

Did you know that approximately 70% of online shopping carts are abandoned? One effective way to combat this issue is by enhancing user experience through strategic design elements, such as a "Recently Viewed Products" section on your Shopify store. This feature not only helps customers easily revisit items they've shown interest in but also encourages them to complete their purchases. In this blog post, we will guide you through the process of adding a Recently Viewed Products section to your Shopify store.

By the end of this article, you will understand the importance of this feature, the technical steps involved in its implementation, and how to customize it to fit your brand's aesthetics. We'll cover the use of both Liquid and JavaScript to create a seamless experience for your customers. Let’s dive deep into how to add recently viewed products in Shopify and revolutionize your eCommerce strategy!

Why Add a Recently Viewed Products Section?

Before we delve into the "how-to," let's discuss the "why." Adding a Recently Viewed Products section can significantly enhance customer experience and increase conversion rates for several reasons:

1. User Convenience: It allows customers to quickly access products they have recently viewed without having to search for them again.
2. Encouragement to Purchase: By reminding customers of products they were interested in, it can reduce decision fatigue and encourage a quicker purchase.
3. Increased Engagement: This feature can lead to higher time spent on the site and increased chances of multiple purchases.
4. Brand Recall: It helps in reinforcing brand recognition as users regularly see your product offerings.

Incorporating this feature is not just a nice-to-have; it’s a strategic move that can lead to increased sales and improved customer satisfaction.

Understanding the Technical Foundations

To implement a Recently Viewed Products section, we'll leverage Shopify's Liquid templating language and JavaScript. This approach utilizes local storage to remember the products a user views, ensuring that the information persists even if they navigate away from the page or refresh it.

Key Components

1. Liquid: The templating language that Shopify uses to load dynamic content.
2. JavaScript: A programming language that we'll use to manipulate the DOM and handle local storage.

Steps Overview

We’ll outline the following steps:

1. Create a new snippet for recently viewed products.
2. Add JavaScript code to capture and store recently viewed products.
3. Render the recently viewed products on the desired page(s).
4. Style the section to match your store's design.

Step 1: Create the Snippet for Recently Viewed Products

The first step in adding a Recently Viewed Products section is to create a new snippet in your Shopify theme.

Creating a Snippet

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Click on Actions > Edit code next to your active theme.
4. Under the Snippets directory, click Add a new snippet and name it recently-viewed-products.liquid.

Adding Basic HTML Structure

Within the newly created snippet, add the following HTML structure:

<div id="recently-viewed-products" class="recently-viewed">
  <h2>Recently Viewed</h2>
  <ul id="recently-viewed-list"></ul>
</div>

This will serve as the container for our recently viewed products.

Step 2: Add JavaScript to Capture and Store Recently Viewed Products

Next, we need to implement JavaScript to track the products users view. This script will store product IDs in a user's local storage.

Adding JavaScript Code

1. Within the Assets directory, create a new JavaScript file named recently-viewed.js.
2. Add the following code to capture and store product IDs:

document.addEventListener('DOMContentLoaded', function() {
  // Function to get current product ID
  const productId = window.location.pathname.split('/').pop();

  // Retrieve previously viewed products from local storage
  let recentlyViewed = JSON.parse(localStorage.getItem('recentlyViewed')) || [];

  // Check if the product is already in the viewed list
  if (!recentlyViewed.includes(productId)) {
    recentlyViewed.push(productId);
  }

  // Limit to the last 5 viewed products
  if (recentlyViewed.length > 5) {
    recentlyViewed.shift();
  }

  // Store updated list in local storage
  localStorage.setItem('recentlyViewed', JSON.stringify(recentlyViewed));

  // Render the recently viewed products
  renderRecentlyViewed();
});

function renderRecentlyViewed() {
  const productList = JSON.parse(localStorage.getItem('recentlyViewed')) || [];
  const listContainer = document.getElementById('recently-viewed-list');

  productList.forEach(productId => {
    const productHtml = `<li><a href="/el/products/${productId}">${productId}</a></li>`;
    listContainer.innerHTML += productHtml;
  });
}

Explanation of the Code

• This script listens for the page to load, retrieves the current product ID from the URL, and checks if it exists in the user's local storage.
• If the product is not already in the list, it adds it to an array, limits the array to the last five viewed products, and stores it back in local storage.
• Finally, it renders the recently viewed products on the page.

Step 3: Rendering the Snippet on Desired Pages

Now that we have our snippet and JavaScript ready, we need to include the recently viewed products snippet on the product template where we want it to appear.

Inserting the Snippet

1. Navigate to the Sections directory and locate the product-template.liquid file.
2. Choose where you want the Recently Viewed Products section to appear and insert the following line of code:

{% include 'recently-viewed-products' %}

This inclusion will allow the snippet to render whenever a product page is loaded.

Step 4: Styling the Recently Viewed Products Section

To ensure the Recently Viewed Products section aligns with your store's overall design, you will need to add some CSS styles.

Adding CSS Styles

1. Open your theme's CSS file, typically found in the Assets directory (e.g., theme.scss.liquid).
2. Add the following styles to customize the section:

.recently-viewed {
  margin-top: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

.recently-viewed h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.recently-viewed ul {
  list-style-type: none;
  padding: 0;
}

.recently-viewed li {
  margin: 5px 0;
}

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

These styles will enhance the display of the Recently Viewed Products section, making it visually appealing and user-friendly.

Testing Your Recently Viewed Section

After completing all the steps, it's crucial to test the functionality:

1. Navigate to various product pages on your store.
2. Check that each product ID is stored correctly in local storage.
3. Ensure that the Recently Viewed Products section displays the correct products when revisiting the product pages.

Conclusion

By implementing a Recently Viewed Products section in your Shopify store, you're taking a significant step towards enhancing user experience and potentially boosting conversion rates. As we've explored, this feature requires a combination of Liquid and JavaScript to function effectively.

We hope this guide has provided you with clear, actionable steps on how to add recently viewed products in Shopify. Remember, a small enhancement can lead to substantial results in customer satisfaction and sales performance.

If you’re looking for even more ways to optimize your online store, consider exploring the PowerCommerce eStore Suite. Our comprehensive suite of services is designed to empower your ecommerce brand with innovative solutions that drive growth and performance. Order Now and take the next step in your ecommerce journey!

FAQ

Q1: Can I add a Recently Viewed Products section to any Shopify theme? Yes, you can implement this feature in most Shopify themes by following the steps outlined in this guide.

Q2: Will the Recently Viewed Products section work on mobile devices? Absolutely! The implementation described here is responsive and will work seamlessly on both desktop and mobile devices.

Q3: What happens to the Recently Viewed Products list if a user clears their browser cache? If a user clears their browser cache, the products stored in local storage will be deleted, and they will no longer see their recently viewed products.

Q4: Can I customize the number of products displayed in the Recently Viewed section? Yes, you can modify the JavaScript code to change the number of products stored in local storage and displayed in the Recently Viewed Products section.

Q5: What if I want to integrate this feature with a third-party app? You can still use this custom implementation alongside third-party apps, but ensure there are no conflicts with existing JavaScript or Liquid code.