How to Add Related Products in Shopify Debut Theme



Adding related products to your Shopify store is not as difficult as it seems. Below we’ll cover how to add related products to the debut theme, why related products are important, and 3 related product Shopify apps.

1, Why Add Related Products in Shopify

Adding related products is a tried and tested method to increase sales, it is reported by forrester research that when done right, it can increase sales by 10% - 30%.

“Sometimes your customers don’t know that a better product is available, or they may be convinced that a different product may be a better fit for their needs.”
- Source: Kevy

With the above statement in mind, let’s imagine your store sells DIY products, and more importantly, you have a visitor currently browsing hammers.

When a visitor lands on a “hammer” product page, this is your golden opportunity to cross-sell, or even upsell!

Choose wisely, but you should display a combination of:

  • A better hammer
  • A bundle: hammer + nails
  • Most popular hammer

As we’ve stated above, this is a tried and tested method, but it can fail! Especially if your store is lacking quality product shots, poor design, and zero authority.

We’ve handpicked our best blog posts to ensure your get the most out of your store:

If you’re still building a Shopify store using the debut theme, ensure you’ve mapped the customer journey - The goal is to get the visitor to the money page as quickly as possible, and as seamlessly as possible, whilst providing a great customer experience.

You don’t have to do this alone, you can acquire talent on upwork for very affordable fees.

Upwork Upwork

Outside of outsourcing tasks, simply purchase a theme from ThemeForest where every aspect has been catered for.

ThemeForest ThemeForest

2, How to Add Related Products to Product Pages

Step 1: Login

Navigate to your admin login page and log in.

Shopify Login


Step 2: Online Store

Navigate to the left side panel, scroll to the online store button and click

Shopify online store button


Step 3: Click "Actions"

When clicking the online store button, click the "actions" button above the active theme.

Shopify theme actions


Step 4: Click "Edit Code"

After clicking actions, a dropdown will appear with multiple options - click "Edit code"

Shopify edit code button


Step 5: Locate "product.liquid"

After clicking edit code, you'll land on a page with many code files. Under templates find and click the "product.liquid" code file

Shopify product.liquid code file


Step 6: product.liquid Code

find the line of code: "{% section 'product-template' %}", this is usually found at the the top of the code file.

product.liquid


Step 7: Edit product.liquid Code

Once you've found the line {% section 'product-template' %} from the previous step. Add {% section 'related-products' %} BELOW.

Don't forget to click save!

Edit product.liquid Code


Step 8: Click "Add a new section"

On the same page (not code file), find and click "Add a new section" - this is under the sections folder .

Shopify Add a new section button


Step 9: Add "related-products"

Add "related-products" to the textbox and click create.

Shopify create section


Step 10: Related Product Section Code

Delete the default code in the file! Go here: Related product code - copy the code and then paste into the section file you've just created.

Always backup your Shopify theme before making any changes: How to duplicate a Shopify theme

Don't forget to click save!

Shopify related product code


Step 11: Online Store / Themes

Now go back to the online store > themes page and click "Customize"

Shopify customize button


Step 12: Select The Product Template

Inside the theme editor, click the dropdown > then products > and finally the product template

Shopify product template


Step 13: Related Products Section

If you've completed the previous steps correctly, you should now see a new section "related products" - click it.

Shopify related products section in theme editor


Step 14: Enabling Related Products

After clicking the related products section, you should see a checkbox "Show related products" - click to enable .

Don't forget to click save!

Shopify show related products checkbox


Step 15: Sanity Check

Before we get too excited, you must perform a sanity check! Go to your product page to confirm all is working.

If you see a related product, go celebrate! You've just added related products the hard way. Below you'll find apps that makes the process easier.

Successfully added Shopify related products


3, Related Product Shopify apps

You may decide that adding related products through the debut theme is not quite what you expected, and you need more functionality.

This is where you really should search through the Shopify app store to find an app that meets your expectations.

Below is a list of related product apps, that goes a little further in functionality - from templates, to also-bought, and finally to bought-together (product bundles).



The Takeaway

Adding related products is a must and not a “nice to have” - seize every opportunity to make a sale, BUT not at the expense of a visitor. You must still provide a seamless and pleasant experience for visitors, and customers alike.

To summarize we've briefly covered:

  • Why add related products in Shopify
  • How to add related products to product pages
  • Included 3 related product shopify apps

What next:





Author

avatar author

Terry Wingfield

A techy at heart, with over 10+ years of software engineering skills, and 5+ years experience in ecommerce, retention, and personalization.