All Tutorials

Showing product recommendations with the Product Recommendations API products response

All Tutorials

Showing product recommendations with the Product Recommendations API products response

Showing product recommendations with the Product Recommendations API products response

This tutorial describes a method of showing product recommendations that uses JavaScript to decide all of the HTML rendered on the page. If you would prefer a method where you the product recommendations HTML directly in a theme file, see the tutorial Showing product recommendations with the Product Recommendations API section 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.

Create product cards

This method creates the recommended product cards using JavaScript. Any visual adjustments to how product cards are displayed needs to be done by adding your own additional HTML or CSS afterwards.

  1. Open your product.liquid template file. This can be found in the Templates folder.

  2. Add the following HTML container where you want to display the recommended products:

<div class="product-recommendations__list" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}"></div>
  1. Click Save.

  2. Paste the following JavaScript code into the proper place in your theme:

  // Find the container that will hold the recommendations
  var list = document.querySelector(".product-recommendations__list");
  // Get the base URL for translated product recommendations
  var baseUrl = list.dataset.baseUrl;
  // Get the product ID to request the product recommendations
  var productId = list.dataset.productId;
  // Create an AJAX request
  var request = new XMLHttpRequest();

  request.open(
    "GET",
    baseUrl + ".json?product_id=" + productId + "&limit=4"
  );

  request.onload = function() {
    if (request.status === 404 || request.status === 422) {
      return hideRecommendationsSection();
    }

    var products = JSON.parse(request.response).products;

    if (products.length === 0) {
      return hideRecommendationsSection();
    }

    // Append product recommendations to the DOM.
    list.innerHTML = products.map(function(product) { return renderProduct(product) }).join("");
  };

  request.onerror = function() {
    hideRecommendationsSection();
  };

  // Send AJAX request
  request.send();

  function hideRecommendationsSection() {
    list.style.display = "none";
  }

  function renderProduct(product) {
    return [
      '<div>',
        '<a href="' + product.url + '" class="product__anchor">',
          '<img class="product__img" src="' + product.featured_image + '" alt="'+ product.title +'"/>',
          '<p class="product__title">' + product.title + '</p>',
          '<p class="product__price">' + formatMoney(product.price, window.moneyFormat) + '</p>',
        '</a>',
      '</div>'
    ].join("");
  }
  1. Add the currency formatting function to your theme.

Update the currency format

The price property for each recommended product in the JSON response is given in cents. To display the price with the correct currency symbol and decimal places, follow these steps.

Step 1: Get the currency formatting function

The way to do this depends on how you manage your JavaScript modules:

  • If you use NPM or Yarn to manage your JavaScript modules, then install the @shopify/theme-currency npm package. Install using Yarn by running yarn add @shopify/theme-currency, or install using NPM by running npm i @shopify/theme-currency.

  • If you don’t use NPM or Yarn, then copy this code from the Shopify Github repository and paste it in the file where you render the recommended products.

Step 2: Output the currency format from liquid

Add code to the theme.liquid file to format the currency with the proper symbols and decimals:

  1. In the Layout directory, open the theme.liquid file.
  2. Add the following code:

    <script>
      window.moneyFormat = {{ shop.money_format | json }};
    </script>
  3. Click Save.

The window.moneyFormat variable used in your JavaScript snippet of Create product cards is now set.