by admin

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!

Premium Shopify Themes

We provide Shopify themes with nice and responsive designs. Let’s find out!

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

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

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

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

{% assign limit = 4 %}

{% if recommendations.performed %}

{% if recommendations.products_count > 0 %}

<h2>{{ heading }}</h2>

</div>

{% for product in recommendations.products %}

{% include ‘product-card-grid’, max_height: 250 %}

</li>

{% endfor %}

</ul>

{% endif %}

{% else %}

</div>

{% endif %}

</div>

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>

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

{% if recommendations.products_count > 0 %}

<h2>{{ heading }}</h2>

</div>

{% for product in recommendations.products %}

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

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

{% if recommendations.performed %}

{% if recommendations.products_count > 0 %}

<h2>{{ heading }}</h2>

</div>

{% for product in recommendations.products %}

{% include ‘product-card-grid’, max_height: 250 %}

</li>

{% endfor %}

</ul>

{% endif %}

{% else %}

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

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

{% section ‘product-recommendations’ %}

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. Besides, 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:

Firstly, open the theme.scss.liquid file in the Assets directory.
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);

}

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 solution to get more ideas.

In particular, Arrowtheme offers Shopify website packages with the help of a team of seasoned Shopify experts that can solve every of your problems. Best of all, at this time, we are launching an appealing discount that gets upto 30% off for all of our Shopify services. Need any support with Back-end/ Front-end updates, Maintenance services or anything else, let’s CONTACT US as soon as possible to grab this deal quickly.