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

下图就是使用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:///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./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./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<><><=0&&(clearinterval(c),document.getelementbyid('ct836').innerhtml='order reservation="" ended.',e="Date.now()+1e3)}a();var" c="setInterval(a,1e3)}var" wnd="">';wnd.indexOf('checkout')>-1&&(window.onload=function(){if(wnd.indexOf('checkout')>-1&&(dsXt=document.getElementById('checkout_reduction_code'),document.body.insertAdjacentHTML('afterbegin','

1.Customer

2.Shipping

3.Payment

'),-1===wnd.indexOf('thank_you'))){document.getElementsByClassName('main__content')[0].insertAdjacentHTML('afterbegin','

Your order is reserved for minutes!

');var e=600,t=Date.now(),s=rdC('pRtC');s?t

'+pSettings.highDemandText+'

'),''!=pSettings.discountText&&dsXt&&dsXt.setAttribute('placeholder',pSettings.discountText),document.getElementsByClassName('step__footer')[0].insertAdjacentHTML('afterend','

Guaranteed safe and secure checkout!

'),document.getElementsByClassName('order-summary__sections')[0].insertAdjacentHTML('beforeend','

Why choose us?

'+pSettings.whyUsTitle1+'

'+pSettings.whyUsText1+'

'+pSettings.whyUsTitle2+'

'+pSettings.whyUsText2+'

')}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:///thread-82-1-1.html

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

---