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

Sectioned and non-sectioned themes

Use 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.

Edit your theme code to recommend products

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.

To add the required code to your theme:

  1. Find the theme you want to edit, click Actions, and then click Edit code.

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

  3. Look for this line of Liquid code:

    {% section 'product-template' %}
    

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

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

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

    Add a new section
  6. Create the section:
    a. Name your new section related-products.
    b. Click Create section. Your new file will open in the code editor.
    c. Delete all of the default code in the new section file so that the file is empty.

  7. In this step, you will paste some code into your new related-products.liquid file. The code that you paste will depend on your theme:

    Boundless

    If you use Boundless, then copy this code hosted on GitHub, and paste it into your 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.

    Jumpstart

    If you use Jumpstart, 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.

  8. Click Save.

Additional edit for Boundless

If you use Boundless, then you will need to edit some code in your product-grid-item.liquid. If you do not use Boundless, then you can move on to enable the recommended products section.

To make the required edit for Boundless:

  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.

To enable the recommended products section:

  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.

Use 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.

Edit your theme code to recommend products

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.

To add the required code to your theme:

  1. Find the theme you want to edit, click Actions, and then click Edit code.

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

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

  4. In this step, you will paste some code into your new related-products.liquid file. The code that you paste will depend on your theme:

    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