用户购物流程优化这样做,你知道吗?(下)
前情提要:上篇我们讲到用户购物流程优化中的前三步,分别是 自定义动态结款按钮 / 悬浮加入购物车按钮 / Upsell App的运用。
前三步主要是从缩短顾客考虑时间,最大程度上方便购物的角度出发,后三步我们的优化着重点始终在“放心”这个角度。
不管你面对的客户是国内的还是国外的,他们都是普通消费者。当他们花钱买东西的时候,都会关心自己的支付是否是安全的,有没有被欺骗,尤其是独立站,因此,我们需要在网站几个关键的地方留下安全图标。
除了对于支付的安全考虑外,用户还会考虑产品问题。大家都希望自己想购买的产品是被别人认可的,是很多人购买的,因此,对于一个没有品牌优势的独立站来说,产品评论就不可或缺了,如果能在商品描述中加入社交平台上大家对于产品的互动和追捧的截图,那就最棒了。
最后一步是在用户付款时,Basic级别的Shopify用户是无法自定义Checkout页面的,因此我们需要用一些方法将我们的Checkout页面装饰的内容更丰富一些,不能在革命即将成功的最后一步前功尽弃。
流程优化六大步
1.快速动态结款按钮
2. 悬浮加入购物车按钮
3. Upsell App的运用
4. 安全图标的巧妙设置
5. 产品评论App的使用
6. Checkout页面的优化
4. 安全图标的巧妙设置
安全图标的设置,主要是在于放置的地点。把握三个核心原则,一是有支付图标的地方要有安全图标,二是加入购物车按钮的地方需要有安全图标,三是用户完成支付的时候需要有安全图标。最好是在购物车下面就将支付图标以及安全图标放在一起,如下图。
很多人更关心的是,如何将安全图标放在指定位置。每个人想要放置图标的位置是不一样的,我们这里以放在加入购物车按钮下方为例,参考下面的步骤。
1.制作图片。首先需要安装Mcafee Secure App,默认的Mcafee Secure图标是放在页面右下角的,不是那么显眼。如果自己会简单的PS,可以将自己网站下方的支付图标截取出来,然后将安全图标拼成一起,组合成一张组合图片,背景为透明,格式为png后缀。
2.上传图片。点击Settings -> Files -> Upload files,将自己刚刚制作好的图片上传,得到一个图片的URL地址,将地址复制下来。
3.添加图片地址链接。点击Online Store -> Themes -> Current Theme -> Actions -> Edit code,找到Sections -> product-template.liquid,具体文件位置我是以Brooklyn为例。找到如下图中的代码,在箭头指向的地方,添加下面那一行代码。添加完成后,点击Save保存,最后刷新页面,就能看到加入购物车按钮下方出现了我们刚刚上传的那张图片。
如果不能快速找到,可以尝试Ctrl + F搜索"button",就能快速定位了。如果在Sections中没有找到product -template这个文件,可以尝试找product-form等文件。
5. 产品评论APP的使用
产品评论App基本上是所有的新站必备的一种类型的App。如何选择?如果是一些电子产品类 / 生活用品类等对图片效果要求不高的产品,可以选择简单的不用添加图片的产品评论,如Shopify官方开发的product reviews,可以自己在后台一次性批量添加评论。
如果是彩妆类 / 饰品类 / 珠宝类/ 服装类等对图片效果要求比较高的产品,需要添加图片评论,就需要使用可以添加图片的评论,毕竟视觉冲击要比文字更有效果。给大家推荐两款图片评论App,都是免费的,但是免费级别有限制。
1.Ryviu
Ryviu的评论来源有两种,自己导入编辑,或者是从Aliexpress或者Amazon导入评论,可自行对评论进行编辑,而不是大部分的的评论App那样通过邮件邀请真实买家进行评论,也因此这款App并未在App市场上架。
推荐理由:
搭配其谷歌插件可以一键导入Aliexpress/Amazon评论;
可以一键更新review,让网站看起来比较活跃;
以商家身份回复留言,增加访客信任。
弊端:
这款App并未在Shopify市场上架,安装时,需要去到官网进行安装,https://www.ryviu.com,因此担心店铺信息泄露的商家会有顾虑;
免费级别的用户每个产品只能最多添加20条评论。
2.Rivyo
Rivyo是一款在App市场正式上架的产品评论App,可以在App市场直接搜索,目前所有功能都是免费的,包含图片评论。
推荐理由:
所有功能完全免费;
评论上增加了社交媒体互动;
在产品评论上增加了用户提问模块,商家可以解答;
手动添加评论到首页产品以及Collection页面的文档非常清楚;
支持评论批量导入导出。
弊端:
无法支持从Aliexpress和Amazon的产品评论导入,批量可以通过CSV文件导入。
大家可以根据自己的需求来进行区分选择,各有利弊,同时,这两款App的产品评论都无法在搜索引擎搜索时体现出来,毕竟是免费的嘛,介意这一点的可以使用付费App,Loox或者是Judge.me.
6. Checkout页面优化
Checkout页面的优化,很多老卖家都做过,也都看过一篇文章,最后优化之后的效果如下图:
主要做了如下改变:
在顶部添加付款进度条
订单倒计时
继续结账按钮下方添加安全图标
Discount黏贴处描述更细致
给顾客选择我们的理由
电话号码处增加了细节描述
在原来的内容基础上,我增加了电话号码处的描述,因为很多测试表明,用户是不愿意提供自己的电话号码的,认为这是自己的隐私,也因为这个问题而放弃购买,如果不需要用户提供电话,会增加转化率,但有些国内物流必须要有用户电话才能发货。因此,我在Phone处,增加了后面一句话,变成Phone(Get Support Via Message Text),能在一定程度上减轻用户的担心。
如何添加呢?点击Online Store -> Preferences -> Google Analytics,在下图箭头处将代码黏贴进去。
需黏贴的代码:
var pSettings={
progressBg: '#23468c',
progressBg2: '#d9e3f7',
highDemandText: "An item you ordered is in high demand. No worries, we have reserved your order.",
discountText: "Enter your discount code here",
phoneText: "Phone(Get Support Via Message Text)",
whyUsImg1:'https://cdn.shopify.com/s/files/1/1319/2435/t/4/assets/money-back.png',
whyUsTitle1: "30-day Satisfaction guarantee with Money Back",
whyUsText1: "If you're not satisfied with your products we will issue a full refund, no questions asked.",
whyUsImg2:'https://cdn.shopify.com/s/files/1/1319/2435/t/4/assets/mail-truck.png',
whyUsTitle2: "Over 34.245 successfully shipped orders",
whyUsText2: "We made as much happy customers as many orders we shipped. You simply have to join our big family.",
}
function crC(e,t,s){if(s){var n=new Date;n.setTime(n.getTime()+60*s*1e3);var i="; expires="+n.toUTCString()}else i="";document.cookie=e+"="+t+i+"; path=/"}function rdC(e){for(var t=e+"=",s=document.cookie.split(";"),n=0;n<s.length;n++){for(var i=s[n];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(t))return i.substring(t.length,i.length)}return null}function eSC(e){crC(e,"",-1)}function stTM(e,t,s){var n,i,d;function a(){n=t-((Date.now()-e)/1e3|0),d=n%60|0,i=(i=n/60|0)<10?"0"+i:i,d=d<10?"0"+d:d,s.textContent=i+":"+d,n<=0&&(clearInterval(c),document.getElementById("ct836").innerHTML="Order reservation ended.",e=Date.now()+1e3)}a();var c=setInterval(a,1e3)}var wnd=window.location.href,chsg='<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="#fff"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>'; wnd.indexOf("checkout")>-1&&(window.onload=function(){ if (wnd.indexOf("checkout")>-1&&(dsXt=document.getElementById("checkout_reduction_code"),document.body.insertAdjacentHTML("afterbegin",'<div class="content prH7"><div class="wrap"><div class="ar64"><div id="sp1" class="s8 s8c"><span id="spn1">1.Customer</span></div><div id="sp2" class="s8"><span id="spn2">2.Shipping</span></div><div id="sp3" class="s8"><span id="spn3">3.Payment</span></div></div></div></div>'),-1===wnd.indexOf("thank_you"))){if(document.getElementsByClassName("main__content")[0]){document.getElementsByClassName("main__content")[0].insertAdjacentHTML("afterbegin",'<div><div id="ct836" style="display:block;background:#fff5d2;padding:10px 20px;border:1px solid #fac444;font-size:14px;color:#2c2c2c;font-weight:bold;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; margin:5px 0px 20px 0px">Your order is reserved for <span id="time"></span> minutes!</div></div>')};var e=600,t=Date.now(),s=rdC("pRtC");s?t<s?e=(s-t)/1e3:(eSC("pRtC"),crC("pRtC",Date.now()+1e3*e,e+1)):crC("pRtC",Date.now()+1e3*e,e+1),display=document.querySelector("#time"),stTM(t,e,display),document.getElementsByClassName("main__content")[0] && document.getElementsByClassName("main__content")[0].insertAdjacentHTML("afterbegin",'<div style="width:100%;display:table"><div style="display:table-cell;vertical-align:middle"><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/4/assets/flame_24.png?10413921915994220473"></div><div style="font-weight:bold;padding-left:5px">'+pSettings.highDemandText+"</div></div>"),""!=pSettings.discountText&&dsXt&&dsXt.setAttribute("placeholder",pSettings.discountText),document.getElementsByClassName("step__footer")[0] && document.getElementsByClassName("step__footer")[0].insertAdjacentHTML("afterend",'<div style="width:100%;display:block;padding-top:10px"><span style="font-size:11px;line-height:12px;font-style=italic;float:right;width:100%;text-align:right">Guaranteed safe and secure checkout!</span><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/4/assets/paybadges.jpg" style="max-width:250px;float: right;margin-top: 5px;"></div>'),document.getElementsByClassName("order-summary__sections")[0] && document.getElementsByClassName("order-summary__sections")[0].insertAdjacentHTML("beforeend",'<div style="position:relative;padding:10px 0px"><div class="wyustit" style="position:relative;z-index:1;text-align:center"><span style="background:#fafafa;padding:0 15px">Why choose us?</span></div><div style="display:table;vertical-align:middle;width:100%;border-spacing:0px 20px"><div class="wyuscs"><div class="wyuscs1"><img src="'+pSettings.whyUsImg1+'"></div><div class="wyuscs2"><span>'+pSettings.whyUsTitle1+"</span><p>"+pSettings.whyUsText1+'</p></div></div><div class="wyuscs"><div class="wyuscs1"><img src="'+pSettings.whyUsImg2+'"></div><div class="wyuscs2"><span>'+pSettings.whyUsTitle2+"</span><p>"+pSettings.whyUsText2+"</p></div></div></div></div>")}b1j=document.getElementById("sp1"),b2j=document.getElementById("sp2"),b3j=document.getElementById("sp3"),c1j=document.getElementById("spn1"),c2j=document.getElementById("spn2"),c3j=document.getElementById("spn3"),wnd.indexOf("previous_step=contact_information")>-1&&(b1j.className="s8 s8c",b2j.className="s8 s8c",c1j && c1j.insertAdjacentHTML("afterbegin",chsg)),wnd.indexOf("previous_step=shipping_method")>-1&&(b1j.className="s8 s8c",b2j.className="s8 s8c",b3j.className="s8 s8c",c1j && c1j.insertAdjacentHTML("afterbegin",chsg),c2j && c2j.insertAdjacentHTML("afterbegin",chsg)),wnd.indexOf("thank_you")>-1&&(b1j.className="s8 s8c",b2j.className="s8 s8c",b3j.className="s8 s8c",c1j && c1j.insertAdjacentHTML("afterbegin",chsg),c2j && c2j.insertAdjacentHTML("afterbegin",chsg),c3j && c3j.insertAdjacentHTML("afterbegin",chsg))});if(document.getElementById('checkout_shipping_address_phone')){document.getElementById('checkout_shipping_address_phone').placeholder=pSettings.phoneText};var b7=document.createElement("style");b7.type="text/css";b7.innerHTML='.main ul.breadcrumb{display:none!important}.content.prH7{padding:8px 0}.ar64{width:100%}.ar64 .s8{font-size:14px;text-align:center;color:#fff;cursor:default;margin:0 3px;padding:9px 10px 9px 30px;float:left;position:relative;background-color:'+pSettings.progressBg2+';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all 2s ease;width:20%}.ar64 .s8:after,.ar64 .s8:before{content:" ";position:absolute;top:0;right:-17px;width:0;height:0;border-top:19px solid transparent;border-bottom:17px solid transparent;border-left:17px solid '+pSettings.progressBg2+';z-index:2;transition:border-color .2s ease}.ar64 .s8:before{right:auto;left:0;border-left:17px solid #fff;z-index:0}.ar64 .s8:first-child:before{border:none}.ar64 .s8:first-child{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.ar64 .s8 span{position:relative}.ar64 .s8.s8c{color:#fff;background-color:'+pSettings.progressBg+'}.ar64 .s8.s8c:after{border-left:17px solid '+pSettings.progressBg+'}.ar64 .s8 svg{position:absolute;left:-17px;top:2px}.ar64 .s8:first-child svg{left:-16px}.wyustit:before{border-top:1px solid #dfdfdf;content:"";margin:0 auto;position:absolute;top:50%;left:0;right:0;bottom:0;width:100%;z-index:-1}.wyuscs{display:table-row;padding-bottom:20px}.wyuscs1,.wyuscs2{display:table-cell;vertical-align:middle}.wyuscs1{width:20%;font-size:15px}.wyuscs2{width:80%}.wyuscs2 span{font-size:14px;font-weight:700;color:#666}.wyuscs2 p{font-size:12px;color:#777}@media(min-width:450px){.ar64 .s8{min-width:29%}.ar64 .s8 svg{position:relative!important;top:2px!important;left:-10px!important}}@media(max-width:750px){.ar64 .s8{font-size:11px}.ar64 .s8:first-child{padding-left:20px}}';document.body.appendChild(b7);
上面代码中显示在页面上的内容都是可以进行更换的,如果有更换的伙伴可以自己对照着内容进行更换。
PS:如果店铺后台既想做地址自动查询匹配,又想做页面优化,可以将原来放在GA Javascript处的代码移到Settings -> Checkout ->Additional scripts,记得在原来的代码前后分别添加<scripts>自动匹配地址代码</scripts>。
以上就是今天给大家分享的关于用户购物流程优化的后三条。如果对于我们分享的内容有疑问,记得联系我们客服QQ哦!2790641050。
如果觉得小编的文章还可以,动动你的手指,帮忙关注并转发,谢谢!
最后,给大家介绍以下我们谷歌插件集的新功能 -SFS Plugin Collections。
插件链接:https://chrome.google.com/webstore/detail/sfs-plugin-collections/bjckpjbkhlogjmnanoghmfodjoopambh
除了上周跟大家分享的可以解决登录问题外,本周SFS的技术团队又开发了一个新功能,针对在1688上寻找货源的卖家来说,只要在任意一张图片上点击右键,会出现"1688找货"字样,就可以在1688上以图找货了,非常方便。
后续,我们的插件会不定期更新一些小功能,基本都是跟Shopify有关的。相关更新都会通过公众号以及我们的官方QQ群发布,请大家及时关注哦。
当然,如果你有需求,也可以微信给我们留言,我们评估后如果认为是大多数用户都需要的功能,我们也会加到我们的插件集里面去,造福大家。
我只想说,做Shopify技术服务,我们是认真的。
除非注明,文章均为 SFS技术服务 原创,转载请注明来源,谢谢!
SFS为Shopify全方位专业技术服务供应商,我们提供服务,解决问题,让每一位Shopify卖家不再为技术问题而深感烦恼。
我们的网站:www.shopifyfs.com
商务合作: bd@sfsup.com
免费Shopify技术咨询QQ群:632205694
联系我们: 2790641050