Unsupported Customization

Unsupported customizations fall outside the scope of our support service. This means that we’re not able to help you if you run into problems. The good news is that we’ve classified each tutorial according to its level of difficulty, to help you decide whether or not to attempt it on your own.

There’s also a growing community on our forums - you’ll often find friendly and helpful advice there. You could also consider reaching out to a Shopify Expert to assist you with some of the more advanced customizations.

Related Products

This article will go over four methods of recommending “related products” on the product page. We tend to use the terms "Related Products" and "Product Recommendations" interchangeably.

Of the four methods below, using an app is likely the easiest thing to do. The last three solutions involve more manual work on your part, and often require editing the code of your Theme.

Use an App to recommend products

Whether you have many products or just a few, using an app is the simplest way to recommend your products to visitors. There are several apps for product recommendations available here in the app store.

Find a relevant Collection to recommend products

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 the Edit HTML/CSS page.

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 Edit HTML/CSS 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 settings on the Customize theme page 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>

Use product tags to recommend products

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.

  1. Go to the Edit HTML/CSS page.

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

Use product metafields to recommend products

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.

  1. Go to the Edit HTML/CSS page.

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.

This customization is not supported by our Shopify Gurus. Learn more ›

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.