Customers who bought this also bought...

One of the most well known features of Amazon, and part of it's success story, is the intelligent product recommendations it gives to customers when viewing a product in the form of a 'customers who bought this also bought...' section.

This customisation allows you to have a similar feature on your website.

The feature looks at all purchases of the product being viewed and looks to find common patterns amongst the orders to see what other products were also purchased at the same time. It will then display these to your customers allowing them to quickly browse them.

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 commonly_bought_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 product.commonly_bought_products %}
    <img src="{{ product.photo_url }}">
    {{ product.title }}
    {{ currency_value(product.price) }}
{% endfor %}

The object is only available on the product page which means you can't use it on pages like the home page.

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 product.commonly_bought_products, e.g.

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