Showing product recommendations on the product page

This tutorial describes how to add product recommendations to your product page in the Debut theme. To learn more about how product recommendations work, see Showing product recommendations on product pages.

Step 1: Create a product-recommendations.liquid section

  1. In the Sections directory, click Add a new section.

  2. Name the new section product-recommendations and click Create section.

  3. Replace all of the content with the code below:

    {% assign heading = 'You may also like' %}
    {% assign limit = 4 %}
    <div class="page-width product-recommendations" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations">
      {% if recommendations.performed %}
        {% if recommendations.products_count > 0 %}
          <div class="section-header text-center">
            <h2>{{ heading }}</h2>
          </div>
          <ul class="grid grid--uniform grid--view-items">
            {% for product in recommendations.products %}
              <li class="grid__item small--one-half medium-up--one-quarter">
                {% include 'product-card-grid', max_height: 250 %}
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      {% else %}
        <div class="product-recommendations__loading-dots">
          <div class="product-recommendations__loading-dot"></div>
          <div class="product-recommendations__loading-dot"></div>
          <div class="product-recommendations__loading-dot"></div>
        </div>
      {% endif %}
    </div>
  4. Click Save.

When the section is rendered with the product page, recommendations.performed will be false and so the generated HTML will show a loading animation:

<div class="page-width product-recommendations" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations">
  <div class="product-recommendations__loading-dots">
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
    <div class="product-recommendations__loading-dot"></div>
  </div>
</div>

If you don't want to show a loading animation, use this code instead:

{% assign heading = 'You may also like' %}
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      <h2>{{ heading }}</h2>
    </div>
    <ul class="grid grid--uniform grid--view-items">
      {% for product in recommendations.products %}
        <li class="grid__item small--one-half medium-up--one-quarter">
          {% include 'product-card-grid', max_height: 250 %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

When the above section is rendered with your product page, the generated HTML will be a div element with no content:

<div class="page-width product-recommendations" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations">
</div>

Step 2: Include the section in your product.liquid template

To display product recommendations at the bottom of your product page, include the section at the bottom of your templates/product.liquid file:

  1. In the Templates directory, open the product.liquid file.

  2. Add the following code at the bottom of the file:

  {% section 'product-recommendations' %}
  1. Click Save.

Step 3: Edit your theme.js file to load the recommendations asynchronously

Now, you want to load recommendations into the empty container that the section produced on the product page. Using JavaScript, you need to make an HTTP GET request to /recommendations/products?section_id=<section_id>&product_id=<product_id>, where section_id is the id of the section, and product_id is the id of the product you want to show recommended products for.

  1. In the Assets directory, open the theme.js file.

  2. Find this line of code:

    sections.register('hero-section', theme.HeroSection);
  3. Below that line, add this code:

    sections.register('product-recommendations', theme.ProductRecommendations);
  4. Add the following code at the bottom of the file:

    theme.ProductRecommendations = (function() {
      function ProductRecommendations(container) {
        var $container = (this.$container = $(container));
        var productId = $container.data('productId');
        var limit = $container.data('limit');
        var productRecommendationsUrlAndContainerClass =
          '/recommendations/products?&section_id=product-recommendations&limit=' + limit + '&product_id=' + productId + ' .product-recommendations';
        $container.parent().load(productRecommendationsUrlAndContainerClass);
      }
      return ProductRecommendations;
    })();
  5. Click Save.

Step 4: Edit your theme.scss.liquid file to create the loading animation (optional)

If you used the snippet that shows a loading animation inside your product recommendations section, add the following code at the bottom of your assets/theme.scss.liquid file:

  1. In the Assets directory, open the theme.scss.liquid file.

  2. At the bottom of the file, add this code:

  .product-recommendations {
    padding-top: $section-spacing-small;
    padding-bottom: $section-spacing-small;

    @include media-query($medium-up) {
      padding-top: $section-spacing;
      padding-bottom: $section-spacing;
    }
  }
  .product-recommendations__loading-dots {
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-recommendations__loading-dot {
    animation: dot-keyframes 1.5s infinite ease-in-out;
    background-color: $color-text;
    border-radius: 10px;
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 0 3px;
    &:nth-child(2) {
      animation-delay: .5s;
    }
    &:nth-child(3) {
      animation-delay: 1s;
    }
  }
  @keyframes dot-keyframes {
    0% {
      opacity: .4;
      transform: scale(1, 1);
    }
    50% {
      opacity: 1;
      transform: scale(1.2, 1.2);
    }
    100% {
      opacity: .4;
      transform: scale(1, 1);
    }
  }
  1. Click Save.

Ready to start selling with Shopify?

Try it free