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.
- Discover your Shopify theme's architecture version
- Learn about customizing your Online Store 2.0 theme
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
From the Shopify admin, follow the path Online Store > Themes.
Look for the theme that you wish to edit, click the ... button to explore the actions menu, and click Edit code.
In the Sections directory, click Add a new section.
Give a name to the new section
product-recommendations
and click on Create section.Replace the whole content with the code given below:
For iPhone
In the Shopify app, click Store.
From the Sales channels section, click on Online Store.
Choose Manage themes.
Look for the theme that you wish to edit, click the ... button to go to the actions menu, and then click on Edit code.
From the Sections directory, click Add a new section.
Give a name to the new section
product-recommendations
and click Create section.Replace the whole of the content with the code given below:
From the Shopify app, click on Store.
From the Sales channels section, tap Online Store.
Tap on Manage themes.
Choose the theme you wish to edit, click the ... button to go to the actions menu, and then select Edit code.
From the Sections directory, click Add a new section.
Name the new section
product-recommendations
and click on Create section.Replace the whole content with the code that is given below:
{% 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>
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:
Open the product.liquid file in the Templates directory.
Insert the following code at the end of the file:
{% section 'product-recommendations' %}
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>
.
Open the theme.js file in the Assets directory.
Search for the following line of code:
sections.register('hero-section', theme.HeroSection);
sections.register('product-recommendations', theme.ProductRecommendations);
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;
})();
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:
Open the theme.scss.liquid file in the Assets directory.
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);
}
}