How To Show Related Products On Shopify [2024]
Shopify - 3 Day Free Trial - No cc Needed   Free Trial
Detect Shopify Theme

Or go to our Shopify Theme Detector directly

How To Show Related Products On Shopify

Last modified: May 7, 2024

How To Show Related Products On Shopify
Free 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.

Key Takeaways
Log in to your Shopify website and navigate to Themes, click Actions, then select Edit code.
Locate the product.liquid file and add the related products section code.
In the sections directory, create a new section named related products.

Recommended: 10 Best Shopify Related Products Apps – [2024]
# Name Image
Upsell Recommendations
Upsell Recommendations
Related Products - Upsell
Related Products - Upsell
Cross Sell Recommend Products
Cross Sell Recommend Products
Sales Rocket
Sales Rocket
Related Products & Blogs
Related Products & Blogs
Also Bought • Cross Sell
Also Bought • Cross Sell
Image Based Related Products
Image Based Related Products
Related Products ‑ Relatify
Related Products ‑ Relatify
Smart Related Products
Smart Related Products
Show More

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 }}


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.

Keep Reading

Enhancing Product Recommendations By Showing Related Products On Shopify

Understanding Related Products

Related products are those that align with a chosen product. By showcasing potential alternatives, customers can explore similar items they might be interested in.

Typically, these products are displayed in a section titled “You might also like” on the product page. You can also add recommended products to collections, sub-collections, and even the main menu for better visibility.

Recommendation Algorithm Insights

The recommendation algorithm predicts the most relevant products based on the product a customer views. The factors it considers vary per online store but generally include:

  • Purchase history: Items often bought together.
  • Product Description: Products with alike descriptions.
  • Related collections: Products from the same collections, excluding the general “all” and “front page” collections.

Recommendation Best Practices

To enhance the user experience, consider the following:

  • The algorithm links up to ten products with each item, ranked by relevance. Thus, it’s wise to limit recommendations to four products per product page, showcasing only the most pertinent suggestions.
  • Ensure you load the right image size for product displays.
  • As recommendations load asynchronously via JavaScript, consider adding an empty state or omitting the recommended products section. This placeholder is replaced with actual recommendations post-loading.
  • Use headers like “You might also like” to clarify the reason for displaying the suggested products.
  • Offer an email signup or newsletter subscription option to keep customers informed about new products and promotions.

Things to Consider When Showing Related Products on Shopify

Relevance to the Main Product

It’s essential to ensure that the related products displayed are genuinely relevant to the main product. Irrelevant suggestions can confuse customers and detract from the shopping experience.

Visual Appeal

The presentation of related products should be visually appealing. Clear images, concise product names, and consistent formatting can make a significant difference in enticing customers to explore further.

Price Point Consideration

When suggesting related products, consider the price point. Offering items in a similar price range can increase the likelihood of additional purchases.

Conversely, showcasing significantly higher-priced items might deter some customers.

Stock Availability

Ensure that the related products displayed are in stock. Displaying out-of-stock items can lead to customer frustration and missed sales opportunities.

Feedback and Analytics

Regularly review customer feedback and analyze shopping patterns. This data can offer insights into which related products are most effective and which might need adjustments.

Advantages of Showing Related Products on Shopify

Increased Sales

Displaying related products can lead to higher cart values. When customers see complementary items, they are often inclined to make additional purchases.

Enhanced Shopping Experience

By offering relevant product suggestions, customers can discover items they might have missed. This not only enhances their shopping experience but also positions the store as a helpful resource.

Reduced Bounce Rate

Related products can keep visitors engaged longer. When customers find more of what they’re interested in, they’re less likely to leave the site without making a purchase.

Effective Product Discovery

With thousands of products on some Shopify stores, related products act as a guide, helping customers navigate and discover new items they might love.

Builds Trust and Loyalty

By consistently offering relevant and valuable product suggestions, customers begin to trust the store’s recommendations, leading to repeat visits and increased loyalty.

Conclusion: How To Show Related Products On Shopify

Before setting up related products, it’s essential to have a well-organized Shopify store with properly categorized collections and subcategories. You can also create custom menus and change the display order of menu items to highlight related products better.

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.

  • Will showing related products slow down my website?

    If implemented correctly, related products should not significantly impact site speed. However, it’s essential to monitor performance and optimize images and scripts.

  • Can I set a maximum number of related products to display?

    Yes, most Shopify themes and apps allow store owners to set a limit on the number of related products displayed on a product page.

  • How are related products determined?

    Related products can be determined based on various factors, including product tags, collections, product type, or manual selection, depending on the method or app used.

Got Something To Say?

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