How to show product recommendations on the product page using Liquid
You can add a section to your product pages that displays an automatically-generated list of product recommendations. Displaying recommended products to customers makes it easier for them to discover new products, and can help to increase online store sales.
This tutorial describes how to add product recommendations to the product page by using the Liquid recommendations object.
The
recommendationsobject provides product recommendations that are related to a given product, based on data from sales, product descriptions, and relations between products and collections. Product recommendations become more accurate over time as new orders and product data become available.The
recommendationsobject has the following attributes:
- recommendations.performed
- recommendations.products_count
- recommendations.products
To learn more about Liquid recommendations object, read the article.
Step 1: Create a product-recommendations.liquid section
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- Create a new product-recommendations.liquid section, and replace all of its content with the code below:12345678910111213141516<div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="4">{%- if recommendations.products_count > 0 -%}<h1>You may also like</h1><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>{%- endif -%}</div>
Add this code as well, which uses the
{% javascript %}section tag:12345678910111213141516171819202122232425{% javascript %}var loadProductRecommendationsIntoSection = function() {var productRecommendationsSection = document.querySelector(".product-recommendations");if (productRecommendationsSection === null) { return; }var productId = productRecommendationsSection.dataset.productId;var limit = productRecommendationsSection.dataset.limit;var requestUrl = "/recommendations/products?section_id=product-recommendations&limit="+limit+"&product_id="+productId;var request = new XMLHttpRequest();request.open("GET", requestUrl);request.onload = function() {if (request.status >= 200 && request.status < 300) {var container = document.createElement("div");container.innerHTML = request.response;productRecommendationsSection.parentElement.innerHTML = container.querySelector(".product-recommendations").innerHTML;}};request.send();};document.addEventListener("shopify:section:load", function(event) {if (event.detail.sectionId === "product-recommendations") {loadProductRecommendationsIntoSection();}});loadProductRecommendationsIntoSection();{% endjavascript %}When the section is rendered with the page,
recommendations.products_countis0and so the generated HTML is an emptydivelement12<div class="product-recommendations" data-product-id="123456789" data-limit="5"></div>The JavaScript then loads the section at
/recommendations/products?section_id=product-recommendations&limit=5&product_id=123456789. Since that endpoint returns a value forrecommendations.products_countthat isn’t 0, the HTML for the recommendations is present in the response. The JavaScript takes that HTML and loads it into the empty container on the page.
Note: If you are implementing product recommendations in a theme meant for publication in the Theme Store, you must include a
{% schema %}to surface the section in the theme settings. The section’s theme settings should at least include the ability to turn the section on and off, and edit its heading.
Step 2: Include the section in your product.liquid template
To display product recommendations at the bottom of the product page, include the section at the bottom of your templates/product.liquid file:
1 | {% section 'product-recommendations' %} |
Products are recommended based on an algorithm that predicts the most relevant products based on the product a customer is interacting with. Here’s an example template of how recommended products could appear on a product page:
Source: Shopify
Thanks for the useful post. How would I show product recommendations on a sold out product?
{%- if recommendations.products_count > 0 -%} — should it be =0? or >-1?
No, this is the code for you:
{%- if recommendations.products_count > 0 and product.available==false -%}This code is giving me vertical Product recommendation..Not horizontal..Is there any way i can make it horizontal?