Showing recently viewed products in Shopify
History is a people’s memory, and without a memory, man is demoted to the lower animals. — Malcom X
Recently I was asked to help in one of our family projects. You never say no to the family! In an online retail store that is running on the Shopify platform, a recently viewed product list was needed to be shown to increase user conversion. Surprisingly Shopify doesn’t have a native solution for this. There are few plugins and apps available for this purpose, many of them required a monthly subscription or needed to expose the full store data to a third party. None of them are particularly appealing for a simple task like this.
There are two ways you can do this.
- Create a separate app that captures the product info and stores it in its platform and pulls the list from that platform based on user session. This is what most of the apps do now.
- Add a javascript code in your Shopify theme to store the recently viewed products in the session cookie information of the browser and retrieve it to display as a product grid.
There are pros and cons to each of this approach. The first approach can implement advanced features and lend itself well to machine learning to build recommended products based on users browsing history in the store. The second one just wins on the simplicity of the solution. You want to show something like the following to the user.
Conceptually to implement this feature you need to figure out if the user is viewing a single product, then record that product info and add it to the list of recently viewed products and store it in the cookie. Later when the user is viewing another product retrieve the list from the cookie and nicely format it according to your theme and display it.
Fortunately, someone has already done the hard work for everyone else. Here is a javascript (jQuery plugin) code that takes care of saving and retrieving the recently viewed information. For the normal save and retrieve operations to work you need jQuery and for displaying the product list you need the jQuery template functionality.
To pull in the above plugin to your store theme file, go to customize your theme > Edit code. This will bring up the list of the files on your left and editor on the right. Go to the Assets section on the left and click on “Add a new asset”. This will ask for the name of the file to create and a file extension from the drop-down extension list. Let’s name our file jquery.products.min.js. Copy the code from the following gist into this file and save it. This has the original jquery products as well as the jquery template code in it.
Trending GoBeyond.ai articles:
1. Next Best Action Marketing: How to Implement Hyper-personalization with Machine Learning
2. How to build your MVP using no-code tools
3. New to E-commerce Marketing ? — here’s what NOT to do
4. [Prototyping Stack] No-code tools to Build, Launch and Scale your Start-Up🚀.
To save the product history, open your theme.liquid file and paste this code towards the end of the file (before closing body).
Now, whenever the user visits a product page it will be recorded and stored in the cookie. Now all that is left is to retrieve that saved list and show the recently viewed products. Go to the snippet section and “Add a new snippet” and paste the following code (formatted for the free theme debut) with the name recently-viewed.liquid.
Now open your product.liquid template file and add the following code
{% include 'recently-viewed' %}That is it. You have a fully functional recently viewed section without paying anyone the monthly subscription free. You can see this plugin in action here in this Shopify store [https://asteria.one].
Reference:
Don’t forget to give us your 👏 !
