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.
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.
Step 2. 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.
In the default product page template, you’ll find two ways to offer product recommendations: complementary products and related 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”.
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.
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.
There are several customization options for this section as well.
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.
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.
Step 2. Scroll down and select “Custom data”.
Step 3. Select “Products”.
Step 4. 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.
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”.
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).
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.
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.
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.
The recommended products will then be displayed on the live version of your site.
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.
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 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.
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.