使用 Product Reviews 应用

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

您可以将评论表单添加到产品页面，以及将评论分数徽章添加到产品和产品系列页面。 本教程的步骤将根据您的模板架构版本而有所不同。 按照基于模板架构版本的说明向在线商店添加评论元素。

本页相关主题

“Online Store 2.0”模板

您可以在 Online Store 2.0 模板中添加评论、包含评论表单和显示星级评分。

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

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

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

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 导航到要向其中添加评论和评论表单分区的产品模板。
  4. 点击添加分区。
  5. 从下拉菜单中的应用分区，选择评论应用块。
  6. 可选：将应用分区移动到页面上的所需位置。
  7. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 轻触编辑。
  6. 导航到要向其中添加评论和评论表单分区的产品模板。
  7. 点击添加分区。
  8. 从下拉菜单中的应用分区，选择评论应用块。
  9. 可选：将应用分区移动到页面上的所需位置。
  10. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 轻触编辑。
  6. 导航到要向其中添加评论和评论表单分区的产品模板。
  7. 点击添加分区。
  8. 从下拉菜单中的应用分区，选择评论应用块。
  9. 可选：将应用分区移动到页面上的所需位置。
  10. 单击保存。

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

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 导航到要向其中添加评论和评论表单块的页面和分区。
  4. 点击添加块。
  5. 从下拉菜单中的应用分区，选择评论应用块。
  6. 可选：将评论块移动到分区中的所需位置。
  7. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 轻触编辑。
  6. 导航到要向其中添加评论和评论表单块的页面和分区。
  7. 点击添加块。
  8. 从下拉菜单中的应用分区，选择评论应用块。
  9. 可选：将评论块移动到分区中的所需位置。
  10. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 轻触编辑。
  6. 导航到要向其中添加评论和评论表单块的页面和分区。
  7. 点击添加块。
  8. 从下拉菜单中的应用分区，选择评论应用块。
  9. 可选：将评论块移动到分区中的所需位置。
  10. 单击保存。

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

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

步骤：

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到您要编辑的模板，然后点击自定义。
  3. 导航到要添加星级评分的页面和分区。
  4. 点击添加块。
  5. 从下拉菜单中的应用分区，选择星级评分应用块。
  6. 可选：将星级评分块移动到分区中的所需位置，或自定义星形颜色、尺寸、对齐方式和上下文。
  7. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 轻触编辑。
  6. 导航到要添加星级评分的页面和分区。
  7. 点击添加块。
  8. 从下拉菜单中的应用分区，选择星级评分应用块。
  9. 可选：将星级评分块移动到分区中的所需位置，或自定义星形颜色、尺寸、对齐方式和上下文。
  10. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 点击管理所有模板。
  4. 找到您要编辑的模板，然后轻触自定义。
  5. 轻触编辑。
  6. 导航到要添加星级评分的页面和分区。
  7. 点击添加块。
  8. 从下拉菜单中的应用分区，选择星级评分应用块。
  9. 可选：将星级评分块移动到分区中的所需位置，或自定义星形颜色、尺寸、对齐方式和上下文。
  10. 单击保存。

经典分区模板

您可在经典分区模板的不同页面上添加评论、包含评论表单以及显示评论分数徽章。

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

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  3. 在 Sections 目录中打开 product-template.liquid。
  4. 在代码中找到您希望显示评论的区域。通常情况下，该区域在产品描述下方。若要在文件中查找产品说明，请搜索 {{ product.description }} Liquid 标签。
  5. 在包含 {{ 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. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Sections 目录中打开 product-template.liquid。
  6. 在代码中找到您希望显示评论的区域。通常情况下，该区域在产品描述下方。若要在文件中查找产品说明，请搜索 {{ product.description }} Liquid 标签。
  7. 在包含 {{ 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. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Sections 目录中打开 product-template.liquid。
  6. 在代码中找到您希望显示评论的区域。通常情况下，该区域在产品描述下方。若要在文件中查找产品说明，请搜索 {{ product.description }} Liquid 标签。
  7. 在包含 {{ 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 文件。在某些模板中，此文件具有不同的名称。如果您找不到 product-grid-item.liquid，请寻找以下某个名称：

    • product-card-grid.liquid
    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquid
    • product-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. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  3. 在 Sections 目录中打开 product-template.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:
<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. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Sections 目录中打开 product-template.liquid。
  6. 在代码中找到希望显示评分徽章的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ product.title }} Liquid 标签。
  7. 在包含 {{ 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. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Sections 目录中打开 product-template.liquid。
  6. 在代码中找到希望显示评分徽章的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ product.title }} Liquid 标签。
  7. 在包含 {{ 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. 单击保存。

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

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  3. 在 Sections 目录中打开 featured-product.liquid 文件。
  4. 在代码片段中找到您希望评分徽章显示的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ title }} Liquid 标签。如果找不到 {{ title }} 标签，请搜索 {{ product.title }} 标签。
  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__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. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Sections 目录中打开 featured-product.liquid 文件。
  6. 在代码片段中找到您希望评分徽章显示的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ title }} Liquid 标签。如果找不到 {{ title }} 标签，请搜索 {{ product.title }} 标签。
  7. 在包含 {{ 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. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Sections 目录中打开 featured-product.liquid 文件。
  6. 在代码片段中找到您希望评分徽章显示的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ title }} Liquid 标签。如果找不到 {{ title }} 标签，请搜索 {{ product.title }} 标签。
  7. 在包含 {{ 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. 单击保存。

经典未分区模板

您可在经典未分区模板的不同页面上添加评论、包含评论表单以及显示评论分数徽章。

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

  1. 在 Shopify 后台中，转至在线商店 > 模板。
  2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  3. 在 Templates 目录中，打开 product.liquid。
  4. 在代码中找到您希望显示评论的区域。通常情况下，该区域在产品描述下方。若要在文件中查找产品说明，请搜索 {{ product.description }} Liquid 标签。
  5. 在包含 {{ 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. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Templates 目录中，打开 product.liquid。
  6. 在代码中找到您希望显示评论的区域。通常情况下，该区域在产品描述下方。若要在文件中查找产品说明，请搜索 {{ product.description }} Liquid 标签。
  7. 在包含 {{ 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. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Templates 目录中，打开 product.liquid。
  6. 在代码中找到您希望显示评论的区域。通常情况下，该区域在产品描述下方。若要在文件中查找产品说明，请搜索 {{ product.description }} Liquid 标签。
  7. 在包含 {{ 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。在某些模板中，此文件具有不同的名称。如果您找不到 product-grid-item.liquid，请寻找以下某个名称：

    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquid如果您的模板没有任何上述文件，那么您的产品网格代码可能会在 Templates 目录下的 collection.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. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

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

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

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

  7. 在包含 {{ 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. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

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

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

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

  7. 在包含 {{ 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. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  3. 在 Templates 目录中，打开 product.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:
<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. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Templates 目录中，打开 product.liquid。
  6. 在代码中找到希望显示评分徽章的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ product.title }} Liquid 标签。
  7. 在包含 {{ 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. 单击保存。
  1. 在 Shopify 应用中，点击 … 按钮。
  2. 在销售渠道部分，轻触在线商店。
  3. 轻触管理模板。
  4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
  5. 在 Templates 目录中，打开 product.liquid。
  6. 在代码中找到希望显示评分徽章的区域。通常，该区域位于产品标题下方。若要在文件中查找产品标题，请搜索 {{ product.title }} Liquid 标签。
  7. 在包含 {{ 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. 单击保存。

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

免费试用