使用 Product Reviews 应用

已于 Sep 26, 2020 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/products/product-reviews/installation。

安装 Product Reviews 应用后，您可以将评论表单添加到产品页面，并查看产品和产品系列页面的评分徽章。

本教程的步骤将根据您正在使用已分区模版还是未分区模版而有所不同。已分区模版是一种更新的模版，使您能够通过进行拖放来安排商店页面的布局。

如果想了解您的模版是否支持分区，请转到模版的编辑代码页面。如果 Sections 目录中有文件，您则正在使用已分区模版。未分区模版是在 2016 年 10 月之前发布的，并且 Sections 目录中没有文件。

如果您使用已分区模版，请单击已分区模版按钮并按照说明进行操作。如果您使用较旧的未分区模版，请单击未分区模版按钮并按照说明进行操作。

分区模板 未分区模板

在分区模板的产品页面中添加评论和评论表单

要在产品页面中添加评论表单，请执行以下操作：

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

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

  1. 在 Sections 目录中打开 product-template.liquid。

  2. 在代码中找到您希望显示评论的区域。通常情况下，该区域在产品描述下方。若要在文件中查找产品说明，请搜索 {{ product.description }} Liquid 标签。

  3. 在包含 {{ product.description }} Liquid 标签的代码下粘贴以下片段：

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

您的代码放置可能如下所示：

<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  1. 单击保存。

在分区模板中将评分徽章添加到产品系列页面

步骤：

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

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

  3. 在 Snippets 目录中，打开 product-grid-item.liquid 文件。

    在某些模板中，此文件具有不同的名称。如果您找不到 product-grid-item.liquid，请寻找以下某个名称：

- product-card.liquid - product-card-item.liquid - product-block.liquid - product-item.liquid

  1. 在代码中找到希望显示评分徽章的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ product.title }} Liquid 标签。

  2. 在包含 {{ product.title }} Liquid 标签的代码下的新行上，粘贴以下代码片段：

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

您的代码放置可能如下所示：

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
    </span>
  </a>
</div>

您可以尝试将代码放在文件的不同位置，以便确定您最喜欢的位置。

  1. 单击保存。

在分区模板的产品页面中添加评分徽章

要将评分徽章添加到您的产品页面，请执行以下操作：

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

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

  1. 在 Sections 目录中打开 product-template.liquid。

  2. 在代码中找到希望显示评分徽章的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ product.title }} Liquid 标签。

  3. 在包含 {{ product.title }} Liquid 标签的代码下的新行上，粘贴以下代码片段：

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

您的代码放置可能如下所示：

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

您可以尝试将代码放在文件的不同位置，以便确定您最喜欢的位置。

  1. 单击保存。

在分区模板中为您的特色产品添加评分徽章

备注：如果您使用的是 Venture，则不建议对特色产品放置评分徽章。

要为主页上的特色产品添加评分徽章，请执行以下操作：

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

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

  1. 在 Sections 目录中打开 featured-product.liquid 文件。

  2. 在片段中找到您希望评分徽章显示的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ title }} Liquid 标签。如果找不到 {{ title }} 标签，请搜索 {{ product.title }} 标签。

  3. 在包含 {{ product.title }} Liquid 标签的代码下的新行上，粘贴以下代码片段：

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

您的代码放置可能如下所示：

<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
    {% if section.settings.show_vendor %}
      <h2 class="product-single__vendor" itemprop="brand">{{ vendor }}</h2>
    {% endif %}

    <h1 class="product-single__title" itemprop="name">{{ title }}</h1>

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      {% comment %}

您可以尝试将代码放在文件的不同位置，以便确定您最喜欢的位置。

  1. 单击保存。

在未分区模板的产品页面中添加评论和评论表单

要在产品页面中添加评论表单，请执行以下操作：

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

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

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

  2. 在代码中找到您希望显示评论的区域。通常情况下，该区域在产品描述下方。若要在文件中查找产品说明，请搜索 {{ product.description }} Liquid 标签。

  3. 在包含 {{ product.description }} Liquid 标签的代码下粘贴以下片段：

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

您的代码放置可能如下所示：

<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  1. 单击保存。

在未分区模板的产品系列页面中添加评分徽章

要将评分徽章添加到您的产品系列页面，请执行以下操作：

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

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

  1. 在 Snippets 目录中，打开 product-grid-item.liquid。

    在某些模板中，此文件具有不同的名称。如果您找不到 product-grid-item.liquid，请寻找以下某个名称：

- product-card.liquid - product-card-item.liquid - product-block.liquid

如果您的模板没有任何上述文件，那么您的产品网格代码可能会在 Templates 目录下的 collection.liquid 文件中。

  1. 在代码中找到希望显示评分徽章的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ product.title }} Liquid 标签。

  2. 在包含 {{ product.title }} Liquid 标签的代码下的新行上，粘贴以下代码片段：

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

您的代码放置可能如下所示：

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
    </span>
  </a>
</div>

您可以尝试将代码放在文件的不同位置，以便确定您最喜欢的位置。

  1. 单击保存。

在未分区模板的产品页面中添加评分徽章

要将评分徽章添加到您的产品页面，请执行以下操作：

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

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

  1. 在 Shopify 应用中，点击商店。

  2. 在销售渠道部分中，点击在线商店。

  3. 点击 Manage themes（管理模版）。

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

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

  2. 在代码中找到希望显示评分徽章的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ product.title }} Liquid 标签。

  3. 在包含 {{ product.title }} Liquid 标签的代码下的新行上，粘贴以下代码片段：

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

您的代码放置可能如下所示：

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

您可以尝试将代码放在文件的不同位置，以便确定您最喜欢的位置。

  1. 单击保存。

准备好开始使用 Shopify 进行销售了吗？

免费试用