fbpx

How to Add Recently Viewed Products in Shopify: A Comprehensive Guide

How to Add Recently Viewed Products in Shopify: A Comprehensive Guide

Table of Contents

  1. Introduction
  2. Why Add a Recently Viewed Products Section?
  3. Technical Steps to Add Recently Viewed Products
  4. Best Practices for Implementing Recently Viewed Products
  5. Conclusion

Introduction

Did you know that approximately 70% of online shoppers abandon their carts without completing a purchase? This statistic highlights a crucial aspect of e-commerce: the need to keep potential customers engaged and encourage them to revisit items they've previously shown interest in. As Shopify merchants, we have the power to enhance our customers' shopping experience by utilizing features that remind them of products they’ve recently viewed. One effective method to achieve this is by adding a "Recently Viewed Products" section on our Shopify store.

In this blog post, we will explore the importance of implementing a recently viewed products feature, the technical steps to add this functionality to your Shopify store, and how it can positively impact your sales. By the end, you'll be equipped with the knowledge to create a more personalized shopping experience for your customers, ultimately driving more conversions.

At Tevello, we believe in empowering Shopify merchants like you to unlock new revenue streams and build meaningful connections with your audience. Our all-in-one solution integrates seamlessly into the Shopify ecosystem, enabling you to manage courses, digital products, and vibrant online communities—all without the need for external platforms. Let’s dive into how you can enhance your Shopify store with a recently viewed products feature.

Why Add a Recently Viewed Products Section?

Before we delve into the technical steps, let’s discuss why this feature is essential for your Shopify store. Here are a few key reasons:

1. Facilitating Purchase Decisions

Shoppers often take time to evaluate their options before making a purchase. By displaying recently viewed products, you help keep those items top of mind, making it easier for customers to return to products they were considering.

2. Enhanced User Experience

Personalization is key in e-commerce. A recently viewed products section adds a layer of engagement, making users feel valued and understood. This can lead to increased customer satisfaction and loyalty.

3. Increased Engagement and Time on Site

When customers see items they’ve previously browsed, they are more likely to explore further. This can lead to longer session durations and a deeper interaction with your store.

4. Higher Conversion Rates

By reminding customers of items they've shown interest in, you can encourage them to complete their purchases. This subtle nudge can significantly impact your conversion rates.

5. Opportunities for Cross-Selling

Displaying recently viewed products can also provide opportunities for upselling or cross-selling. If a customer is looking at a specific item, showcasing complementary items can entice them to add more to their cart.

Now that we understand the benefits, let’s move on to the technical steps to implement this feature on your Shopify store.

Technical Steps to Add Recently Viewed Products

Step 1: Create a Recently Viewed Products Snippet

To begin, we need to create a snippet that will hold the code for the recently viewed products. Here’s how to do it:

  1. Access Your Shopify Admin: Log in to your Shopify admin panel.
  2. Go to Online Store > Themes: Select the theme you want to edit and click on "Actions" > "Edit Code."
  3. Create a Snippet: In the snippets folder, click on "Add a new snippet" and name it recently-viewed-products.

Now you have a new snippet where you will add the code to display recently viewed products.

Step 2: Add JavaScript to Track Views

Next, we’ll need JavaScript that tracks the products viewed by customers and stores them in the browser’s local storage. This involves adding some code to your theme’s main JavaScript file.

  1. Open Your Theme’s JavaScript File: Navigate to the Assets folder and look for a file named theme.js or something similar.
  2. Add the Following Code: 
    // Track recently viewed products
let viewedProducts = JSON.parse(localStorage.getItem('viewedProducts')) || [];

// Function to add a product ID to the viewed products
function addRecentlyViewed(productId) {
    if (!viewedProducts.includes(productId)) {
        viewedProducts.push(productId);
        localStorage.setItem('viewedProducts', JSON.stringify(viewedProducts));
    }
}

// Call this function on product page load
addRecentlyViewed('{{ product.id }}');

This code will ensure that whenever a customer views a product, its ID is stored in the browser's local storage.

Step 3: Render the Snippet on Product Pages

Next, we need to display the recently viewed products on the product pages.

  1. Open the Product Template: In the Sections folder, look for product-template.liquid.
  2. Find a Suitable Location: Locate where you want the recently viewed products section to appear, typically below the main product details.
  3. Add the Following Code: 
    {% assign product_ids = localStorage.getItem('viewedProducts') | split: ',' | reverse %}
{% render 'recently-viewed-products', product_ids: product_ids %}

This code retrieves the recently viewed product IDs from local storage and renders the snippet we created earlier.

Step 4: Style the Recently Viewed Products Section

Now that we have the functionality set up, let’s style it to match your store's aesthetic.

  1. Open Your Theme’s CSS File: Navigate to the Assets folder and open your CSS file, usually named theme.scss.liquid or similar.
  2. Add Styles: You can add custom styles to make the recently viewed products section visually appealing. Here’s a basic example: 
    .recently-viewed-item {
    display: inline-block;
    margin: 10px;
    text-align: center;
}
.recently-viewed-item img {
    max-width: 100px;
    height: auto;
}

Testing Your Implementation

After completing these steps, it’s crucial to test the functionality:

  1. Preview Your Store: Open a product page and view a few products.
  2. Check the Recently Viewed Section: Ensure the recently viewed products are displaying correctly and that the styling matches your store.

Best Practices for Implementing Recently Viewed Products

While adding a recently viewed products section is beneficial, there are some best practices to consider:

1. Limit the Number of Products Displayed

To prevent clutter, consider limiting the number of recently viewed products displayed (e.g., the last four items). This keeps the section tidy and focused.

2. Exclude Certain Products

You may want to exclude certain products from appearing in the recently viewed section, such as out-of-stock items or products with low ratings.

3. Mobile Responsiveness

Ensure that the recently viewed products section is responsive and looks good on mobile devices. Test the layout on different screen sizes.

4. Regularly Clear Old Data

Implement a mechanism to clear old data from local storage to ensure that the recently viewed products list remains relevant.

5. Monitor Analytics

Use analytics to track how often customers interact with the recently viewed products section. This data can inform further optimizations.

Conclusion

Incorporating a "Recently Viewed Products" section into your Shopify store can significantly enhance the shopping experience for your customers. It serves as a reminder of items they’re interested in, fosters personalization, and can lead to increased conversion rates.

By following the steps outlined in this guide, we can effectively implement this feature and create a more engaging environment for our customers. At Tevello, we are dedicated to empowering Shopify merchants like you by providing easy-to-use solutions that help you grow your business.

Ready to take your Shopify store to the next level? Start your 14-day free trial of Tevello today and discover how our all-in-one platform can help you create, manage, and sell online courses and digital products while building vibrant online communities.

FAQ

How do I add the recently viewed products feature without coding?

If you’re not comfortable editing code, consider using Shopify apps designed to add a recently viewed products feature easily. These apps typically offer customization options without requiring technical knowledge.

Can I customize the appearance of the recently viewed products section?

Yes, you can customize the layout and style of the recently viewed products section by modifying the CSS in your theme’s stylesheet. This allows you to align it with your store’s branding.

Will adding this feature affect my store’s performance?

When implemented correctly, a recently viewed products feature should not significantly impact your store's performance. However, always ensure that your code is optimized and that you're not loading unnecessary scripts.

How can I test if the recently viewed products feature is working?

You can test the feature by viewing several products on your store. Check the recently viewed products section to see if it updates correctly with the products you have viewed.

What if I want to limit how many products are displayed in the recently viewed section?

You can easily limit the number of displayed products by modifying the code in the snippet where the products are rendered. For example, you can use Liquid’s limit filter to show only the last four viewed products.

By implementing these strategies, we not only enhance customer engagement but also pave the way for increased sales and customer loyalty. Let’s make our Shopify stores a place where customers feel valued and are encouraged to return!