shopify网站转化率优化之结账页checkout优化

       昨天分享了“利用GOOGLE地图API实现shopify结账页checkout地址自动填写地址字段”是个非常屌的功能，但shopify默认的结账页checkout是这样的如图 [caption id="" align="alignnone" width="1920"] shopify默认结账页电脑版[/caption] 上面是电脑版的，手机版默认shopify结账页如图 [caption id="" align="alignnone" width="380"] shopify默认结账页手机版[/caption] 从上面可以看出来shopify默认结账页面要分3步流程走，大家都知道跨境电商网站转化率的提高其中之一就是尽可能让客户尽快到付款，从产品详情页或专题页，到结账页，然后就到信用卡或PAYPAL支付最好中间不要跳转，要不然步骤越多顾客越有可能中途放弃购物车，这也就是为什么平均购物车放弃率高达67%的原因了，至少要让客户明白的知道我们的外贸商城购物流程不麻烦，因此非常有必要做shopify结账页的优化以提高网站转化率。

shopify网站转化率优化之结账页checkout优化：

通常shopify的Checkout结账页是这个样子的 [caption id="" align="alignnone" width="1151"] shopify默认结账页电脑版[/caption] 要填3步走，很麻烦，不像去年我用opencart帮我们公司做功能性外贸商城有一页结账功能onepage checkout功能我用opencart Onepage Checkout一页结账让老外快速付款来不及后悔的亲身验证，只用一个页面就到最终付款，不需要这么多步，只是到现在为此我还没有找到shopify一页结账onepage checkout的功能,可能有相关的插件吧，最终优化后的shopify结账页效果如图 [caption id="" align="alignnone" width="1382"] shopify结账页优化后截图[/caption] 包括手机版的优化后的效果图如下 [caption id="" align="alignnone" width="297"] shopify结账页优化后手机端截图[/caption] 和 [caption id="" align="alignnone" width="299"] shopify结账页优化后手机端[/caption] 修改的shopify结账checkout页面包括如下内容： 修改之后的checkout page付款页面变化的好处在哪里？ ✔把支付流程的进度条拉到了最顶端，直观感受更明显，让购买者清晰的知道自己已经走到了那一步了。 ✔在付款页面增加了倒计时的功能，对转化和下单起了积极的刺激作用。 ✔continue to shipping method下面增加了很多安全支付的图标，增加客户的信心。 ✔在优惠码的框里面显示出口语化的名字，使优惠更加清晰明了。 ✔也在价格下面增加了Why Us信息，通过介绍我们能够提供更多的服务，增强客户的购买信心。

shopify网站转化率优化之结账页checkout优化代码：

第一步✔点击Online Store—Preference ✔继续点击Google Analytics—Additional Google Analytics JavaScript, 「David锅微信：32661099」，输入一串已经写好的代码。 如图一所示 [caption id="" align="alignnone" width="1536"] shopify后台添加结账页优化代码的地方[/caption] 第二步shopify结账页checkout倒计时HACK ON STERIOIDS功能，提示顾客还有多少时间订单将取消，营造紧张感促销客户赶快付款，如图 [caption id="" align="alignnone" width="671"] shopify结账页倒计时[/caption] 实现该结账页倒计时的代码如下： if(typeof Checkout === 'object'){if(typeof Checkout.$ === 'function'){(function (src) {var tagName = 'script', script = document.createElement(tagName);script.src = src;var head = document.getElementsByTagName('head')[0];head.insertBefore(script, head.childNodes[0]);})('https://conversionpirate.com/pirate-countdown-trust.js');}} 完整的shopify结账页checkout优化代码如下： var pSettings={ /*ConversionPirate.com*/ 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", 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.οnlοad=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"))){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].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].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].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.insertAdjacentHTML("afterbegin",chsg)),wnd.indexOf("previous_step=shipping_method")>-1&&(b1j.className="s8 s8c",b2j.className="s8 s8c",b3j.className="s8 s8c",c1j.insertAdjacentHTML("afterbegin",chsg),c2j.insertAdjacentHTML("afterbegin",chsg)),wnd.indexOf("thank_you")>-1&&(b1j.className="s8 s8c",b2j.className="s8 s8c",b3j.className="s8 s8c",c1j.insertAdjacentHTML("afterbegin",chsg),c2j.insertAdjacentHTML("afterbegin",chsg),c3j.insertAdjacentHTML("afterbegin",chsg))});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); 经过调整和优化后的页面，包括PC端和移动端的预览效果，内容比较丰富，而且给人的感觉可信度非常的高，也把PayPal的快速支付放在了最明显的位置，增强付款信心。修改完之后，目前网站的成功支付率确实得到了提高，大家也可