Implementing a Cross-Sell Section with the Shopify Recommendations Object

A frequently requested feature on product pages is a “related products” section, which lists promo items relevant to the product. While many third-party apps offer this functionality, at Slicedbread, we first consider whether it can be built directly within the theme to avoid adding another app.

Although apps are essential to Shopify and provide valuable features, they can also increase costs and impact store performance. For cross-sell sections, Shopify’s built-in recommendations object offers an effective solution.

The full spec can be found at https://shopify.dev/docs/themes/liquid/reference/objects/recommendations.

Here is our standard product page

Product page for men's lime green hooded jacket.

Below this we want to add a new “related products” section so that we can automatically recommend other products to the customer.

This is the code you need:

{% if recommendations.performed %}
{%- if recommendations.products_count > 0 -%}
<div class="related-products">
<h2>Related products</h2>
<ul>
{%- for product in recommendations.products -%}
<li class="product">
<a href="{{ product.url }}">
<img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
<p class="product__title">{{ product.title }}</p>
<p class="product__price">{{ product.price | money}}</p>
</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- endif -%}

The recommendations object is central to this process and includes three key properties. The recommendations.products property lists all products related to the current product, as determined by Shopify’s algorithm. You do not need to manage these criteria, as Shopify handles them automatically.

The recommendations.product_count property returns the number of related products, which we use to display the related products section only when at least one related product exists.

The recommendations.performed property confirms that recommendations have been generated, ensuring the subsequent code runs only when necessary.

With that code added our product now generates the related products section that we want.