How to Add Related Products to your Shopify Product Pages

November 23, 2019
by
Robert

How to Add Related Products to your Shopify Product Pages

November 23, 2019
by
Robert
Back to the blog
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

One of the best ways to upsell or cross-sell to customers is to display related products on your Shopify product pages. And it’s not just a “nice to have” feature on your e-commerce store, but a vital part of your sales process. In fact, according to Forrester Research (via kevy.co), “product recommendations are responsible for an average of 10-30% of ecommerce site revenues.”

In this guide, we'll show you how to add related products to your product pages in Shopify.

Edit any Shopify theme

How to add related products to your Shopify product pages

1. Locate the code to edit in your theme

To enable related products in Shopify, you’ll need to install a bit of code. Navigate to Online Store and then selection Edit Code from the drop down menu.

Locate the code to edit in your theme

On the next screen, under Templates, click on product.liquid which will bring up the code that you’ll be editing.

On the next screen, under Templates, click on product.liquid which will bring up the code that you’ll be editing

Once the code populates, search for the piece of code that looks like this:

{% section ‘product-template’ %}

You can search for it (using ctrl + f to bring up the find bar), but it will most likely be near the top of the code:

You can search for it (using ctrl + f to bring up the find bar), but it will most likely be near the top of the code

2. Paste in the necessary code

Now that you’ve located the section where you will add code, hit “enter” on your keyboard to create a blank line under the highlighted code above, and then paste in this bit of code:

{% section ‘related-products’ %}

This is the code that will enable Shopify related products to function on your product pages. Once you’ve pasted it in, it should look like this:

This is the code that will enable Shopify related products to function on your product pages

Click Save.

3. Add a new section for related products

Next, you’ll have to create a new section for what you just enabled. Scroll down to Sections and click Add a new section. At the prompt, name your new section “related-products”. Don’t forget that dash between the words.

At the prompt, name your new section “related-products”

Click Create section.

4. Add related-products code for the theme you’re using

Once you’ve created the section, a new tab will open called related-products.liquid that contains some default code.

Once you’ve created the section, a new tab will open called related-products.liquid that contains some default code

You will delete this default code and paste in code depending on what theme you’re using. For example, if you’re using Debut, here is the code (from GitHub) that you’ll want to paste in. Other code for other themes:

Boundless

Jumpstart

Venture

Other

After adding in the appropriate code, click Save.

Note: Depending on your theme, there may be additional code changes to ensure the new feature works. Consult with your Dev team as needed.

5. Enable related products on your Shopify front end

Finally, to enable Shopify related products on your actual online storefront, head back to Online Store in your admin and click Customize.

Finally, to enable Shopify related products on your actual online storefront, head back to Online Store in your admin and click Customize

On the next screen, use the drop down menu to select Product pages. You’ll see a related products button on the left hand navigation menu. Clicking on it will bring up a section where you will check the box for Show related products.

Clicking on it will bring up a section where you will check the box for Show related products

Click Save and you’ll all set! Now you will have related products showing on your Shopify product pages.

Keep in mind that the related products shown will be products in the same collection. Meaning, if a user is viewing “Fall” products, the related ones shown will also be in the “Fall collection.” As of this writing, this is a limit to what this Shopify feature can do; if you’d like to be more intelligent about showing similar products that cross categories, a Shopify app may be your best bet.

Further Customize Your Product Pages with Shogun

Displaying related products should help you make more sales, but there are many other things you could be doing to improve your product pages as well.

The Shogun page builder app gives you everything you need to create high-converting product pages. With pre-made blocks for add to cart buttons, image galleries, and customer reviews, you'll be able to give your visitors a clear call-to-action and provide them with convincing proof that your products are worth buying.

Edit any Shopify theme
Robert