昨天分享了“利用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.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); 經過調整和優化后的頁面，包括PC端和移動端的預覽效果，內容比較豐富，而且給人的感覺可信度非常的高，也把PayPal的快速支付放在了最明顯的位置，增強付款信心。修改完之后，目前網站的成功支付率確實得到了提高，大家也可