Do you want to give your customers a gentle nudge towards their perfect purchase?  Showcasing recently viewed products can re-ignite their interest, spark impulse buys, and personalize their shopping journey on your Shopify store. 

In this article, you can discover how to add Shopify recently viewed products to your store in order to boost engagement, improve conversions, and keep customers coming back for more. 

How to Add Recently Viewed Products In Shopify

Shopify doesn’t have a built-in feature for this, so we’ll use a combination of JavaScript and Liquid code to deal with this case.

Step 1: Create a Snippet

• In your Shopify admin, go to Online Store > Themes.
• Click the Actions button next to your current theme, then Edit code.

• In the “Snippets” folder, click Add a new snippet and name it recently-viewed.

• Paste the following code into the snippet:

{%- if product_ids -%}
 
  <h2>Recently Viewed Products</h2>
 
  <div class="product-grid">
 
    {% for id in product_ids limit: 4 %} 
 
      {% assign product = all_products[id] %}
 
      {% if product != current_product %}
 
        <div class="product-item">
 
          <a href="/%7B%7B%20product.url%20%7C%20within:%20collection%20%7D%7D">
 
            <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title | escape }}">
 
            <h3>{{ product.title }}</h3>
 
            <p>{{ product.price | money }}</p>
 
          </a>
 
        </div>
 
      {% endif %}
 
    {% endfor %}
 
  </div>
 
{%- endif -%}

Step 2: Add JavaScript to Track Views

• Open your theme’s main JavaScript file (usually theme.js or similar in the “Assets” folder).

• Add this code snippet (adjust as needed for your theme):

document.addEventListener('DOMContentLoaded', function() {
  if (typeof Storage !== "undefined") { 
    let viewedProducts = localStorage.getItem('viewedProducts');
    viewedProducts = viewedProducts ? JSON.parse(viewedProducts) : [];

    if (!viewedProducts.includes({{ product.id }})) {
      viewedProducts.push({{ product.id }});
      localStorage.setItem('viewedProducts', JSON.stringify(viewedProducts));
    }
  }
});

Step 3: Render the Snippet on Product Pages

• Open the product-template.liquid file (or similar) in the “Sections” or “Templates” folder.
• Find a suitable location to display the recently viewed products (e.g., below the main product details).

• Add this code:

{% assign product_ids = localStorage.getItem('viewedProducts') | split: ',' | reverse %}
 
{% render 'recently-viewed', product_ids: product_ids %}

• Remember to click the Save button to record your work.

Step 4: Style the Section (Optional)

• In your theme’s CSS file (e.g., theme.scss.liquid), add styles to make the “Recently Viewed Products” section look how you want.

Note:

• This is a basic implementation. Advanced features like limiting the number of stored products or excluding certain products may require further customization or the use of apps.
• Always test thoroughly after making code changes.

Benefits of adding recently viewed products in Shopify

I remember those times when I was shopping online, and I couldn’t easily find a product I’d seen earlier – it was frustrating!  Adding a “Recently Viewed Products Shopify” section to my own Shopify store solved that problem for my customers, and the benefits went beyond just convenience. Let’s view those benefits in detail below:

Improved User Experience & Navigation:

• I remember when I added this to my store, customers loved the easy access to items they were already considering, making their shopping journey smoother.

Increased Engagement & Time on Site:

• The “Recently Viewed” items section acts like a gentle reminder, tempting customers to revisit interesting items and explore more, which in turn boosted my average session duration.

Higher Conversion Rates:

• It’s a subtle nudge towards purchase, especially for those on the fence about a product. I saw a noticeable increase in sales for products that popped up in the “Recently Viewed” section.

Personalized Shopping:

• It makes the customer feel understood. Showing them relevant items based on their browsing history adds a touch of personalization, which can foster loyalty.

Reduced Cart Abandonment:

• Reminding customers of items they left behind can prompt them to complete their purchase. This has been particularly helpful during sales periods when shoppers get distracted by other deals.

Cross-Selling & Upselling Opportunities:

• By showcasing complementary or related products, you can subtly encourage customers to add more to their cart, increasing the average order value. I often use this to pair items that go well together.

Overall, adding “Recently Viewed Products” to my Shopify store felt like giving my customers a helpful shopping assistant. It’s a win-win: they find what they want faster, and I get more sales.

Five best Shopify apps to add your recently viewed products in Shopify

In order to assist you with adding recently viewed product features, we are going to introduce the top 5 Shopify apps that currently deliver this interesting feature.

JustViewed ‑ Recently Products

JustViewed boasts a powerful recommendation engine that goes beyond just showing recently viewed products and also suggesting related items based on browsing behavior. Its AI-powered algorithms constantly learn and adapt, providing increasingly relevant recommendations over time.

SH • Viewed Products Assistant

SH • Viewed Products Assistant combines the power of recently viewed products with personalized recommendations, creating a dynamic and engaging shopping experience. Its user-friendly interface and customization options make it easy to tailor the recommendations to your specific products and target audience. As one Shopify merchant put it in a review, “This app has been a game-changer for my store, boosting sales and customer engagement with its intelligent recommendations.”

MLV Recently Viewed Products

MLV Recently Viewed Products app focuses on simplicity and ease of use, offering a straightforward way to display recently viewed products in an attractive slider or grid format. Its customizable design options and seamless integration with popular Shopify themes make it a great choice for merchants seeking a hassle-free solution.

Ultimate Recently Viewed

The Ultimate Recently Viewed app not only showcases recently viewed products but also includes features like exit-intent popups and personalized recommendations. Its robust analytics and A/B testing capabilities empower merchants to optimize their product displays and maximize conversions.

Qe Recently Viewed

QE Recently Viewed app prioritizes speed and performance, ensuring a seamless browsing experience for your customers. Its lightweight code and intelligent caching minimize the impact on page load times, a crucial factor for user satisfaction and SEO.

FAQs

1. Does Shopify have a built-in feature to display recently viewed products?

No, Shopify does not currently offer a native feature for this. You’ll need to use custom code or a third-party app to implement this functionality.

2. What’s the most common method to track and display recently viewed products on Shopify?

The most common method involves using JavaScript and cookies (or local storage) to store product IDs as users browse your store. Then, Liquid code is used to retrieve and display those products in a designated section.

3. I’m not comfortable editing code. Are there any apps that can help me add this feature easily?

Yes, several Shopify apps like “Also Viewed” or “Product Recommendations” offer built-in recently viewed product functionality without requiring code edits.

4. Will adding a recently viewed products section slow down my Shopify store’s loading speed?

It’s possible, especially if you’re displaying a large number of products or using inefficient code. Ensure any custom code or app you use is optimized for performance to minimize the impact on page speed.

5. Can I customize the appearance and layout of the recently viewed products section?

Yes, with custom code or certain apps, you can customize the look and feel of the section, including the number of products displayed, image sizes, and overall styling.

Final words

This article provides clear instructions on how to implement a “Recently Viewed Products” feature in your Shopify store, which helps enhance user engagement and potentially boost conversions. To ensure optimal results, carefully consider the placement and styling of the section, test it thoroughly on various devices, and experiment with different product display configurations to create the most effective shopping experience for your customers.