Recommended Apps

"How to Show the Product Recommendations on the Product Page?"

Warning

Shopify does not support this advanced tutorial. It requires familiarity with web design languages like HTML, CSS, JavaScript, and Liquid. If you require assistance, consider hiring a Shopify expert.

Attention

The Theme Store doesn't offer Vintage themes. These themes lack the features included in Shopify's Online Store 2.0 themes. Moreover, free Vintage themes offered by Shopify only receive updates related to security fixes.

Important Information

Please be aware that this customization guide refers specifically to vintage Shopify themes, not Online Store 2.0 themes.

This guide explains the process of integrating product recommendations on your Debut theme product page. Find more information about the functioning of product recommendations by visiting How to Display Product Recommendations on Product Pages.

Product Recommendations In Recent Shopify Themes

The most recent updates to Shopify themes now automatically include product recommendations. Here’s the list of those themes:

  • Boundless
  • Brooklyn
  • Debut
  • Minimal
  • Narrative
  • Simple
  • Venture

Consequently, if you're utilizing an older version of any of the listed themes, updating your theme will enable you to display product recommendations without the need for customizing the theme's code. "How to update your theme" provides a comprehensive guide on how to do this.

Step 1: Create a product-recommendations.liquid section

For Desktop

  1. From the Shopify admin, follow the path Online Store > Themes.

  2. Look for the theme that you wish to edit, click the ... button to explore the actions menu, and click Edit code.

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

  4. Give a name to the new section product-recommendations and click on Create section.

  5. Replace the whole content with the code given below:


For iPhone

  1. In the Shopify app, click Store.

  2. From the Sales channels section, click on Online Store.

  3. Choose Manage themes.

  4. Look for the theme that you wish to edit, click the ... button to go to the actions menu, and then click  on Edit code.

  5. From the Sections directory, click Add a new section.

  6. Give a name to the new section product-recommendations and click Create section.

  7. Replace the whole of the content with the code given below:

  1. From the Shopify app, click on Store.

  2. From the Sales channels section, tap Online Store.

  3. Tap on Manage themes.

  4. Choose the theme you wish to edit, click the ... button to go to the actions menu, and then select Edit code.

  5. From the Sections directory, click Add a new section.

  6. Name the new section product-recommendations and click on Create section.

  7. Replace the whole content with the code that is given below:

Code
{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.performed %}
    {% if recommendations.products_count > 0 %}
      <div class="section-header text-center">
        {% if recommendations.intent = 'related' %}
          <h2> You may also like</h2>
        {% elsif recommendations.intent = 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}    
      </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>
Click on the "Save" button.

When the section renders with the product page, recommendations.performed will be false and thus the generated HTML will display a loading animation:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations" data-intent="related">
  <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>

To avoid showing a loading animation, implement the following code:

{% assign limit = 4 %}
<div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations" data-intent="related">
  {% if recommendations.products_count > 0 %}
    <div class="section-header text-center">
      {% if recommendations.intent = 'related' %}
          <h2> You may also like</h2>
      {% elsif recommendations.intent = 'complementary' %}
          <h2>Pair it with</h2>
        {% endif %}
    </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 renders with the product page, the generated HTML will become a div element that has no content:

<div class="page-width product-recommendations" data-base-url="/recommendations/products" data-product-id="123" data-limit="4" data-section-id="product-recommendations" data-section-type="product-recommendations"  data-intent="related">

If the user uses an alternate locale, then the locale is included in the div's data-base-url. For example, /fr/recommendations/products.

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

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

  1. Open the product.liquid file in the Templates directory.

  2. Insert the following code at the end of the file:

{% section 'product-recommendations' %}
Click on the "Save" button.

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

One can load recommendations into the empty container that the section has produced on the product page. Use JavaScript to make an HTTP GET request to <base_url>?section_id=<section_id>&product_id=<product_id>.

  1. Open the theme.js file in the Assets directory.

  2. Search for the following line of code:

sections.register('hero-section', theme.HeroSection);
1. Add the following code below that line:
sections.register('product-recommendations', theme.ProductRecommendations);
Insert the following code at the end of the file:
theme.ProductRecommendations = (function() {
  function ProductRecommendations(container) {
    var $container = (this.$container = $(container));
    var baseUrl = $container.data('baseUrl');
    var productId = $container.data('productId');
    var limit = $container.data('limit');
    var intent = $container.data('intent');
    var productRecommendationsUrlAndContainerClass = baseUrl + '?section_id=product-recommendations&limit=' + limit +
      '&product_id=' + productId + '&intent='+ intent +
      ' .product-recommendations';
    $container.parent().load(productRecommendationsUrlAndContainerClass);
  }
  return ProductRecommendations;
})();
Ensure to click on the "Save" button.

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

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

  1. Open the theme.scss.liquid file in the Assets directory.

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

.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: 0.5s;
  }
  &:nth-child(3) {
    animation-delay: 1s;
  }
}
@keyframes dot-keyframes {
  0% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2, 1.2);
  }
  100% {
    opacity: 0.4;
    transform: scale(1, 1);
  }
}
Click on the "Save" button.

Today's top shopify apps

Product Reviews

Product Reviews

3.6 1,841 Reviews
eBay

eBay

3.1 986 Reviews
Bold Quantity Breaks

Bold Quantity Breaks

4.6 851 Reviews
Amazon by Codisto

Amazon by Codisto

4.8 761 Reviews
SMART Express

SMART Express

4.8 351 Reviews

Let us cover your success story

  • Are you running a successful ecommerce store?
  • Are you providing ecommerce services?
We would like to write your story and share to the world.
Contact us