Adding a recently viewed products section

Adding a recently viewed products section to your website is a great way to enable customers to quickly compare products or easily go back to a product they have previously viewed in order to continue with their purchase.

As your visitors navigate through your website, a cookie on their computer stores each product that they have viewed.

The section can be added to any page of your website and can come in any or design that you like.

The help guidance below details the twig code that you'll need to add to your website's theme files in order to activate the feature.

The feature uses an object called global.recently_viewed_products. This allows you to 'cycle through' the products in the object to display information about them, like the product image, title and price. The product object gives you full access to all the information about a product.

For example, in it's simplest form (with no styling or layout declaration)

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

All the themes we provide already have a way of displaying products neatly, as shown in the example screenshot above.

In the product.twig file, you'll likely have some code like the below, used to display related products.

{% 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 references to related_products to global.recently_viewed_products, e.g.

{% 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 which means it's accessible on any page of your website. So if you wanted to include this section on every page of your website you can do (you'd place it in the footer.twig file).