SearchLoginTry ShopWired Free

Create your own ecommerce website and start selling successfully with ShopWired today

Create your ecommerce website on ShopWired today.
Start today with 14 days free

Try ShopWired Free

Create your own ecommerce website and start selling successfully with ShopWired today

Create your ecommerce website on ShopWired today.
Start today with 14 days free

Adding a ‘Recently Viewed Products' section to your website

Back to articles
Theme Customisations - Coding
14th February 2021

Before you proceed:
The following article contains information that requires you to have some prior knowledge about coding in order to correctly implement the proposed change to your theme. If done incorrectly alterations made to your theme’s code can negatively impact your website causing visual and performance issues. Therefore, we strongly recommend that you only undertake this effort if you are completely confident that you know what you’re doing. If you have no coding experience at all, aren’t entirely comfortable following the instructions in this article or if you simply don’t understand the instructions then we recommend you instead contact our partners, Coding Masters, who will complete the work for you for a set fee.

As your visitors navigate through your website a cookie on their computer stores each product that they view. By adding some code to your live theme’s files you can display a recently viewed products section on your website so your customers can see products they’ve recently expressed interest in. A recently viewed products section is a great way to allow customers to quickly compare products or to return to a product they might want to easily find again.

You can add this section to any page of your website and you can create it in any design that you like. 

To produce this feature on your website follow the guidance below to learn about the twig code that you need to add to your theme’s files:

The ‘recently viewed’ feature uses the object called global.recently_viewed_products, which allows you to 'cycle through' the products in the object to display information about them, such as the product image, title and price. The product object gives you full access to all the information about a product.

For example, in its simplest form, with no styling or layout declaration, the code could look like this:

{% for product in global.recently_viewed_products %}
      <img src="{{ product.photo_url }}">
       {{ product.title }}
       {{ currency_value(product.price) }}
{% endfor %}

All of the themes that we provide already have a built-in way of displaying products neatly, which can be seen in the example 'Recently Viewed' section above.

In the product.twig file of your live theme, you'll likely already see some code that is used to display related products which looks something like this:

{% if product.related_products|length %}
    <div class="row">
        <div class="col-sm-12">
            <div class="featured-products">
                <h2 class="featured-products-headline">You may also like</h2>
                {% include 'partials/products.twig' with { 'products': product.related_products, 'container_class': 'featured-products-slider2', 'product_box_class': ' ' } %}
            </div>
         </div>
     </div>
{% endif %}

You can use this code (which may require some small HTML/CSS amendments) to give you a good starting point for your recently viewed section.

Simply copy the code and change the related_products references to global.recently_viewed_products, which would then look similar to this:

{% if global.recently_viewed_products|length %}
    <div class="row">
        <div class="col-sm-12">
            <div class="featured-products">
                <h2 class="featured-products-headline">Recently viewed</h2>
                {% include 'partials/products.twig' with { 'products': global.recently_viewed_products, 'container_class': 'featured-products-slider2', 'product_box_class': ' ' } %}
            </div>
        </div>
    </div>
{% endif %}

The global.recently_viewed_products object is part of the global object, meaning it is accessible on any page of your website, so if you want to include this section on every page of your website you can! (You'd place it in the footer.twig file.)

Once you've finished altering your theme's files don't forget to save your changes and check your website to make sure everything works and looks as it should!