使用 Product Reviews 应用
安装 Product Reviews 应用后,您可以将评论表单添加到产品页面,并查看产品和产品系列页面的评分徽章。
本教程的步骤将根据您的模板架构版本而有所不同。
点击您的模板架构版本的按钮,然后按照说明向在线商店中添加评论元素。
本页相关主题
在您的 Online Store 2.0 模板中添加评论和评论表单
您可以将评论和评论表单应用块添加为产品模板上的分区,或添加为产品模板的主产品分区中的块。Shopify 模板商店中的所有 Online Store 2.0 模板都提供这些选项。您可以将评论和评论表单应用块添加到其他模板或分区,具体取决于您的模板。
将评论和评论表单添加为分区
- 在 Shopify 后台中,转至在线商店 > 模板。
- 找到您要编辑的模板,然后点击自定义。
- 在 Shopify 应用中,轻触商店。
- 在销售渠道部分,轻触在线商店。
- 点击管理所有模板。
- 找到您要编辑的模板,然后轻触自定义。
- 轻触编辑。
- 在 Shopify 应用中,轻触商店。
- 在销售渠道部分,轻触在线商店。
- 点击管理所有模板。
- 找到您要编辑的模板,然后轻触自定义。
- 轻触编辑。
- 导航到要向其中添加评论和评论表单分区的产品模板。
- 点击添加分区。
- 从下拉菜单中的应用分区,选择评论应用块。
- 可选:将应用分区移动到页面上的所需位置。
- 点击保存。
将评论和评论表单添加为块
- 在 Shopify 后台中,转至在线商店 > 模板。
- 找到您要编辑的模板,然后点击自定义。
- 在 Shopify 应用中,轻触商店。
- 在销售渠道部分,轻触在线商店。
- 点击管理所有模板。
- 找到您要编辑的模板,然后轻触自定义。
- 轻触编辑。
- 在 Shopify 应用中,轻触商店。
- 在销售渠道部分,轻触在线商店。
- 点击管理所有模板。
- 找到您要编辑的模板,然后轻触自定义。
- 轻触编辑。
- 导航到要向其中添加评论和评论表单块的页面和分区。
- 点击添加块。
- 从下拉菜单中的应用分区,选择评论应用块。
- 可选:将评论块移动到分区中的所需位置。
- 点击保存。
在您的 Online Store 2.0 模板中添加星级评分
您可以将星级评分添加为在产品模板的主要产品分区中的块。Shopify 模板商店中的所有 Online Store 2.0 模板都提供此选项。您可以将星级评分添加到其他模板和分区,具体取决于您的模板。
- 在 Shopify 后台中,转至在线商店 > 模板。
- 找到您要编辑的模板,然后点击自定义。
- 在 Shopify 应用中,轻触商店。
- 在销售渠道部分,轻触在线商店。
- 点击管理所有模板。
- 找到您要编辑的模板,然后轻触自定义。
- 轻触编辑。
- 在 Shopify 应用中,轻触商店。
- 在销售渠道部分,轻触在线商店。
- 点击管理所有模板。
- 找到您要编辑的模板,然后轻触自定义。
- 轻触编辑。
- 导航到要添加星级评分的页面和分区。
- 点击添加块。
- 从下拉菜单中的应用分区,选择星级评分应用块。
- 可选:将星级评分块移动到分区中的所需位置,或自定义星形颜色、尺寸、对齐方式和上下文。
- 点击保存。
在分区模板的产品页面中添加评论和评论表单
在 Shopify 后台中,转至在线商店 > 模板。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Sections 目录中打开
product-template.liquid
。在代码中找到您希望显示评论的区域。通常情况下,该区域在产品描述下方。若要在文件中查找产品说明,请搜索
{{ product.description }}
Liquid 标签。在包含
{{ 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>
- 单击保存。
在分区模板中将评分徽章添加到产品系列页面
在 Shopify 后台中,转到在线商店 > 模板。
找到要编辑的模板,然后点击 ... 按钮 > 编辑代码。
在 Snippets 目录中,打开
product-grid-item.liquid
文件。在代码中找到希望显示评分徽章的区域。通常,该区域位于产品标题下方。若要在文件中查找产品标题,请搜索
{{ product.title }}
Liquid 标签。在包含
{{ 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.
- 单击保存。
在分区模板的产品页面中添加评分徽章
要将评分徽章添加到您的产品页面,请执行以下操作:
在 Shopify 后台中,转至在线商店 > 模板。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Sections 目录中打开
product-template.liquid
。在代码中找到希望显示评分徽章的区域。通常,该区域位于产品标题下方。若要在文件中查找产品标题,请搜索
{{ product.title }}
Liquid 标签。在包含
{{ 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.
- 单击保存。
在分区模板中为您的特色产品添加评分徽章
要为主页上的特色产品添加评分徽章,请执行以下操作:
在 Shopify 后台中,转至在线商店 > 模板。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Sections 目录中打开
featured-product.liquid
文件。在片段中找到您希望评分徽章显示的区域。通常,该区域位于产品标题下方。若要在文件中查找产品标题,请搜索
{{ title }}
Liquid 标签。如果找不到{{ title }}
标签,请搜索{{ product.title }}
标签。在包含
{{ 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.
- 单击保存。
在未分区模板的产品页面中添加评论和评论表单
要在产品页面中添加评论表单,请执行以下操作:
在 Shopify 后台中,转至在线商店 > 模板。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Templates 目录中,打开
product.liquid
。在代码中找到您希望显示评论的区域。通常情况下,该区域在产品描述下方。若要在文件中查找产品说明,请搜索
{{ product.description }}
Liquid 标签。在包含
{{ 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>
- 单击保存。
在未分区模板的产品系列页面中添加评分徽章
要将评分徽章添加到您的产品系列页面,请执行以下操作:
在 Shopify 后台中,转至在线商店 > 模板。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Snippets 目录中,打开
product-grid-item.liquid
。在代码中找到希望显示评分徽章的区域。通常,该区域位于产品标题下方。若要在文件中查找产品标题,请搜索
{{ product.title }}
Liquid 标签。在包含
{{ 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.
- 单击保存。
在未分区模板的产品页面中添加评分徽章
要将评分徽章添加到您的产品页面,请执行以下操作:
在 Shopify 后台中,转至在线商店 > 模板。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Shopify 应用中,轻触商店。
在销售渠道部分中,轻触在线商店。
轻触 Manage themes(管理模板)。
找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码。
在 Templates 目录中,打开
product.liquid
。在代码中找到希望显示评分徽章的区域。通常,该区域位于产品标题下方。若要在文件中查找产品标题,请搜索
{{ product.title }}
Liquid 标签。在包含
{{ 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.
- 单击保存。