Or go to our Shopify Theme Detector directly
How To Show Related Products On Shopify
Last modified: October 28, 2023
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.
| # | Name | Image | |
|---|---|---|---|
|
Get a Free Custom Shopify Store | ||
| 1 |
|
Upsell Recommendations
|
|
| 2 |
|
Related Products - Upsell
|
|
| 3 |
|
Cross Sell Recommend Products
|
|
| 4 |
|
Vitals
|
|
| 5 |
|
Sales Rocket
|
|
| 6 |
|
Related Products & Blogs
|
|
| 7 |
|
Also Bought • Cross Sell
|
|
| 8 |
|
Image Based Related Products
|
|
| 9 |
|
Related Products ‑ Relatify
|
|
| 10 |
|
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 }}
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.
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.
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.
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
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.
PageFly Landing Page Builder 
Shopify 
SEMrush 
Website Maintenance 
UpPromote