Show 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.
On this page
Step 1: Create a product-recommendations.liquid
section
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:
- In the Templates directory, open the product.liquid file.
- Add the following code at the bottom of the file:
{% section 'product-recommendations' %}
- Click Save.
Step 3: Edit your theme.js
file to load the recommendations asynchronously
You need to load recommendations into the empty container that the section produced on the product page. Use JavaScript to make an HTTP GET request to <base_url>?section_id=<section_id>&product_id=<product_id>
.
- In the Assets directory, open the theme.js file.
- Find this line of code:
sections.register('hero-section', theme.HeroSection);
- Below that line, add this code:
sections.register('product-recommendations', theme.ProductRecommendations);
- Add the following code at the bottom 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;
})();
- 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:
- In the Assets directory, open the theme.scss.liquid file.
- 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: 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 Save.