Shopify网站客户付款页面Checkout Page的修改优化方法

如果你的Shopify网站流量数据中有很多被遗弃的订单，就是客户已经到达付款页面，但是没有完成付款，那么这个时候你就要认真其中的原因了，是不是因为没有免邮，并且邮费比较高？如果不是的话，你可以考虑优化下你的付款页面。Shopify的29美金79美金每月月租的账户修改付款页面的权限是有限的，仅限于字体的修改，背景颜色，背景图片的修改等等。不过好在ConversionPirate的Karlo Bradica通过另外一种方法实现了对Checkout页面的修改，并且收到了广泛的好评。（Karlo Bradica就是Shopify网站里面很流行的大转盘Wheelio的开发者，ConversionPirate是他的博客，推荐大家关注）

下图就是使用Karlo的方法修改掉Checkout页面之后的显示效果：

下图是未经过修改的大部分Shopify卖家的付款页面的样子：

经过修改之后的Checkout页面，在手机上查看的时候显示效果如下图:

点击Show Order Summary之后的样子，会显示出Enter Discount Code的内容

不显示Enter Discount Code输入框时候的显示效果

Shopify付款页面修改前后的对比

修改之后的Checkout页面

• 将下单进度条移动到了页面的顶部，直观感受更好一些。客户能够更清晰的了解到自己操作到了哪一步。

• 在结款页面新增加了倒计时功能，倒计时功能对订单的转化还是有积极的刺激影响的。

• 在Continue to Shipping Method按钮下方添加了Trust Badge图标，增加客户的信任感

• 修改优惠码输入框里面的默认文字，更加的口语化，清楚明了

• 在价格下方添加了Why US信息，通过提供更多的服务介绍在客户心中建立更多的信任

如何修改呢Shopify Checkout Page呢？

依次打开Shopify网站的后台 > Online Store > Preferences > Google Analytics 找到 Additional Google Analytics JavaScript 输入框

然后将以下代码复制粘贴到上面所说的Additional Google Analytics JavaScript输入框中 然后保存就可以了。以下代码本站不提供复制功能，请打开作者的博客页面 https://conversionpirate.com/shopify-checkout-hack-3-0/ 然后在页面中会提示你通过提交你的邮箱地址订阅他的博客的方式来获取代码（就是下面的代码了）提交就显示完整内容了。推荐大家订阅他的博客，博客内容还是相当不错的，里面还有其他几篇能够很好的提高Shopify买家用户体验，从而提高我们Shopify网站转化率的方法技巧，值得花时间好好去研究下。

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: "45-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"))){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);

另外大家也可以对以上代码里面的标红的内容进行修改，以适应自己的实际需求，例如 progressBg: '#23468c', 表示的是顶端进度条的背景颜色是#23468c，你可以参考RGB颜色表进行颜色的调整，适合你网站的整体颜色风格。其中的文字内容和图片对上面的红色字体部分的内容进行相应的调整就可以了。

目前看到的大家的反馈还是不错的，如果你的订单转化率现在不是特别的理想，不妨试试上面的方法，建议用A/B Test的方法去做测试，简单来书，就是说7月份用Shopify原生的Checkout页面，8月份用Karlo的方法改成“优化”后的Checkout页面，两个月过后，9月份对比7月份和8月份所有到达付款页面的流量转化率哪个更高一些，那就说明哪个的checkout页面更适合你。

关于这一方法使用过程中的问题，可以来Shopify论坛上的专帖进行讨论 - https://waimaob2c.cn/thread-82-1-1.html

关于Shopify付款页面的基本设置，可以查看文章 - Shopify开店教程-Shopify网站Checkout付款页面设置

点击“阅读原文”跳转到WaimaoB2C.com，获取文中的链接地址，以及更多Shopify建站优化方面的内容