Related Products

This article will go over five methods of adding “related products” on the product page.

Caution

This is an unsupported customization. Learn more here ›

We tend to use the terms "Related Products" and "Product Recommendations" interchangeably.

The diagram below will help you choose the right solution. Once you have made your pick, jump to the corresponding section.

#

    In this article:

  1. (App) Using Directed Edge Product Recommender
  2. (App) Using Recomatic
  3. Finding a relevant collection
  4. Using product tags
  5. Using product metafields

(App) Using Directed Edge Product Recommender

Check out the Directed Edge Product Recommender app for adding product recommendations to your product page.

The app is very easy to install. It can add product recommendations to your cart page as well, e.g. “People who bought this also bought…”. A powerful algorithm picks recommendations based on an analysis of:

  • Purchase histories

  • Your product tags

  • The way you have organized products into smart and custom collections

From the app's settings page:

#
  • You can also hand-pick your recommendations for each product from that product page in your admin.

  • The app also lets you buy two products in a bundle from a product page.

You can remove the Directed Edge branding — ie. the text “Recommendations by Directed Edge” — by adding the following CSS to your theme's stylesheet:

#expressrex-layout tr:last-child {
   display:none !important;
}

(App) Using Recomatic

The Recomatic app is another automatic recommendation app to consider. It recommends to your customers products they'll be interested in, based on what all of your past customers have viewed and bought. Like Directed Edge, it will add product recommendations to product pages and can also add them to the cart page. Unlike Directed Edge, the app does not let you hand-pick products, it works only in an entirely automatic mode. It has a free 14 day trial, so check it out!

Finding a relevant collection

With this solution, you need to add some code to your product.liquid template. That code will look for a collection in your shop that includes your current product and it will pull products from that collection. It won't pull products from your Catalog or Frontpage collection. It will look for a collection more refined in scope. For example, if you have a Women Shirts collection, and your product belongs to that collection, then product recommendations on that product page will list other products from the Women Shirts collection.

Once you have added the code to your theme, you are done: you don't need to worry about hand-picking recommendations, and you don't need to make any adjustment when you add new products.

1. Go to your Template Editor of the Themes section of the admin.

2. Create a new snippet called related-products

  • In the left-hand side pane, scroll down and left-click Snippets. Then, scroll further and click on the add a new snippet button:
#
  • Name your snippet "related-products". Shopify will add the .liquid extension, so you don't have to.

  • Click on related-products.liquid to open the snippet in the online code editor.

  • Copy the content of this gist: https://gist.github.com/1002801 into your snippet, and click save.

3. Include your snippet in product.liquid

Still on the Template Editor page in your shop admin, click on product.liquid under Templates to open the product template in the online code editor.

At the very bottom of your product.liquid file, add the following code:

 
{% include 'related-products' %}
 
  • Click Save.

4. Configuring (optional) and adding randomness

At the top of the snippet file, you'll find this:

{% assign number_of_related_products_to_show = 3 %}
{% assign image_size = 'compact' %}
{% assign heading = 'Other fine products' %}

By editing the above lines of code, you can change: heading text, number of product recommendations, and size of the recommended product image. Valid values for size are: 'small', 'compact' or 'medium'. How big are those sizes? Check here.

If you are a designer, and are thinking of integrating related products in a theme, consider creating theme settings to toggle recommendations on and off.

You can output all products from the relevant collection and pick a limited number of products randomly using this jQuery plugin: https://github.com/carolineschnapp/jquery-pick/blob/master/jquery.pick.js

If you do that, remove the limit from the related-products.liquid snippet.

Change this line:

{% for product in collection.products limit: number_of_related_products_to_fetch %}

To this:

{% for product in collection.products %}

Then, upload the file jquery.pick.js to your Theme Assets. (You will find that file here: https://github.com/carolineschnapp/jquery-pick/blob/master/jquery.pick.js)

Then, add the following code at the bottom of your related-products snippet:

{{ 'jquery.pick.js' | asset_url | script_tag }}
<script type="text/javascript" charset="utf-8">
//<![CDATA[
var howMany = {{ number_of_related_products_to_show }};
jQuery(function() {
  jQuery('.related-products > li').pick(howMany);
});
//]]>
</script>

Using product tags

If you already use product tags in your shop, skip this solution, it won't work for you.

Reminder

If you are not using product tags, here is how this hack works — and it's a hack, no doubt.

1. Use product tags to specify your product recommendations

  • You will add product tags to the products you wish to add recommendations to. If you want to recommend the product “Scoop Neck Cashmere Blend Tank” on the “V-Neck Tee” product page, then.... go to the product page of “V-Neck Tee” in your shop admin, and add the product tag “scoop-neck-cashmere-blend-tank”.

  • The product tag must be set to the exact handle of the recommended product. Not product title, but product handle.

  • You can add as many tags as you want, that is, you can add as many product recommendations as you wish to each product.

Information

Why the product handle and not its title? Two reasons: 1) This solution uses Ajax to get the products' details, and to “GET” a product with the JSON API we need its handle. 2) Two products can have the same title, but the product handle is always unique.

2. Go to your Template Editor of the Themes section of the admin.

3. Create a new snippet called related-products

  • In the left-hand side pane, scroll down and left-click Snippets. Then, scroll further and click on the add a new snippet button:
#
  • Name your snippet "related-products". Shopify will add the .liquid extension, so you don't have to.

  • Click on related-products.liquid to open the snippet in the online code editor.

  • In that snippet, paste this code: https://gist.github.com/1002949 and click save.

4. Include your snippet in product.liquid

At the very bottom of your product.liquid file, add the following code:

{% include 'related-products' %}

  • Click save.

5. Configuring (optional)

At the top of the snippet file, you'll find this:

{% assign image_size = 'compact' %}
{% assign heading = 'Other fine products' %}

By editing the above lines of code, you can change: heading text, number of product recommendations, and size of the recommended product image. Valid values for size are: 'small', 'compact' or 'medium'. How big are those sizes? Check here.

6. Related discussions

Related Products via Tags in the Solo theme

Using product metafields

This is perhaps less of a “hack” than the “related products by tags” solution, but it isn't for the faint-hearted.

You will need to install the Metafields Editor app. Click here to get it.

1. Adding one metafield per product

Add your product recommendations as one new metafield per product.

Use this:

  • Namespace: recommendations

  • Key: productHandles

  • Value: <place here a comma-separated list of product handles>

  • Value type: string

  • Description: <optional>

Reminder

Everything in the bulleted list above is case-sensitive

Example, you could add 2 product recommendations by their handles:

Product URL Product Handle
http://harvey-waelchi-and-cruickshank2055.myshopify.com/collections/sofas/products/classic-sofa classic-sofa
http://harvey-waelchi-and-cruickshank2055.myshopify.com/collections/sofas/products/new-wave-sofa new-wave-sofa

Information

The “handle” of a product is what Shopify uses to construct the URL to your product page.

Submit.

You are done for that product and can move on to adding product recommendations to another product.

Remember: you will use only one metafield per product for this.

2. Go to your Template Editor of the Themes section of the admin.

3. Create a new snippet called related-products

  • In the left-hand side pane, scroll down and left-click Snippets. Then, scroll further and click on the add a new snippet button:
#
  • Name your snippet "related-products". Shopify will add the .liquid extension, so you don't have to.

  • Click on related-products.liquid to open the snippet in the online code editor.

  • In that snippet, paste this code: https://gist.github.com/1003334 and click save.

4. Include your snippet in product.liquid

At the very bottom of your product.liquid file, add the following code:

{% include 'related-products' %}
  • Click save.

5. Configuring (optional)

At the top of the snippet file, you'll find this:

{% assign image_size = 'compact' %}
{% assign heading = 'Other fine products' %}

By editing the above lines of code, you can change: heading text, number of product recommendations, and size of the recommended product image. Valid values for size are: 'small', 'compact' or 'medium'. How big are those sizes? Check here.

Ready to put what you've learned into action?

Build an online store with Shopify Try it Free

Experience the future of retail now

Shopify Point of Sale Try it Free