All Tutorials

Showing product recommendations with the Product Recommendations API section response

All Tutorials

Showing product recommendations with the Product Recommendations API section response

Showing product recommendations with the Product Recommendations API section response

This tutorial describes a method of showing product recommendations that uses the Liquid recommendations object. If you would prefer a method that uses a JSON object of recommended products in JavaScript, see the tutorial Showing product recommendations with the Product Recommendations API products response.

Regardless of the method you choose, showing product recommendations requires using the Product Recommendations API. To learn more about how product recommendations work, see Showing product recommendations on product pages.

For instructions specific to the Debut theme, see Showing product recommendations on the product page.

Step 1: Create a product-recommendations.liquid section

  1. Create a new product-recommendations.liquid section, and replace all of its content with the code below:
   <div
     class="product-recommendations"
     data-base-url="{{ routes.product_recommendations_url }}"
     data-product-id="{{ product.id }}"
     data-limit="4"
   >
     {%- if recommendations.products_count > 0 -%}
     <h2>You may also like</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>
     {%- endif -%}
   </div>

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

   {% javascript %}
   var loadProductRecommendationsIntoSection = function() {
     // Look for an element with class 'product-recommendations'
     var productRecommendationsSection = document.querySelector(".product-recommendations");
     if (productRecommendationsSection === null) { return; }
     // Read product id from data attribute
     var productId = productRecommendationsSection.dataset.productId;
     // Read base URL from data attribute
     var baseUrl = productRecommendationsSection.dataset.baseUrl;
     // Read limit from data attribute
     var limit = productRecommendationsSection.dataset.limit;
     // Build request URL
     var requestUrl = baseUrl + "?section_id=product-recommendations&product_id=" + productId + "&limit=" + limit;
     // Create request and submit it using Ajax
     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();
   };

  // Listen for changes done in the Theme Editor
   document.addEventListener("shopify:section:load", function(event) {
     if (event.detail.sectionId === "product-recommendations") {
       loadProductRecommendationsIntoSection();
     }
   });
   // Fetching the recommendations on page load
   loadProductRecommendationsIntoSection();
   {% endjavascript %}

When the section is first rendered with the page, recommendations.products_count will always be 0. Getting product recommendation results requires using the Product Recommendations API described in the nxt step. At this point, the generated HTML is an empty div element:

<div class="product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4"></div>

The JavaScript then loads the section at /recommendations/products?section_id=product-recommendations&limit=4&product_id=123. 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.

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:

{% section 'product-recommendations' %}

Theme editor considerations

If your section has theme settings, the theme editor reloads the section as you edit those settings. When that happens, the recommendations need to be fetched again. See Integration with the theme editor for more information.