Recommend related products to your customers

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

You can add a section to your product pages that recommends related products to your customers. This can help to boost sales, as it allows you to show your customers what kinds of similar products are available, increasing the likelihood that they'll find what they're looking for. You can recommend related products either by installing an app, or by performing a theme code customization.

Related products

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

Using an app to recommend products

The simplest way to recommend related products is to install a related products app. There are several apps for product recommendations available in the Shopify App Store.

Editing your theme code to recommend products in sectioned themes

With this solution, you need to add some code to your theme. This code finds the collection that includes your current product and shows related products from that collection. For example, if you have a product in the "Spring" collection, then product recommendations on that product page will list other products from the "Spring" collection.

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Sections directory, click Add a new section:

    Add new section

  3. Name your new section related-products. Click Create section. Your new file will open in the code editor, and it will be populated with default code. Delete the default code so that the file is empty.

  4. The next step is to paste some code into your new related-products.liquid file.

    Debut

    If you use Debut, then copy this code hosted on Github, and paste it into your related-products.liquid file.

    Venture

    If you use Venture, then copy this code hosted on Github, and paste it into your related-products.liquid file.

    Other Shopify themes

    If you use another free Shopify theme, then copy this code hosted on Github, and paste it into your related-products.liquid file.

  5. Click Save.

  6. In the Templates directory, click product.liquid.

  7. Look for this line of Liquid code:

    {% section 'product-template' %}
    

    Create a new line right below, and paste in the following code:

    {% section 'related-products' %}
    
  8. Click Save.

Boundless

If you use Boundless, then you will need to edit some code in your product-grid-item.liquid as well.

  1. In the Snippets directory, click product-grid-item.liquid.

  2. Find the following code:

    <span class="product-item__price--sale">{{ 'products.general.now_price_html' | t: price: price }}</span>
    

    Replace it with:

    <span class="product-item__price--sale"><span class="txt--emphasis">now</span> <span class="js-price">{{ product.price | money_without_trailing_zeros }}</span>
    
  3. Click Save.

You have now edited your theme code to support a recommended products section. You can enable and disable this section as needed. To have the section appear on your product page, you will need to enable it on the Customize theme page.

  1. Go to the Customize theme page and navigate to a product page by clicking on any product in the theme preview.

  2. In the theme editor panel on the left of the screen, you will see a Related products tab. Click it to view the settings for that section.

  3. Check the Show related products checkbox.

  4. Click Save.

Using an app to recommend products

The simplest way to recommend related products is to install a related products app. There are several apps for product recommendations available in the Shopify App Store.

Editing your theme code to recommend products in non-sectioned themes

With this solution, you need to add some code to your theme. This code finds the collection that includes your current product and shows related products from that collection. For example, if you have a product in the "Spring" collection, then product recommendations on that product page will list other products from the "Spring" collection.

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Snippets directory, click Add a new snippet:

    Related products 3

  3. Name your new snippet related-products. Click Create snippet. Your new file will open in the code editor.

  4. The next step is to paste some code into your new related-products.liquid file.

    Venture

    If you use Venture, then copy this code hosted on Github, and paste it into your related-products.liquid file.

    Other Shopify themes

    If you use another free Shopify theme, then copy this code hosted on Github, and paste it into your related-products.liquid file.

  5. Click Save.

  6. In the Templates directory, click product.liquid.

  7. At the very bottom of the file, paste the following Liquid code:

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

Want to discuss this page?

Visit the Shopify Community