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 recommendations object 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 recommendations object 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

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Create a new product-recommendations.liquid section, and replace all of its content with the code below:

    Add this code as well, which uses the {% javascript %} section tag:

    When the section is rendered with the page, recommendations.products_count is 0 and so the generated HTML is an empty div element

    The JavaScript then loads the section at /recommendations/products?section_id=product-recommendations&limit=5&product_id=123456789. Since that endpoint returns a value for recommendations.products_count that 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:

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

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *