使用 Product Reviews 应用

转到应用商店以安装适用于 Shopify 的 Product Reviews。

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

本教程的步骤将根据您的模板架构版本而有所不同。

点击您的模板架构版本的按钮，然后按照说明向在线商店中添加评论元素。

Online Store 2.0

在您的 Online Store 2.0 模板中添加评论和评论表单

您可以将评论和评论表单应用块添加为产品模板上的分区，或添加为产品模板的主产品分区中的块。Shopify 模板商店中的所有 Online Store 2.0 模板都提供这些选项。您可以将评论和评论表单应用块添加到其他模板或分区，具体取决于您的模板。

将评论和评论表单添加为分区

桌面

1. 在 Shopify 后台中，转到在线商店 > 模板。
2. 找到您要编辑的模板，然后点击自定义。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。
4. 找到您要编辑的模板，然后轻触自定义。
5. 轻触编辑。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。
4. 找到您要编辑的模板，然后轻触自定义。
5. 轻触编辑。

1. 导航到要向其中添加评论和评论表单分区的产品模板。
2. 点击添加分区。
3. 从下拉菜单中的应用分区，选择评论应用块。
4. 可选：将应用分区移动到页面上的所需位置。
5. 点击保存。

将评论和评论表单添加为块

桌面

1. 在 Shopify 后台中，转到在线商店 > 模板。
2. 找到您要编辑的模板，然后点击自定义。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。
4. 找到您要编辑的模板，然后轻触自定义。
5. 轻触编辑。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。
4. 找到您要编辑的模板，然后轻触自定义。
5. 轻触编辑。

1. 导航到要向其中添加评论和评论表单块的页面和分区。
2. 点击添加块。
3. 从下拉菜单中的应用分区，选择评论应用块。
4. 可选：将评论块移动到分区中的所需位置。
5. 点击保存。

在您的 Online Store 2.0 模板中添加星级评分

您可以将星级评分添加为在产品模板的主要产品分区中的块。Shopify 模板商店中的所有 Online Store 2.0 模板都提供此选项。您可以将星级评分添加到其他模板和分区，具体取决于您的模板。

桌面

1. 在 Shopify 后台中，转到在线商店 > 模板。
2. 找到您要编辑的模板，然后点击自定义。

iPhone

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。
4. 找到您要编辑的模板，然后轻触自定义。
5. 轻触编辑。

Android

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分，轻触在线商店。
3. 轻触管理模板。
4. 找到您要编辑的模板，然后轻触自定义。
5. 轻触编辑。

1. 导航到要添加星级评分的页面和分区。
2. 点击添加块。
3. 从下拉菜单中的应用分区，选择星级评分应用块。
4. 可选：将星级评分块移动到分区中的所需位置，或自定义星形颜色、尺寸、对齐方式和上下文。
5. 点击保存。

Vintage sectioned themes

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

桌面

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

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

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

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

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

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

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>

Your code placement might look something like this:

<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 文件。

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

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

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

Your code placement might look something like this:

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

You can experiment with putting the code in different places in the file to see where you like it best.

1. 单击保存。

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

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

桌面

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

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

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

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

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

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

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>

Your code placement might look something like this:

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

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

You can experiment with putting the code in different places in the file to see where you like it best.

1. 单击保存。

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

备注

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

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

桌面

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

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

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

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

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

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

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>

Your code placement might look something like this:

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

You can experiment with putting the code in different places in the file to see where you like it best.

1. 单击保存。

Vintage non-sectioned themes

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

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

桌面

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

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

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

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

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

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

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>

Your code placement might look something like this:

<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. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

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

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

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

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

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

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

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

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

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

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

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

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

Your code placement might look something like this:

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

You can experiment with putting the code in different places in the file to see where you like it best.

1. 单击保存。

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

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

桌面

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

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

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

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

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

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

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>

Your code placement might look something like this:

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

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

You can experiment with putting the code in different places in the file to see where you like it best.

1. 单击保存。