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

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 'Customers who bought this also bought...' section

Theme Customisations - Coding
16th 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.


One of the most well known features of Amazon, and part of its 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.

Simply copy the code and change the references of 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 %}