Adding related products to your Shopify website requires knowledge of web designing languages such as HTML, CSS, Javascript and Liquid.
Showing related products however, can be really beneficial as it helps to boost sales by showing customers similar products to the one they’re looking at making it easier for them to find what they’re looking for.
You can add related products by :
- Using an App : The easiest way to show related products is by using an app from the Shopify App Store. There are a number of apps that can help you do this. You can check them out here
- Edit your theme code : You can also show related products by adding some code for the same to your theme. This code will find the collection that includes your current product and shows related products from the same collection. Eg, if you have a product in the “Pants” collection, it will show related products on the product page from the “Pants” collection too.
Here’s how you can add the code to your theme :
a. Login to your Shopify admin panel
b. Click on Online Store – Themes
c. Click on the Actions button on the theme that you want to add related products to and click on Edit code
d. Find the Templates directory and click on product.liquid
e. Find the following line of Liquid code :
{% section ‘product-template’ %}
f. Create a new line below it and add the following code :
{% section ‘related-products’ %}
g. Click on Save
h. In the Sections directory, click on Add a new section
i. Create the section and name it related-products
j. Click on Create section. The code editor will open up for the file
k. You will now have to paste some code in your related-products.liquid file. The code that you have to paste will vary according to your theme :
Boundless : For the Boundless theme, copy this code hosted on GitHub, and paste it into your related-products.liquid file.
Debut : For the Debut theme, copy this code hosted on GitHub, and paste it into your related-products.liquid file.
Jumpstart : For the Jumpstart theme, copy this code hosted on GitHub, and paste it into your related-products.liquid file.
Venture : For the Venture theme, copy this code hosted on GitHub, and paste it into your related-products.liquid file.
Other Themes : For any other free Shopify theme, copy this code hosted on GitHub, and paste it into your related-products.liquid file.
l. Click Save - In case you use the Boundless Theme, you will need to add some code in your product-grid-item.liquid
a. In the Snippets directory, click product-grid-item.liquid
b. Find the below code :
<span class=“product-item__price–sale”>{{ ‘products.general.now_price_html’ | t: price: price }}</span>
c. Replace it with the below code
<span class=“product-item__price–sale”><span class=“txt–emphasis”>now</span> <span class=“js-price”>{{ product.price | money_without_trailing_zeros }}</span>
d. Click on Save - Enable the related products section : No matter which theme from the above you made changes to, you now need to enable the related products section
a. Open the Customize theme page on your Shopify admin panel and go to a product page by clicking on any product in the theme preview
b. In the theme editor on the left-hand side, you will see a Related products tab. Click on it to view its settings.
c. Click on the Show related products checkbox
d. Click on Save
