Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. If you need help, then you can hire a Shopify expert.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version

• Explore Online Store 2.0 theme customizations

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.

Note

The latest versions of the following Shopify themes include product recommendations by default:

• Boundless

• Brooklyn

• Debut

• Minimal

• Narrative

• Simple

• Venture

If you're using an older version of one of these themes, then you can show product recommendations after you update your theme instead of customizing its code.

On this page

• Step 1: Create a product-recommendations.liquid section

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

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

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

Step 1: Create a product-recommendations.liquid section

PC£º

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

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

2. Name the new section product-recommendations and click Create section.

3. Replace all of the content with the code below:

   {% 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>       <div></div>       <div></div>       <div></div>     </div>   {% endif %} </div>

4. Click Save.

When the section is rendered with the product page, recommendations.performed will be false and so the generated HTML will show 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">   <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>

Note

The recommended products need to be loaded asynchronously using JavaScript. You will load them in Step 3: Edit your theme.js file to load the recommendations asynchronously.

If you don't want to show a loading animation, use this code instead:

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

When the above section is rendered with your product page, the generated HTML 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">

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

iPhone£º

1. From the Shopify app, tap Store.

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

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

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

2. Name the new section product-recommendations and click Create section.

3. Replace all of the content with the code below:

   {% 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>       <div></div>       <div></div>       <div></div>     </div>   {% endif %} </div>

4. Click Save.

When the section is rendered with the product page, recommendations.performed will be false and so the generated HTML will show 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">   <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>

Note

The recommended products need to be loaded asynchronously using JavaScript. You will load them in Step 3: Edit your theme.js file to load the recommendations asynchronously.

If you don't want to show a loading animation, use this code instead:

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

When the above section is rendered with your product page, the generated HTML 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">

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

Android£º

1. From the Shopify app, tap Store.

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

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

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

2. Name the new section product-recommendations and click Create section.

3. Replace all of the content with the code below:

   {% 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>       <div></div>       <div></div>       <div></div>     </div>   {% endif %} </div>

4. Click Save.

When the section is rendered with the product page, recommendations.performed will be false and so the generated HTML will show 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">   <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>

Note

The recommended products need to be loaded asynchronously using JavaScript. You will load them in Step 3: Edit your theme.js file to load the recommendations asynchronously.

If you don't want to show a loading animation, use this code instead:

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

When the above section is rendered with your product page, the generated HTML 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">

If the user is using 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 display product recommendations at the bottom of your product page, include the section at the bottom of your templates/product.liquid file:

1. In the Templates directory, open the product.liquid file.

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

   {% section 'product-recommendations' %}

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

1. In the Assets directory, open the theme.js file.

2. Find this line of code:

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

3. Below that line, add this code:

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

4. 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 productRecommendationsUrlAndContainerClass = baseUrl + '?section_id=product-recommendations&limit=' + limit +       '&product_id=' +productId +       ' .product-recommendations';     $container.parent().load(productRecommendationsUrlAndContainerClass);   }   return ProductRecommendations; })();

5. 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:

1. In the Assets directory, open the theme.scss.liquid file.

2. 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);   } }

3. Click Save.