by trangnq
July 19, 2021

Shopify recommended products: How to show it on the product page

If you are catching the problem of showing Shopify recommended products on the product page, you’ve been to the right place. Because in this blog, Arrowtheme will instruct you the simplest way to show them in the blink of an eye. Then, what are you waiting for without exploring it right now! 

What are Shopify recommended products?

Firstly, coming to Shopify recommended products, you must know that Shopify has introduced dynamic, automatically produced product recommendations, which can be activated as a section on your theme’s product pages. In fact, products are suggested using an algorithm that predicts the most relevant products depending on how a client interacts with the product. Moreover, the algorithm that created these products looked at sales data and product descriptions to come up with a list of products that were similar or frequently purchased together. Then, as additional orders and product data become available, the product recommendations increase over time. 

Shopify recommended products
Shopify recommended products

Moreover, Shopify recommended products will only be shown if the product is part of a Collection. However, in case the product isn’t part of a collection, no suggested products will appear.

How to show Shopify recommended products on the product page?

Firstly, if you want to apply the tutorials below, you must have the knowledge of web design languages including HTML, CSS, JavaScript, and Liquid. Besides, you should keep in mind that Shopify recommendation products are included by default in the current versions of the following Shopify themes:

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

However, with an older version of one of these themes, instead of modifying the code, you only can show product recommendations when you update it. Then, let’s refer to the great way to show Shopify recommended products right now! 

#Step 1: Build a product-recommendations.liquid section

With desktop

  1. Firstly, go to Online Store > Themes in your Shopify admin.
  2. Secondly, after you’ve found the theme you wish to change, go to Actions > Edit code.
  3. Then, click Add a new section in the Sections directory. 
  4. After that, click Create section and give the new section the name product-recommendations.
  5. Replace the entire content with the following code: 

{% assign heading = ‘You may also like’ %}

{% 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”>

  {% 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>

  1. Finally, click Save

Because recommendations.performed is false when the section is shown with the product page, the resultant HTML will display a loading animation like below:

<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”>

  <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>

In case you don’t want a loading animation be shown, let’s take advantage of the following code: 

{% assign heading = ‘You may also like’ %}

{% 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”>

  {% 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>

What’s more, the produced HTML for the above section with your product page will be a div element with 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”>

In addition, in case the user is utilizing a different locale, the locale is provided in the data-base-url of the div. /fr/recommendations/products, for example.

With iPhone/ Android 

1. Firstly, tap Store on the Shopify app.

2. Tap Online Store under the Sales channels section.

3. Then, select Manage themes

4. After you’ve found the theme you wish to change, go to Actions > Edit code.

5. Then, click Add a new section in the Sections directory.

6. Then, click Create section and give the new section the name product-recommendations.

7. After that, replace the entire content with the following code:

{% assign heading = ‘You may also like’ %}

{% 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”>

  {% 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>

Then, you should apply the steps the same as them with it on the desktop we instruct above.  

#Step 2: Contain the section in your product.liquid template – Shopify recommended products

Include the following section at the bottom of your templates/product.liquid file to display Shopify recommended products at the bottom of your product page:

  1. Firstly, open the product.liquid file in the Templates directory.
  2. At the bottom of the file, add the following code:

{% section ‘product-recommendations’ %}

  1. Then, click Save
How to show Shopify recommended products
Products recommendation

#Step 3: In order to load the recommendations asynchronously, edit your theme.js file – Shopify recommended products

After that, you must fill the empty container created by the section on the product page with recommendations. What’s more, is it possible to send an HTTP GET request to <base_url>?section_id=<section_id>&product_id=<product_id>.

1. Firstly, you must open the theme.js file in the Assets directory.

2. Then, let’s look for the following line of code to know how to load the recommendations asynchronously:

sections.register(‘hero-section’, theme.HeroSection);

3. Add the following code below that line:

sections.register(‘product-recommendations’, theme.ProductRecommendations);

4. After that, at the bottom of the file, you have to add the code like below:

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 productRecommendationsUrlAndContainerClass = baseUrl + ‘?section_id=product-recommendations&limit=’ + limit +

      ‘&product_id=’ +productId +

      ‘ .product-recommendations’;

    $container.parent().load(productRecommendationsUrlAndContainerClass);

  }

  return ProductRecommendations;

})();

5. Finally, click Save is done. 

#Step 4. Make change to the theme.scss.liquid file to build the loading animation (optional)

Coming to the last step to create the loading animation. Luckily this step is optional, so you can implement it or not as you want. For more detail, you must add the following code to the bottom of your assets/theme.scss.liquid file if you used the snippet that shows a loading animation inside your product suggestions section:

  1. Firstly, open the theme.scss.liquid file in the Assets directory.
  2. Then, add the following code to the bottom 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);

  }

}

  1. Finally, click Save to finish. 

In conclusion

In general, displaying the Shopify recommended products is not difficult, just need to follow our tutorials above, then you will display them successfully. If you want to run your Shopify store smoothly, aside from this blog, you must consider more other instructions such as: Shopify cart attributes, Sitemap Shopify, How to add Paypal to Shopify and so much more. Not only that, you should visit our Shopify’s store to get more ideas. 

0 comments

Related Posts