Shopify免费产品评价应用 Product Review安装和设置教程
Product Review是Shopify官方出品的一款完全免费的Review应用。如果你前期预算有限，可以先使用Product Review这个应用为你的网站添加评价功能，和其他产品评价插件相比，Product Review的功能相对简单，中规中矩，不过也能满足用户的基本需求，等到后面如果需要更多的功能，例如在Reivew中插入图片，一键导入亚马逊速卖通的产品评价等等功能的话，再换成其他功能更加强大的Review应用如Loox，Ryviu等等。
安装过程很简单，直接在Shopify的应用市场搜索Product Review然后安装即可，如下图所示。
插件安装成功之后，还需要你自己修改主题的代码让Review版块正常显示到网站前台产品页面中，而其他同类型插件都可以完成自动修改主题代码，虽然Product Review提供了如下图所示的代码安装教程，不过对于大部分朋友来说，仍然要花不少时间才能正确完成代码的添加，因此Product Review这个应用显得就没有那么的人性化了。
不过如果你对代码一无所知，如果你用的是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 %}
在上面的代码中，红色部分代码就是我们插入的 产品评价 版块的代码，蓝色部分内容就是产品页面产品描述版块的代码。产品评价代码在产品描述代码的下方，因此在前台产品页面显示中，产品评价版块也是显示在产品描述版块下方的。如果你想将产品评价显示在产品描述的上方，只需要将上面红色字体的部分插入到蓝色字体部分的上方即可。
修改好代码之后点击右上角的保存按钮即可。
上面添加的代码在Shopify网站产品页面前台显示的效果如下图中 2 所示的效果，产品评价出现在了产品描述的下方。
插入代码将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"> {{ 'general.accessibility.unit_price_separator' | t }} </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的客服，让他们帮你完成以上的设置，不要在这些事情上浪费时间。
再下一步就是进行插件的基本设置。
进入到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的具体内容。更重要的是，该插件目前只支持文字Review，不支持在其中插入图片。而用户提交的Review图片对网站转化率的影响又非常大，因此说，Product Review在网站发展前期流量相对较小的时候，能够满足基本的需求，你可以把它作为一个过渡解决方案，当网站流量逐渐增大，预算充足的时候，建议换成类似Loox，Ryviu等等更强大的Review工具，来提高网站的转化率。
Shopify免费产品评价应用 Product Review安装和设置教程相关推荐
- 印能捷怎样安装在虚拟服务器,超详细Prinergy（印能捷）安装及设置教程
超详细Prinergy(印能捷)安装及设置教程 书法字体2014.09.01Prinergy 如果你安装的是Prinergy(印能捷)正版软件,那么你完全无需操心印能捷的安装与设置问题(印能捷工程师会 ...
- CSP在线考试环境 | OBS录屏软件下载安装和设置教程
今年由于疫情原因,很多省份都申请在线参加CCF CSP-J/S考试. 本次在线考试采用双重保险方式,不仅要求有腾讯会议端的监考,还要求在考试电脑上要安装OBS录屏软件,进行全程录屏.最后,将两份录制的 ...
- [转]家庭上网安装与设置教程
http://3jj.jxxhdn.com/jswz/aq/106.html 在上硬件课时,经常有学生会问到如果家里买了一台电脑该如何上因特网的问题.因为在当今社会,互联网的出现给我们的工作.生活.娱 ...
- 【DBeaver】免费的数据库管理工具DBeaver的安装与使用教程
DBeaver是免费和开源(GPL)为开发人员和数据库管理员通用数据库工具. 一.软件下载与安装 官方网站:https://dbeaver.io/ 自己使用的软件包:DBeaver安装软件包 Gith ...
- 免费Xshell、Xftp下载、安装、连接教程【图文】详细
文章目录 一.下载 二.安装 三.连接服务器 首先推荐一款,某一些功能界面多样性,数据可视化程度比Xshell还要好的远程连接工具finalShell 推荐理由:下载简单.可视化程度更高比较适合新手. ...
- vmware虚拟机安装win7_虚拟机VMware安装使用设置教程
虚拟机 虚拟机是通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统.在虚拟机中,你可以安装各种操作系统.组建局域网等,模拟的完全是一个真实系统环境,不会对宿主机造成危害 ...
- Visual Studio2022安装及设置教程
文章目录 前言 一.下载链接 二.使用步骤 1.下载器.下载速度0KB解决方法 2.设置 前言 目前网上只能下载 Visual Studio 2022(VS 2022),VS 2022 ...
- Acer 4750 安装黑苹果_黑苹果Mac mini驱动安装与设置教程
昨天我们介绍了"华硕H110T +i3 8100T 组装黑苹果Mac mini安装教程 "的教程,装过黑苹果的朋友都知道,很多朋友都已经把系统装好了,可是找驱动这个问题却难倒了一大 ...
- win7安装打印机 计算机,WIN7安装网络打印机设置教程
我们大家在日常办公中经常会遇到局域网共享打印机的很多问题,现在简单的吧我安装打印机过程分享给大家! 希望对大家有用! 首先WIN7系统连接好打印机 共享时候有时候会出现无法保存打印机设置,操作无法完成 ...
最新文章
- python必背内容-学 Python 必背的42个常见单词，看看你记住了几个？
- 《ES6标准入门》49~68Page 数值的拓展 数组的拓展
- SVG动画.animateTransform
- pandas 或者字段值_pandas用法总结
- java web 手机验证_JAVA-WEB，好知网，登录注册，手机验证
- 通过options探测服务器信息,WEB服务器启用了OPTIONS方法
- 海龟交易法则06_掌握优势
- linux搭建博客day5-安装Mysql
- 阿里云服务器企业该如何选择
- 三级网络技术无纸化模拟软件 (未来)教育
- 遇见逆水寒如何在电脑上玩 遇见逆水寒模拟器玩法教程
- 10.4. 嗅探工具
- 16年，平凡而又收获的一年
- 大言不惭 swank? talk about sth or speak too confidently
- 计算机有哪些知识,电脑基本操作知识有哪些
- springboot大学生青年志愿者管理的设计与实现毕业设计源码101605
- 3-综合案例：月福首页-多媒体-图片热点-框架
- linux环境下从路径字符串中截取目录和文件名信息
- 编写一个移动的游戏背景（含素材视频教程）
- Android传感器Motion Sensor开发实验