July 24, 2024

How To Add Recommended Products to Your Shopify Store

Arrow pointing left
back to blog

about

Providing product recommendations helps shoppers discover items they might otherwise miss, increasing their likelihood of making additional purchases. Studies show that recommendations can account for a significant portion of revenue, so setting up personalized suggestions is essential for boosting average order value and overall sales.

the author

Ryan Shaw
Director of Growth

share this post

Just because someone lands on your site doesn’t mean they know exactly what they’re looking for. And even if they do have a specific product in mind, there still might be other items in your catalog they may be interested in that they’re not even aware of. 

This is why you absolutely must provide product recommendations. Once visitors are aware of more items that match their needs and preferences, they will begin to place orders that they otherwise wouldn’t have.

Indeed, a recent study of 300 ecommerce companies found that product recommendations account for a whopping 31% of revenue on average. Don’t leave money on the table — this guide will show you how to set up a recommended products section in Shopify, which very well may lead to an increase in your average order value and overall revenue. 

Design unique product experiences with ShogunUse Shogun’s visual editor to add recommended products and other design elements to create a more engaging shopping experience.Get started now

Themes that Support Product Recommendations

Many Shopify themes offer a feature for product recommendations — you can find out whether your theme offers this or not in Shopify’s built-in theme editor. For example, if you wanted to add recommended products to a store using Shopify’s default Dawn theme:

Step 1. Log into Shopify and select the sales channel you want to customize in the left sidebar of the main dashboard.

Log into Shopify and select the sales channel you want to customize in the left sidebar of the main dashboard. 

Step 2. Click on the “Customize” button next to your theme to open up Shopify’s theme editor.

Click on the “Customize” button next to your theme to open up Shopify’s theme editor.

Step 3. Each theme provides you with a series of page templates for building your storefront, and any given feature may be included on some templates but not others. For example, Dawn’s homepage template doesn’t offer a recommended products feature, but you can use the dropdown menu located near the top of the screen to navigate to the theme’s default product page template.

Use the dropdown menu located near the top of the screen to navigate to the theme’s default product page template.

In the default product page template, you’ll find two ways to offer product recommendations: complementary products and related products. 

Complementary Products

Complementary products are products that are often purchased in addition to a product. For example, complementary products for a guitar may include picks, strings, and straps.

In the left sidebar of the theme editor, which breaks down the structure of the page, you’ll find that there is already an option for “Complementary products”. 

In the left sidebar of the theme editor, you’ll find that there is already an option for “Complementary products”. 

You can use Shopify’s free Search & Discovery app to select which complementary products are displayed for each of your product pages, if any. Also, in the theme editor, you can customize options such as the heading text, the icon displayed next to the heading when this section is collapsed, and the maximum number of complementary products that can be displayed.

Shopify’s theme editor offers a variety of options for customizing your complementary products section.

Related Products

Related products are products that are similar to another product. For example, related products for a guitar may include ukuleles, banjos, and mandolins. 

As with complementary products, you will see that a section for “Related products” is already included in the left sidebar of the theme editor for this template.

A section for “Related products” is already included in the left sidebar of the theme editor for this template.

There are several customization options for this section as well. 

There are several customization options for the “Related products” section. 

One key difference between the complementary products and related products sections is that you will need to pick your complementary products manually with the Search & Discovery app, while Shopify will automatically determine which related products to display based on purchase history, product descriptions, and related collections. 

Adding a Recommended Products Section Using Shopify Liquid

For more customization options, you could code this section yourself with Shopify Liquid instead of using your theme’s pre-built options. 

To see how this works, check out the code example below (this example is for the latest version of the Dawn theme; some adjustments may be needed if you use another theme or another version of Dawn).

Step 1. Select the “Settings” option in the left sidebar of the main Shopify dashboard. 

Select the “Settings” option in the left sidebar of the main Shopify dashboard. 

Step 2. Scroll down and select “Custom data”.

Scroll down and select “Custom data”.

Step 3. Select “Products”.

Select “Products”.

Step 4. Select “Add definition”.

Select “Add definition”.

Step 5. Enter “Custom Recommended Products” into the “Name” field and “custom.related_products” into the “Namespace and key” field. Set the “Type” to “Product” and select the “List of products” option. Then, save your changes.

Save your changes.

Step 6. The next step is to edit your theme code, so go back to the main Shopify dashboard and select the sales channel you want to customize. Open the “…” menu next to your theme and select “Edit code”. 

Open the “...” menu next to your theme and select “Edit code”. 

Step 7. Go to the “Sections” folder and open the “main-product.liquid” file (you can also use the search bar to find this file). 

Go to the “Sections” folder and open the “main-product.liquid” file.

Step 8. Search for this phrase: “blocks”: [

Below the line containing this phrase, add the following code:

{
  "type": "related_products",
  "name": "Custom Related Products",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Recommended Products"
    },
	{
      "type": "number",
      "id": "heading_font_size",
      "label": "Heading font size (px)",
      "default": 18
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#121212"
    }
  ]
},

In the same file, search for the following phrase: {%- case block.type -%}

Below the line containing this phrase, add the following code: 

{%- when 'related_products' -%}
  {% if product.metafields.custom.related_products %}
    {% assign relatedProducts = product.metafields.custom.related_products.value %}
    <!-- check at least one recommended product is available --> 
    {%- liquid 
      assign has1product = false
      for prod in relatedProducts
        if prod.available == true
          assign has1product = true
        endif
      endfor
    -%}
    {% if has1product %}
      <p class="related-products-heading" style="font-size: {{block.settings.heading_font_size}}px; color: {{block.settings.heading_color}};">{{ block.settings.heading }}</p>
      <div class="related-products" id="related-products-{{ block.id }}">
        {% for prod in relatedProducts %}
          {% if prod.available == true %}
            <a href="{{ prod.url }}" class="related-product" aria-label="{{prod.title}}" title="{{ prod.title }}">
              <img class="related-product__image" src="{{ prod.images[0] | img_url: '500x' }}" alt="{{ prod.title }}">
            </a>
          {% endif %}
        {% endfor %}
      </div>
      <style>
        #related-products-{{ block.id }} {
          text-align: left;
          display: flex;
          flex-wrap: wrap;
        }
        #related-products-{{ block.id }} .related-product {
          display: inline-block;
          width: calc(25% - 0.4rem);
          margin: 0px 0.4rem 0.8rem 0px;
          position: relative;
          border: 1px solid transparent;
          text-align: center;
        }
        #related-products-{{ block.id }} .related-product:last-child {
          margin-right: 0;
        }
        #related-products-{{ block.id }} .related-product__image {
          width: 100%;
          max-width: 100%;
          height: 100%;
          object-fit: cover;
        }
        #related-products-{{ block.id }} .related-product:hover {
          border-color: {{ block.settings.hover_border_color }};
        }
      </style>
    {% endif %}
  {% endif %}

Save your changes.

Save your changes.

Now, when you open the default product page template in Shopify’s theme editor, you will see an option for adding the “Custom Related Products” block you just created onto the page.

In Shopify’s theme editor, you will now see an option for adding the “Custom Related Products” block you just created onto the page.

And to select which products are displayed in this section, simply navigate to the settings for a product and adjust the “Custom Recommended Products” metafield (which was created in the first few steps of this process) as needed.

To select which products are displayed in this section, simply navigate to the settings for a product and adjust the “Custom Recommended Products” metafield as needed.

The recommended products will then be displayed on the live version of your site. 

The recommended products will then be displayed on the live version of your site. 

Adding Recommended Products Using Shogun

The main benefit of custom-coding your recommended products section is that it gives you the freedom to adjust the styling and functionality of the section however you want. 

Another option is to use Shogun to add a recommended products section to your Shopify store — Shogun’s user-friendly visual editor allows you to fully customize your content to create immersive product page experiences. In addition to recommended products, Shogun’s visual editor allows you to easily add tabs, accordion menus, product image sliders, and anything else that you need to create highly converting product pages. 

There are three ways to add a recommended products section to your Shopify store with Shogun: theme sections, the Product Box element, and the Collections element.  

Theme sections allow you to import a chunk of content that you created with Shogun’s visual editor into Shopify’s built-in theme editor. This is an excellent option for when you want to build a universal section that recommends the same products to everyone regardless of which page they’re on. 

Theme sections allow you to import a chunk of content that you created with Shogun’s visual editor into Shopify’s built-in theme editor. 

When you’re editing an individual product page in Shogun, you can use the Product Box element to quickly set up a section for recommending a product. The Product Box element will save you time by pulling product information (name, price, image, etc.) directly from your Shopify catalog, and you can then adjust the styling of the Product Box however you want. 

The Product Box element will save you time by pulling product information directly from your Shopify catalog.

The Collection element is similar to the Product Box element, except it pulls data from an entire collection in your Shopify catalog rather than just one product — this is ideal for when you want to recommend multiple products on the same page. 

The Collection element is ideal for when you want to recommend multiple products.

It should also be noted that Shogun offers powerful personalization tools, allowing you to recommend different products to different visitors depending on their geolocation, order history, and a variety of other factors. With Shogun, you have everything you need to provide each customer with an exceptional ecommerce experience.

Design unique product experiences with ShogunUse Shogun’s visual editor to add recommended products and other design elements to create a more engaging shopping experience.Get started now

You might also enjoy

Get started for free

Get hands on with everything you need to grow your business with a comprehensive suite of tools.
Start now
Arrow pointing up and to the right Arrow pointing up and to the right