在产品页面上显示产品推荐



本教程介绍如何在 Debut 模板中向产品页面添加产品推荐。若要详细了解产品推荐的工作方式，请参阅在产品页面上显示产品推荐。

备注：默认情况下，以下 Shopify 模板的最新版本中包含产品推荐：

  • Boundless

  • Brooklyn

  • Debut

  • Minimal

  • Narrative

  • Simple

  • Venture

如果您使用的是上方某个模板的旧版本，则您可以在更新模板后显示产品推荐，而无需自定义模板代码。

本页相关主题

  • 步骤 1：创建 product-recommendations.liquid 分区

  • 步骤 2：在 product.liquid 模板中包含该分区

  • 步骤 3：编辑您的 theme.js 文件以便以异步方式加载推荐

  • 步骤 4：编辑 theme.scss.liquid 文件以创建加载动画（可选）

步骤 1：创建 product-recommendations.liquid 分区

PC：

  1. 在 Shopify 后台中，转到在线商店 > 模板。

  2. 找到要编辑的模板，然后点击操作 > 编辑代码。

  1. 在 Sections 目录中，点击添加新分区。

  2. 将新分区命名为 product-recommendations，然后点击创建分区。

  3. 将所有内容替换为下方代码：

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

  1. 点击保存。

当在产品页面中呈现该分区时，recommendations.performed 将为 false，因此生成的 HTML 将显示加载动画：

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

备注：推荐的产品需要使用 JavaScript 进行异步加载。您将在步骤 3：编辑您的 theme.js 文件以便以异步方式加载推荐中加载推荐的产品。

如果您不想显示加载动画，请改为使用此代码：

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

当在产品页面中呈现上述分区时，生成的 HTML 将为不包含任何内容的 div 元素：

<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 的 data-base-url 中。例如，/fr/recommendations/products。

苹果系统：

  1. 在 Shopify 应用中，轻触商店。

  2. 在销售渠道部分中，轻触在线商店。

  3. 轻触 Manage themes（管理模板）。

  4. 找到要编辑的模板，然后点击操作 > 编辑代码。

  1. 在 Sections 目录中，点击添加新分区。

  2. 将新分区命名为 product-recommendations，然后点击创建分区。

  3. 将所有内容替换为下方代码：

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

  1. 点击保存。

当在产品页面中呈现该分区时，recommendations.performed 将为 false，因此生成的 HTML 将显示加载动画：

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

备注：推荐的产品需要使用 JavaScript 进行异步加载。您将在步骤 3：编辑您的 theme.js 文件以便以异步方式加载推荐中加载推荐的产品。

如果您不想显示加载动画，请改为使用此代码：

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

当在产品页面中呈现上述分区时，生成的 HTML 将为不包含任何内容的 div 元素：

<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 的 data-base-url 中。例如，/fr/recommendations/products。

安卓系统：

  1. 在 Shopify 应用中，轻触商店。

  2. 在销售渠道部分中，轻触在线商店。

  3. 轻触 Manage themes（管理模板）。

  4. 找到要编辑的模板，然后点击操作 > 编辑代码。

  1. 在 Sections 目录中，点击添加新分区。

  2. 将新分区命名为 product-recommendations，然后点击创建分区。

  3. 将所有内容替换为下方代码：

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

  1. 点击保存。

当在产品页面中呈现该分区时，recommendations.performed 将为 false，因此生成的 HTML 将显示加载动画：

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

备注：推荐的产品需要使用 JavaScript 进行异步加载。您将在步骤 3：编辑您的 theme.js 文件以便以异步方式加载推荐中加载推荐的产品。

如果您不想显示加载动画，请改为使用此代码：

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

当在产品页面中呈现上述分区时，生成的 HTML 将为不包含任何内容的 div 元素：

<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 的 data-base-url 中。例如，/fr/recommendations/products。

步骤 2：在 product.liquid 模板中包含该分区

若要在产品页面底部显示产品推荐，请在 templates/product.liquid 文件底部包含该分区：

  1. 在 Templates 目录中，打开 product.liquid 文件。

  2. 在文件底部添加以下代码：

{% section 'product-recommendations' %}

  1. 点击保存。

步骤 3：编辑您的 theme.js 文件以便以异步方式加载推荐

您需要将推荐加载到该分区在产品页面上生成的空容器中。使用 JavaScript 向 <base_url>?section_id=<section_id>&product_id=<product_id> 发出 HTTP GET 请求。

  1. 在 Assets 目录中，打开 theme.js 文件。

  2. 查找此代码行：

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

  1. 在此行下方添加以下代码：

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

  1. 在文件底部添加以下代码：

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; })();

  1. 点击保存。

步骤 4：编辑 theme.scss.liquid 文件以创建加载动画（可选）

如果您使用了可在产品推荐分区内显示加载动画的代码片段，请在 assets/theme.scss.liquid 文件底部添加以下代码：

  1. 在 Assets 目录中，打开 theme.scss.liquid 文件。

  2. 在文件底部，添加此代码：

.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. 点击保存。

Shopify商户官网原文详情：

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

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



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>



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>



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.

文章内容来源：Shopify商户官方网站


（本文内容根据网络资料整理，出于传递更多信息之目的，不代表连连国际赞同其观点和立场）