Shopify免费产品评价应用 Product Review安装和设置教程_shopify如何导入亚马逊评价-程序员宅基地

技术标签: Shopify  网络互联  

 

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">&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的客服,让他们帮你完成以上的设置,不要在这些事情上浪费时间。

 

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

 

进入到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工具,来提高网站的转化率。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/waimaob2c_com/article/details/107914293

智能推荐

JS整除运算_js 整除-程序员宅基地

文章浏览阅读4.8k次。0x00 方法Math.ceil(x/y); // 向上整除 4/3=2;Math.floor(x/y); // 向下整除 4/3=1;Math.round(x/y); // 四舍五入 5/2=3 5/4=1;parseInt(x/y); // 丢弃小数部分,保留整数部分; 0x01 性能function fn1(x, y){let t = Math.ceil(x/y)..._js 整除

C语言中char和char *a[]和char (*a)[]-程序员宅基地

文章浏览阅读4.6k次,点赞5次,收藏22次。*char *a[]:数组a是一个指向char类型的指针数组,a里面的每个元素(char *类型)都指向一个字符串char (a)[]:a是一个指向数组的指针,里面的元素都是char类型 int main() { char str[4][12] = {&amp;quot;aa&amp;quot;, &amp;quot;bbb&amp;quot;, &amp;quot;cccc&amp;quot;, &amp;quot;d&_char (*a)[]

统信UOS手动更新系统时备份失败,如何用命令自动更新系统_统信系统1060更新备份失败-程序员宅基地

文章浏览阅读1.4w次。统信UOS系统的每次更新都会适配更多的东西,所以更新系统是很有必要的。1.在 设置 可以检查更新系统。正常流程是 检查更新-下载文件-安装更新-备份文件-更新完毕 重启即可。2.但是一些用户就不会那么顺利,他们在安装更新过程中 系统备份失败 ,导致系统无法正常更新。 此时我们的手动更新系统就行不通了,只能用命令更新系统了。打开电脑终端 输入命令 sudo apt update 还有用户密码 检查更新系统检查更新完,再输入 sudo apt dist-upgrade 进行系统更新,正常更_统信系统1060更新备份失败

python--(operate excel → xlwt )_xlsxoperate python方法-程序员宅基地

文章浏览阅读339次,点赞2次,收藏3次。python生成excel表格:1.在编译器中导入操作excel的包 ----> xlwt (操作写入excel) (在虚拟坏境运行 pip install xlwt 或在编译环境搜xlwt安装)2.运行如下代码:1:生成一个excel表格:import xlwt# 创建一个workbook设置编码workbook = xlwt.Workbook(encoding='utf-8..._xlsxoperate python方法

Tutorial for building J2EE Applications using JBOSS and ECLIPSE-9_the standard for deploying soap web service-程序员宅基地

文章浏览阅读2k次。Chapter 9 . Creating Web Services :Web services promises to be the next generation of software development. In essence, a web service is a means of interfacing to web or enterprise application_the standard for deploying soap web service

Trace - 一文读懂tracepoint_trace point-程序员宅基地

文章浏览阅读7k次,点赞2次,收藏20次。tracepoint是Linux内核静态定义的一些调试点,它分布于内核的各个子系统中,然而在实际工作中可能很多人并没有用过这个功能,或者对它没有太多了解,那么就通过本文一起来了解下tracepoint吧。tracepoint是内核预先定义的静态探测点,可以用于挂载钩子函数来做trace。当没有钩子函数时,它几乎没有损耗,只有挂载了钩子函数才会真正启用trace功能。这个钩子函数可以由开发者编写内核module来实现,并且需要在钩子函数中获取我们调试所需要的信息并导出到用户态,这样我们就可以获取内核运行时的信_trace point

随便推点

Acme CAD Converter 2015 8.7.0.1440 Multilingual 1CD CAD图形文件转换和查看软件-程序员宅基地

文章浏览阅读1.8k次。Acme CAD Converter 2015 8.7.0.1440 Multilingual 1CD CAD图形文件转换和查看软件一款专业的CAD图形文件转换和查看软件,支持DWG DXF DWF ( AutoCAD v2.x-2013)格式转换,输出矢量格式支持DWG, DXF, PDF,WMF,SVG, HPGL, PDF, CGM, EPS。输出光栅格式支持BMP, GIF_acme cad converter2015

计算机组成原理运算器设计实验之8位可控加减法电路设计_第1关:8位可控加减法电路设计-程序员宅基地

文章浏览阅读2.5w次,点赞36次,收藏152次。这个实验的本意是用一位全加器和逻辑门搭建电路。用全加器和异或门也可以完成。这里涉及两个“异或”的知识点:1.位变量a和0异或,结果为a;和1异或,结果为~a(取反)2.溢出标志可以用最高位(符号位)进位和次高位进位异或得到。即这两个进位相同则不溢出,否则溢出。步骤1步骤2:可以通过复制拖拽得到如下图步骤3,连线如图步骤4,保存并复制保存代码步骤5将复制的代码粘贴到Educoder实验的代码框。..._第1关:8位可控加减法电路设计

Netty 解决 TCP 粘包/拆包_netty tcp 多个命令合并到一起啦-程序员宅基地

文章浏览阅读198次。在RPC框架中,粘包和拆包问题是必须解决一个问题,因为RPC框架中,各个微服务相互之间都是维系了一个TCP长连接,比如dubbo就是一个全双工的长连接。由于微服务往对方发送信息的时候,所有的请求都是使用的同一个连接,这样就会产生粘包和拆包的问题。本文首先会对粘包和拆包问题进行描述,然后介绍其常用的解决方案,最后会对Netty提供的几种解决方案进行讲解。这里说明一下,由于oschina将“jie ma qi”认定为敏感文字,因而本文统一使用“解码一器”表示该含义1. 粘包和拆包产生粘包和拆包问题的主要_netty tcp 多个命令合并到一起啦

Twitter的分布式自增ID算法snowflake (PHP版本)_twitter/snowflake php-程序员宅基地

文章浏览阅读659次。twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移到Cassandra,因为Cassandra没有顺序ID生成机制,所以开发了这样一套全局唯一ID生成服务。snowflake的结构如下(每部分用-分开):0 - 0000000000 0000000000 0000000000 0000000000 0 - 00000 - 00000 - 000000..._twitter/snowflake php

Linux一键部署duckchat,宝塔面板部署DuckChat(翻译:鸭信)- 一个简约好用的网络聊天平台...-程序员宅基地

文章浏览阅读1.1k次。演示图介绍DuckChat 是一套完整的私有即时通讯(instant message)解决方案,含服务器端程序、客户端(含iOS、Android、PC等)程序。经过DuckChat,站点管理员可以快速的在自己服务器上搭建起一套私有的即时通讯服务,用户可以运用客户端连接至此服务器进行信息交互。但是不知道怎么没人维护了,官网也没了,装置文档一个找不到。不过还能再GitHub上看到项目,而且最近的更新是..._duckchat安装报错

Android Ant 和 Gradle 打包流程和效率对比-程序员宅基地

文章浏览阅读3.7k次。一、Ant 打包:(下载ant、配置环境变量就不说了)1、进入命令行模式,并切换到项目目录,执行如下命令为ADT创建的项目添加ant build支持:android update project -p . -t "android-17"2、build脚本默认target是help,所以会显示如上信息,修改target为debug或release就可以像无ant时一样编

推荐文章

热门文章

相关标签