Services

How to Recommend Related Products on Shopify Website?

How to Recommend Related Products on Shopify Website?

Blog
author Artur Shevchenko

Shopify Expert in building themes and stores

time

7 min

There are many ways how to increase sales in your online store. One of the most effective ways is to add a related product on a Shopify section.
Many online store owners do not use this feature and lose about 30% of their sales. Do you want to know the reasons? Read below.

The offer of additional goods is classic in professional sales. In any coffee shop, they try to persuade a visitor to buy a dessert for coffee. In the clothing store, they always advertise ties, cufflinks, belts or other accessories when the customer buys a suit. He is very likely to agree to buy these related products, and it will certainly increase the total amount in the check. In this way, you also increase the profit of your store. This applies to both traditional and online sales.

Below, we will tell you how to sell the related products in your Shopify store.

Shopify related products recommendations

How to show related products in Shopify? There are several ways to do it:

Method 1: Use the Shopify theme, which has a built-in function for related products.

Method 2: Build your own section for displaying related products by adding the appropriate code to your theme.

Method 3: Use a third-party app from the Shopify app store.

Example of displaying related products on the site:

Section with related products in Shopify online store

Method 1: Use a Shopify theme that has a built-in feature for Related Products

This method is the easiest way how to add related products to Shopify. In most popular Shopify add related products themes, there is initially a built-in related products function.

Thus, you just have to choose the appropriate setting in the Shopify admin and the related products will be displayed automatically. To do that, go to the Customize theme, then go to the Product page, and click on the Product page section in the theme editor. In the list of settings, select Show related products.

How to enable the built-in function of related products in Shopify store

Method 2: Add your section to display Shopify related products

If your Shopify theme does not have a built-in display feature for related products, or you create your store without using Shopify themes, you can add the corresponding section by yourself. You can also choose according to which principle the goods in this section will be displayed: on the basis of collections or by collections tag.  

On the basis of the collection tag

In the option of displaying products based on collection tag in the "Related Products" section, the related products from this collection will be shown. For example, if you have a product in the Spring collection, then other products from this collection will be listed in the product category recommendations on this product page. However, if the product is presented in several collections, then it is impossible to determine what products and from which collection will be displayed.

To add the "Related Products" section you need to perform the following:

1. In Shopify, go to Online Store> Themes.

2. Next, select the theme you want to edit, and in the Actions drop-down menu, click Edit code.

3. In the Templates folder, select the product.liquid file.

4. Find the following code line: {% section 'product-template' %}  and add the following code under {% section 'related-products' %}.

5. After that, click Save.

6. Next, in the Sections folder, click "Add a new section". Give this new section a related-products name.

How to add a new section to display Shopify related products

7. The code editor will open a new related-products.liquid file. Remove the code from it that is added by default. Instead, add the following code, depending on your theme.

  • for  Debut theme:  this code hosted on GitHub;
  • for Jumpstart theme:  this code hosted on GitHub;
  • for Venture theme:  this code hosted on GitHub;
  • for Boundless theme:   this code hosted on GitHub. For this theme, you will also need additional code adjustments. Find product-grid-item.liquid file in the Snippets folder;
  • and the following code in this file:
    <span class="product-item__price--sale">{{ 'products.general.now_price_html' | t: price: price }}</span>
    change into this one:
    <span class="product-item__price--sale"><span class="txt--emphasis">now</span> <span class="js-price">{{ product.price | money_without_trailing_zeros }}</span>

8. Having added the code you need, click  Save.

You can now display a section of related products in your online store. You can enable related products in Shopify and disable this section via the Shopify admin. To do it, go to the Customize theme, and then to the Product page.

Section Related products in the Shopify admin

In the theme editor panel, you will see the Related products tab on the left side of the screen. Click on it to view the settings for this section.

The editor panel of section Related products in the Shopify admin

As you can see, here you can enable or disable the ability to display related products, change the name of this section and the number of displayed products. Do not forget to save the settings you have changed.

READ ALSO

How to add contact form to Shopify store?

How to add contact form to Shopify store?

— by Artur Shevchenko

Shopify related products by tag

If you want to control which products should be displayed in the section of related products, while applying a common set of rules for all products, then the best option is to display Shopify related products by tag.

To do it, you need to take the following steps.

  1. Go to the Edit code section. As in the example above, you need to go to Online Store>Themes in your admin, and in the Actions drop-down menu, click Edit code.
  2. In the Templates folder, select the product.liquid file.
  3. After the code line: {% section 'product-template' %} add the following code: {% include 'related-products-by-tag' %} and click Save.
  4. Next in the Snippets folder, click "Add a new section". Give the new snippet a related-products-by-tag name.
  5. In the code editor, a new file related-products-by-tag.liquid will open. You can take the code for this snippet rights from this link: https://gist.github.com/carolineschnapp/1002949.

Now you can manually choose which exactly recommended products in Shopify will be displayed for a particular product. To do it, in the Shopify admin menu, select Products, and for each item, enter a tag with the product name you want to display.

How to use tags for display related products in Shopify store

NOTA BENE! As a tag, enter the handle of the product.

What is the handle of your product

Method 3: Use Shopify app store to display Shopify recommended products

This is the easiest way to recommend related products. The Shopify app store has a lot of relevant applications. Most of them have a selling price. But a good plus for you will be the availability of a simple and at the same time an effective system for monitoring which products will be recommended.

Let's consider some of them:

Also Bought Recommendation

Also Bought Recommendation is one of the best app for display related product in your Shopify store

This application is based on one of the most well-known features of Amazon - automated cross-selling guidelines. It is simple enough in installation and use. We highly recommend it.

Globo Related Products

Globo Related Products is one of the best app for display related product in your Shopify store

Globo Related Products is a free application developed by Globo. You can independently determine the conditions under which the recommended products in Shopify will be displayed. You also need to establish the order of priority of these conditions.

Cross Sell Recommend Product

Cross Sell Recommend Product is one of the best app for display related product in your Shopify store

Cross Sell Recommend Products is an application that has the ability to add recommended products to product pages, a cart page, and a context popup window when the customers add Shopify recommended products to their shopping cart.

Wiser - Upsell Related Products

Wiser - Upsell Related Products is one of the best app for display related product in your Shopify store

This application allows you to display related products basing on 4 conditions:

  • related products that are defined on the basis of tags or collections;
  • selected recommended products;
  • recently viewed products and bestsellers.

You can add a section of related products to your website anywhere on any page.

Linkcious Related Products

Linkcious Related Products is one of the best app for display related product in your Shopify store

Unlike other applications, Linkcious Related Products uses artificial intelligence to select the related items Shopify for display.

It analyzes contextual information, clicks, and social interactions, which in turn helps to increase the conversion rate. Additionally, Linkcious provides the ability to manually select products on each page.

Conclusions

As you can see, there are plenty of ways how to add related products in Shopify, taking into account different variations of this feature. The main thing to remember is that organizing the sale of a related product is an effective way to influence your sales. Be sure to use it when showing your customers what kinds of similar products are available. By doing this, you will increase the chance that they will find what they are looking for, and the level of your sales will also improve. Do you have any questions regarding this topic? Leave the request and our Shopify Consultant will contact you.

Share with us your idea

Our Shopify Consultant will help you determine the ways of increasing professional growth

CONTACT US

Related articles

MailChimp and Shopify breakup: what to do?

MailChimp and Shopify breakup: what to do?

— by Natalia Polunina
How to Recommend Related Products on Shopify Website?

How to Recommend Related Products on Shopify Website?

— by Artur Shevchenko
How to add contact form to Shopify store?

How to add contact form to Shopify store?

— by Artur Shevchenko
How to Have Shopify Multiple Stores: Complete Answer for a Question

How to Have Shopify Multiple Stores: Complete Answer for a Question

— by Artur Shevchenko
How to Do a Test Order On Shopify: &#91;Complete Guide&#93;

How to Do a Test Order On Shopify: [Complete Guide]

— by Julia Abramova
How to Sell Amazon Products on Shopify: &#91;Best Tutorial&#93;

How to Sell Amazon Products on Shopify: [Best Tutorial]

— by Konstantin Velichko

We know how to develop ecommerce projects

Thank you!
Your request is sent