---
title: "Show related products"
---

## A strategy to improve your sales

A visitor to your store is looking at the details of a product they like.

It's a good idea to also show them products related to the one they are viewing (not to be confused with similar ones). This encourages them to stay in your store and *eventually* leads to one or more sales.

How do you do this? Here's how.

## What a related product is

In Bolder, related products have **tags in common** but *also* **belong to a different *Product Type***. Here is an example:

-   Product 1: Container Set
-   Brand: Joseph Joseph
-   Product type: Container
-   Tags: airtight, portable, utensil

* * *

-   Product 2: Good grips
-   Brand: Oxo
-   Product type: Mandoline
-   Tags: slice, ergonomic, utensil

Both products are different product types, but they share one tag: "utensil". So they are related products.

**One or more**:

Related products can share one or more tags.

## How to show related products

This feature already comes built into all of our themes, but if you are building a new theme of your own from scratch, you need to add the following to your product.html code:

\<!-- product.html --> \{% if product.has\_related\_products %\} \<div id="related-products">   \<h2>\{\{ "titles.related\_products" | t \}\}\</h2>   \<ul class="products clearfix">   \{% loop product.related\_products in 'product\_item' limit:3 %\}   \</ul> \</div>\<!-- /related-products --> \{% endif %\}

## Order of appearance

Related products appear in descending order by the number of tags they have in common.

### Example

Below is a product detail page, with its similar and related products.

Figure 1: Product detail. It also includes Related and Similar products

## Suggest related products in the cart

The following piece of code will suggest related products right after the shopper adds a product to the cart. It's an excellent moment to *encourage* another purchase. This feature already comes built into all of our themes, but if you are building a new theme of your own from scratch, you need to add the following to your code.

\<!-- cart.html --> \{% if related\_products\_to\_just\_added %\} \<section class="product-list">   \<h2>\{\{ 'orders.messages.you\_might\_be\_interested' | t \}\}\</h2>   \<ul class="products row">     \{% loop related\_products\_to\_just\_added in 'product\_item' limit:3 %\}   \</ul> \</section> \{% endif %\}

Related products in the cart