How can I create a recently viewed products section using modern methods?

Store Design
, ,

Topic summary

A developer is seeking modern methods to implement a recently viewed products section in Shopify, hoping for native Shopify objects or Liquid-based solutions rather than older JavaScript/DOM manipulation approaches.

Proposed Solution:

  • Use JavaScript with cookies to store product IDs
  • Implement functions to get/add recently viewed products via cookie storage
  • Create a Liquid section to retrieve and display products from the cookie

Key Limitations Identified:

  • The solution still relies on JavaScript cookies and DOM manipulation
  • No native Shopify/Liquid options currently exist for this functionality
  • Cannot directly reuse existing product card snippets with the cookie-based approach

Status: The discussion remains unresolved, as the provided solution doesn’t meet the original request for a native Shopify implementation. Participants agree that a Liquid-based solution would be preferable for better integration with existing theme components.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

I need to create a recently viewed products section from scratch.

I have seen some .js code mixed with HTML about DOM manipulation. They are publications from a long ago.

Are there new ways to implement a recently viewed products section using shopify objects or a more useful way?

Otherwise, could you provide your way to implement this section?

Thank you very much

1 Like
2

Try this code:

function getRecentlyViewedProducts() {
  var viewedProducts = [];
  var cookie = Cookies.get('recently_viewed_products');
  if (cookie) {
    viewedProducts = JSON.parse(cookie);
  }
  return viewedProducts;
}

function addRecentlyViewedProduct(productId) {
  var viewedProducts = getRecentlyViewedProducts();
  var index = viewedProducts.indexOf(productId);
  if (index > -1) {
    viewedProducts.splice(index, 1);
  }
  viewedProducts.unshift(productId);
  Cookies.set('recently_viewed_products', JSON.stringify(viewedProducts), { expires: 30, path: '/' });
}

Yes, there are different ways to implement a recently viewed products section in Shopify. One way to do it is by using cookies and JavaScript to store and display the recently viewed products. Here are the general steps you can follow:

  1. Add a script to your theme that will capture and store the IDs of the recently viewed products in a cookie.

  2. Create a new section in your theme for the recently viewed products. In this section, you can use the Shopify Liquid language to retrieve and display the products stored in the cookie.

  3. Add the recently viewed products section to your desired page(s) in your theme.

3

Thank you NomtechSolution! So still all about .js cookies and HTML DOM manipulation. I wish Shopify would implement some native options for this.

1 Like
4

I wouldn’t have marked this as solved, since it’s not really what you were asking. We need a way to do it natively in Liquid so we can reuse the product card snippets and stuff.

1 Like