免费Shopify插件 Product Review 产品评价应用安装设置教程

Shopify插件Product Review是Shopify官方出品的一款完全免费的Review应用。如果你前期预算有限，可以先使用Product Review这个应用为你的网站添加评价功能，和其他产品评价插件相比，Product Review的功能相对简单，中规中矩，不过也能满足用户的基本需求，等到后面如果需要更多的功能，例如在Reivew中插入图片，一键导入亚马逊速卖通的产品评价等等功能的话，再换成其他功能更加强大的Review应用如Loox，Ryviu等等。

👉 Shopify促销进行中, 新账户前3个月每月仅需 1 美金 ~~39美金~~，立即注册获取优惠 👈

图片[2]-免费Shopify插件 Product Review 产品评价应用安装设置教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

最近 Shopify 在国内不太稳定，如果打不开 Shopify 官网, 或者打开速度很慢，无法注册或者登录 Shopify 账户，请使用“魔法”重试，你懂的。

Shopify插件Product Review的安装

安装过程很简单，直接在Shopify插件市场搜索Product Review然后安装即可，如下图所示。

图片[3]-免费Shopify插件 Product Review 产品评价应用安装设置教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

插件安装成功之后，还需要你自己修改主题的代码让Review版块正常显示到网站前台产品页面中，而其他同类型插件都可以完成自动修改主题代码，虽然Product Review提供了如下图所示的代码安装教程，不过对于大部分朋友来说，仍然要花不少时间才能正确完成代码的添加，因此Product Review这个应用显得就没有那么的人性化了。

图片[4]-免费Shopify插件 Product Review 产品评价应用安装设置教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

不过如果你对代码一无所知，如果你用的是Shopify的免费或者主题，建议你联系Shopify的客服帮你修改下面的代码，如果你用的是第三方主题，也可以尝试联系Shopify的客服或者主题的开发者帮你完成插件代码的修改。对他们来说可能一分钟不到就可以帮你搞定，你就没有必要再去花时间研究这个东西了，而且如果没有经验你搞一天都未必能够搞的定。

另外，下面的所有演示操作都是基于Shopify免费主题Brooklyn的，如果你用的是其他主题，要修改的主题文件以及代码位置大概率上会有所不同。所以以下操作仅供参考，还是那句话，让客服帮你搞定下面的操作是最高效，最佳的解决办法。

代码的安装分三个部分：

插入代码将Review主版块添加到产品页面中
插入代码将Review Rating Star添加到产品标题的下方
插入代码将Review Rating Star添加到分类页面产品标题下方

插入代码将Review主版块添加到产品页面中

Brooklyn主题，依次打开 Online Store – Themes – Actions – Edit Code，然后找到文件夹 Sections 下的文件 product-template.liquid, 在文件内搜索“description”，按照Product Review提供的教程找到如下所示代码行，并将其提供的代码插入到指定位置。保存文件即可。

<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>
{% if section.settings.social_sharing_products %}
  {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
{% endif %}

在上面的代码中，红色部分代码就是我们插入的产品评价版块的代码，黄色部分内容就是产品页面产品描述版块的代码。产品评价代码在产品描述代码的下方，因此在前台产品页面显示中，产品评价版块也是显示在产品描述版块下方的。如果你想将产品评价显示在产品描述的上方，只需要将上面红色字体的部分插入到黄色字体部分的上方即可。

修改好代码之后点击右上角的保存按钮即可。

图片[5]-免费Shopify插件 Product Review 产品评价应用安装设置教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

上面添加的代码在Shopify网站产品页面前台显示的效果如下图中 2 所示的效果，产品评价出现在了产品描述的下方。

图片[6]-免费Shopify插件 Product Review 产品评价应用安装设置教程 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

插入代码将Review Rating Star添加到产品标题的下方

上面的操作只是将产品评价的主版块添加到了产品页面描述的下方，如果你想像上图一样，在标题的下方插入评价星级 Rating Star，则你还需要在同一个文件，也就是 product-template.liquid 文件中再插入一行代码。在文件中搜索“h1”，然后找到如下所示的代码段，将红色代码部分内容插入到文件中即可。

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

上面的代码中，黄色部分内容就是产品页面的标题，红色部分内容是我们插入的Rating Star代码。如果你想让Rating Star出现在标题的上方，则只需要将上面红色部分的代码内容挪到黄色代码的上方即可。

修改好之后保存，如下图所示。最终前台产品页面的显示效果如上图中 1 所展示的效果。

插入代码将Review Rating Star添加到分类页面产品标题下方

下面的操作也是可选的，如果你想将Rating Star插入到产品分类页面的标题下方，实现如下图所示 “3”所显示的效果，则需要继续操作。

要在Collection页面的产品标题下方添加Rating Star，对于Brooklyn主题来说，同样打开Edit Code页面，然后在Snippets文件夹下找到文件 product-grid-item.liquid。然后按照Product提供的教程，将其提供的代码插入到文件指定位置中。

<a href="{{ product.url | within: collection }}" class="grid-product__meta">
      <span class="grid-product__title">{{ product.title }}</span>
      <span class="grid-product__price-wrap">
        <span class="long-dash">—</span>
        <span class="grid-product__price">
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {% else %}
             <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          {% endif %}
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>
        {%- if product.price_varies == false and variant.unit_price_measurement -%}
          {%- capture unit_price_separator -%}
            <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
          {%- endcapture -%}
          {%- capture unit_price_base_unit -%}
            <span>
              {%- if variant.unit_price_measurement.reference_value != 1 -%}
                {{- variant.unit_price_measurement.reference_value -}}
              {%- endif -%}
              {{ variant.unit_price_measurement.reference_unit }}
            </span>
          {%- endcapture -%}
          <span class="product-unit-price">
            <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
            <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
          </span>
        {%- endif -%}
      </span>
      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      {% if section.settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}
</a>

添加好之后保存文件，在网站前台显示的效果就如上图所示。

完成以上操作之后，回到Product Review后台页面，点击如下图所示的 Verify and continue 按钮，让系统来验证下你的代码是否已经成功安装。

代码安装没有问题的话，就会出现如下图所示的弹窗。

一键还原对文件代码的修改

如果代码的操作有问题，导致页面排版混乱，而你又不知道哪里出现了问题，不知道如何操作的时候，你可以将你的所有操作一键还原。Shopify系统会在我们修改文件的时候，以日志的形式自动生成备份文件。出现问题之后可以一键还原到之前的文件内容。

例如我们刚刚修改了product-template.liquid文件，如果我们添加的代码或者修改的代码出现了错误，导致网站前台显示出现了问题，你可以点击文件名称右侧的 Older versions，然后在下拉选项中选择之前任意的版本即可恢复。选择Original 就可以恢复到我们刚刚安装该主题的时候未经任何修改的文件版本。

完成代码的修改之后，就完成了Product Review插件的安装。再强调一遍，上面的操作基于Brooklyn这个免费主题进行设置的，其他主题大概率上是不适用的。如果你没有代码操作的经验，建议直接联系Shopify的客服，让他们帮你完成以上的设置，不要在这些事情上浪费时间。

再下一步就是进行插件的基本设置。

Review 插件的基本设置

进入到Product Review的后台，点击右上角的Setting按钮，打开如下图所示的页面。按照你的需求依次进行设置即可。

Auto publish 选择Disabled的话，需要你审核通过的Review才会在前台显示。
Email settings 收到新的review之后是否邮件通知你。
Star Icon Color 设置前台 Rating Star的颜色。

Review listing layout 设置的是网站前台 Review 版块的显示样式，例如该版块的显示方式，边框颜色，版块之间的间距，以及每页显示的Review的数量。

Review listing text 设置的是网站前台 Review 版块文字部分内容，你可以随意修改这些文字内容，或者使用默认文字内容。

Review Form text 设置的是Review版块文本框中预留的文字内容，你可以随意修改这些文字。勾选 Show review form on load 的话，会直接在前台显示完整的表单要客户提交Review。如果不勾选的话，则前台只显示文字 “Write a review”当用户点击文字链接之后，才会显示完整的 Review 表单

Badge Text 显示的是 Rating Star 部分的显示样式，按照你的需求修改就行。

如果你设置的是 Disabled Auto Publish，则当有用户提交新的Review的时候，在你的后台可以看到用户的测评状态处于 Unpublished 状态，你需要手动Publish，然后这条Review内容才会在网站前台显示出来。

Disabled Auto Publish 虽然可以有效的控制差评在前台显示的数量，但是不能仅仅靠隐藏差评来解决问题，而是要重视并且及时解决差评客户遇到的售前售后的问题，才能保障品牌口碑，以及收款账户的安全。

使用表格批量上传产品评价

在前期，你的网站上没有评价的时候，你可以自己在自己的产品页面刷好评，来提高网站的转化率，尤其是当你给产品打广告的时候，一定要先给你的产品页面刷几个十几个甚至几十个好评之后，再去打广告，可以有效的提高网站的转化率，避免“烧钱”的情况发生。刷好评的意思不是说全部留5星好评啊，要适当的刷一些4星的好评，让评价数据看起来更真实一些。虽然不少用户知道不少网站上的评价是“Fake Review”但是购买行为或多或少还是会受评价的影响。

从前台一个一个刷评价会很慢，你可以使用表格批量导入评价。例如用爬虫工具从亚马逊速卖通爬数据，然后将抓到的内容整理到Product Review的批量上传表格中一键上传，就可以一次性给你的网站导入成千上万条评价数据。

如下图所示，你可以点击CSV template链接下载批量上传Review的表格模板，然后填写表格内容再上传。

如下图所示就是Review批量上传表格。

Product handle就是产品链接地址Product后面部分的内容，例如你的产品链接地址是 yourdomain.com/product/dog-seat-cover, 那么，该产品的product handle就是 dog-seat-cover，你需要将 “dog-seat-cover ”填写到表格中。在Shopify网站中，每个产品的Product handle都是唯一的。

Stats是该条review的发布状态，published 则该条Review会直接在前台显示出来。
Rating可以填写的数字为1-5，也就是星级。
Title是该条review的标题
Author是留评人的姓名
Email是留评人的邮箱地址
Location是留评人所在区域
Body是Review的具体内容
Reply是你对Review内容的回复
Created 是Review的发布时间
Replied 是你对Review回复的时间

对于用户发布的Review内容，你能进行的操作只有删除或者隐藏，无法编辑用户发布的Review的具体内容。更重要的是，该shopify插件目前只支持文字Review，不支持在其中插入图片。而用户提交的Review图片对网站转化率的影响又非常大，因此说，Product Review在网站发展前期流量相对较小的时候，能够满足基本的需求，你可以把它作为一个过渡解决方案，当网站流量逐渐增大，预算充足的时候，建议换成类似Loox，Ryviu等等更强大的Review工具，来提高网站的转化率。