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
- Create a new
product-recommendations.liquidsection, 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.