How to Add Recently Viewed Products to Your Shopify Store

A recently viewed products section helps shoppers return to products they explored earlier without repeating searches or navigating through multiple collections.

In this guide, you’ll learn how to add recently viewed products to Shopify using Liquid, JavaScript, browser storage, and Shopify’s Ajax Product API. The implementation records recently visited product handles and retrieves current product information before displaying the section.

This feature can improve product rediscovery and reduce browsing friction. However, it should not be treated as a guaranteed way to increase conversions, reduce cart abandonment, or generate cross-sales. Its impact should be measured using store-specific engagement and conversion data.

What Are Recently Viewed Products?

Recently viewed products are items that a shopper has opened during an earlier part of their browsing journey. A Shopify theme can record these visits in browser storage and display the products again on product, collection, cart, or home pages.

In a browser-based implementation, the history remains associated with that browser and device. It will not automatically follow a shopper to another device unless the data is connected to a customer account or another server-side system.

Benefits of Adding Recently Viewed Products to Shopify

1. Easier Product Rediscovery

Recently viewed products give shoppers a direct route back to items they have already explored. This can be useful when a store has a large catalogue, or customers compare several similar products.

2. Less Browsing Friction

Shoppers do not need to repeat a search, revisit a collection, or use their browser history to find an earlier product.

3. Better Continuity During Longer Visits

The section can preserve context as customers move between products, collections and informational pages during the same browsing journey.

4. Additional Product Engagement

Displaying previously explored products creates another opportunity for shoppers to revisit product details, variants, reviews or pricing. Whether this improves sales should be confirmed through store-specific testing.

5. Support for Product Comparison

Customers considering several products can use the section as a simple way to return to earlier options. Recently viewed products should not, however, be described as cross-selling recommendations because they are based on browsing history rather than product compatibility.

The Core Components of this Implementation

1. Product Tracking

When a shopper opens a product page, the implementation records the product handle and the time of the visit in the browser's localStorage.

Only the information required to identify the product should be stored. Current prices, images, and availability should be retrieved from Shopify when the section is displayed.

2. Seven-Day History Retention

Each recorded product includes a timestamp. If more than seven days have passed since the visit, that entry is removed from the shopper’s recently viewed history.

This seven-day period can be changed according to the store’s requirements.

3. Current Product Information

Before displaying a recently viewed product, the implementation should retrieve its latest information through Shopify’s Ajax Product API. This prevents outdated prices, images or unpublished products from appearing in the section.

4. Conditional Rendering

The section remains hidden when there are no recently viewed products to display. The product currently being viewed should also be excluded from the list.

5. Theme Customisation

Store owners can customise the section heading, number of displayed products, spacing, typography, and product-card design to match the existing Shopify theme.

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

Step 1: Create the Liquid Section

The recently viewed products feature requires a Liquid section supported by JavaScript. The implementation should store only product handles and timestamps, retrieve current product information through Shopify’s Ajax Product API, exclude the current product and remove history entries older than seven days.

Because theme structures differ, the code should be adapted and tested against the store’s current theme rather than copied directly into a live store. It should also be tested for mobile layouts, Shopify Markets, multiple currencies and products that have been unpublished.

Step 2: Add the Recently Viewed Products Section to Your Theme

Before editing any code, duplicate your live theme so you have a backup.

1. From Shopify Admin, open Online Store → Themes.
2. Find the duplicated theme, open its action menu and select Edit code.
3. Under Sections, select Add a new section.
4. Name the file recently-viewed-products.liquid.
5. Add the tested Liquid, CSS and JavaScript implementation prepared for your Shopify theme.
6. Select Save.
7. Open the theme customiser and navigate to the product template.
8. Add the Recently Viewed Products section to the template.
9. Add the section to other templates, such as the home, collection or cart page, wherever you want the product history displayed.
10. Visit two or more products in the storefront preview and confirm that previously viewed products appear.

The tracking code must load on product pages to record visits. If the section is not added to the product template, product visits may not be recorded.

If you need help adapting the implementation to your theme, Markets configuration or existing applications, you can hire Shopify experts to implement and test it.

Frequently Asked Questions

1. How does Shopify track recently viewed products?

Custom Shopify implementations commonly use browser storage to record product handles and timestamps. JavaScript can then retrieve current product information and display the products a shopper previously explored.

2. Do recently viewed products affect Shopify store speed?

They can add JavaScript and product requests. Limit the number of displayed products, use lazy-loaded images and test performance before and after adding the section.

3. How many recently viewed products should I display?

There is no universal best number. Four products provide a practical starting point, but the ideal number depends on the store’s layout, catalogue and customer behaviour.

4. Do recently viewed products work across devices?

Not when the history is stored only in localStorage. Browser-based history remains specific to that browser and device unless it is synchronised through customer accounts or another system.

5. Can recently viewed products increase conversion rates?

They can help shoppers rediscover products, but an increase in conversions is not guaranteed. Measure product clicks, add-to-cart activity and completed purchases to evaluate their effect.

6. Is custom code better than a Shopify app?

Custom code provides greater design control and avoids an app subscription. An app may be preferable when a store needs easier maintenance, analytics or recently viewed history across devices.

Conclusion

Adding recently viewed products to Shopify gives shoppers a convenient way to return to items they previously explored. The feature is particularly useful for stores with large catalogues or customers who compare several products before purchasing.

A reliable implementation should store minimal browser data, remove older history entries, exclude the current product and retrieve up-to-date information before displaying each product.

After publishing the section, monitor product clicks, add-to-cart activity and completed purchases. This will help determine whether the feature is improving product discovery and supporting the store’s conversion journey.