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