Spy on Your Competitors - Extended Free Trial!  GO!
How To Show Related Products On Shopify

How To Show Related Products On Shopify

Last modified: December 2, 2021

FAQ
Shopify Trial

One of the most important activities you should do on your website is to increase order values. This is done through upselling and cross selling your products. One of the best ways to achieve this is to add related products to product pages through certain apps found in the store or through the addition of particular web design languages.

Recommended: The Top 10 Shopify Related Products Apps

# Name Image
Shopify
Shopify
More Info
1
Upsell Recommendations
Upsell Recommendations
More Info
2
Related Products - Upsell
Related Products - Upsell
More Info
3
Cross Sell Recommend Products
Cross Sell Recommend Products
More Info
4
Vitals
Vitals
More Info
5
Sales Rocket
Sales Rocket
More Info
6
Related Products & Blogs
Related Products & Blogs
More Info
7
Smart Related Products
Smart Related Products
More Info
8
Also Bought • Cross Sell
Also Bought • Cross Sell
More Info
9
Image Based Related Products
Image Based Related Products
More Info
10
Related Products ‑ Relatify
Related Products ‑ Relatify
More Info
Show More
Click here for more information about The Top 10 Shopify Related Products Apps.

Adding Code To Your Theme

Step 1: Log In

Log in to your Shopify website with your user credentials.

Step 2: Go To Your Themes Page

Click on the ‘Themes’ option and then click on the ‘Actions’ button on the right theme and find the ‘Edit code’ option.

Step 3: Find The Right Template

Find the product.liquid file in the Templates directory. Click to go inside and find the following line of code.

{% section ‘product-template’ %}

Step 4: Add New Code

Underneath the code found in step 3, create this code:

{% section ‘related-products’ %}

Step 5: Save

Save your changes.

Step 6: Sections Directory

In the sections directory, select ‘Add a new section’. When you create the section, name it ‘related-products’.

Step 7: Create

Click on the ‘Create’ section. The code editor will open up, ready for you to enter in the code. In this you will need to paste some code into your related-products.liquid file. The actual code will depend on your theme. Find yours from the list below:

Step 8: Save

Now save your work.

Step 9: Boundless Only

If you are using the Boundless Theme, find the product-grid-item.liquid snippet file and replace this code:

{{ ‘products.general.now_price_html’ | t: price: price }}

with

now {{ product.price | money_without_trailing_zeros }}

Ensure that you save the file.

Step 10: Enable Related Products Section

Open the ‘customise theme page’ option in the Shopify dashboard. Then go to a product page by clicking on any product when you’re inside the theme preview.

Within the theme editor, you should see the Related products tab in the left-hand side options. Click on the Related products tab and click on the ‘show related products’ checkbox.

Step 11:  Save

Click on the save option.

Alternatively to this, you can use apps to showcase the best products. Some of the best apps are those that look familiar to how Amazon shows related products with the “frequently bought together” apps.

Recap:
Read More
Got Something To Say?

Your email address will not be published. Required fields are marked *

Free Trial