这两天始终没预览该文，忙着家装FreeNAS他们公司19年新开始的shopify外贸服饰京东工程项目，这两天始终在做商品页的强化，即便商品页是以后他们做广告买回网络流量的最后降落页，不管中间有没专题页，打的FB，谷歌广告买回的网络流量最后要到商品详情页去成交，因而前期的强化是必须的

shopify降落页landing page强化：

上载完商品后，是商品详情页也是主要买回网络流量后的降落页Landing page的强化了，那个直接事关到中文网站转换率，要强化的太多了，包括中文网站速率等，这儿写我这两天主要做的3个机能，一个是加进了带图和音频的该文，那个是用应用程序的形式同时实现的，没选择原本的shopify该文应用程序Yotpo Reviews是因为而后才出现，说是免费其实只有50个订单的采用限制，最重要的是没带音频该文的机能，因而而后换成订阅的shopify带图带音频该文应用程序Judge Product Reviews效用总的来看

另外2个机能是我这次准备撷取出的机能，原本是用应用程序形式同时实现的第三阶段和网购安全可靠保证信用风险纹章Trust Badge机能，结论引致shopify降落页打开速率快的一逼，何况如果能用标识符同时实现的机能，就没理由再用shopify应用程序了，我个人认为shopify应用程序推升中文网站速率的其原因有2个，一个是应用程序不是跟中文网站shopify在同一伺服器，shopify的伺服器看IP门牌号是在加拿大，而应用程序的存放门牌号完全是作者的伺服器，不知道在这儿，2个无此同一伺服器就有速率推升，第二个其原因是同一应用程序可能有许多采用该应用程序的shopify店铺同时允诺调用该应用程序，速率德博瓦桑县才奇怪了。我现在是刚接触shopify还不是十分熟悉太的标识符，要不然我连订阅shopify带图带音频该文应用程序Judge Product Reviews都要拿掉，在中国能明显感到那个该文的读取速率要比shopify商品页其他部分读取慢。上面就撷取布季谢标识符形式替换原本应用程序机能的经验。

shopify科季夫按键下网购安全可靠保证信用风险纹章Trust Badge同时实现标识符：

独立站相比于Amazon这种平台给人的信用风险度总之远不如，为的是让来到他们中文网站的网友相信他们中文网站的网购是安装的，在shopify商品详情页科季夫上面加进网购安全可靠保证纹章Trust Badge是十分必要的，原本他们是用应用程序的形式同时实现那个机能，结论速率快的要命如图一所示

手机版打红×的地方甚至表明不出，本来是为的是增加顾客体验的，速率快成这样的应用程序反而会赶走顾客，其原因是我前面说的应用程序伺服器不跟中文网站一起和用那个应用程序的但他却允诺了引致的速率快，因而他们把网购安全可靠保证信用风险纹章Trust Badge相片上载到他们他们的shopify中文网站再表明在科季夫按键上面就能了，速率基本上是秒开，同时实现的过程也是比较简单的

首先在shopify商品加进这儿上载两张他们的网购安全可靠保证信用风险纹章Trust Badge相片，那个网上许多，最好是根据他们支持的支付形式做两张图，把这张加进到商品编辑款，德博瓦桑县，然后看html标识符就能得到那个相片的路径了，再将此段标识符加进到商品模版科季夫上面就能了，比如我的标识符形式是

这样就同时实现了非应用程序形式product-template.liquid文件科季夫标识符上面第358奉召加进相片标识符

SHOPIFY商品网页第三阶段标识符：

在商品网页加进第三阶段机能目的也是为的是促使顾客赶快付款购买，同时实现这一个第三阶段机能的shopify应用程序许多，如果能够用标识符同时实现总之就不要用应用程序咯，至少速率快了不止一倍，而且还能按他们的情况定制第三阶段效用，这儿就撷取第三阶段标识符给大家。

标识符加进位置跟前面的加进科季夫按键下网购安全可靠保证信用风险纹章Trust Badge上面就能了，具体详情标识符如下：

<style>#progress_bar{margin-top:15px}.progressbar.progressbar{background:#ffe8e8;border:0px solid whitesmoke;height:11px}.progressbar.progressbar div{background:#d95350;height:11px}.progressbar.progressbar.active div{-webkit-animation:2s linear 0s normal none infinite running progress-bar-stripes;animation:2s linear 0s normal none infinite running progress-bar-stripes}.progress-striped.progressbar.progressbar div{background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));background-size:40px 40px}.items-count{margin-top:0px;margin-bottom:0px}.count{color:#a94442;padding:1px}.items-count p{padding-bottom:5px;margin:0;text-transform:uppercase;font-weight:700;text-align:center;font-family:"Open Sans",Arial,sans-serif}.progressbar{position:relative;display:block;background-color:#ca0000;border:1px solid #ddd;margin-bottom:15px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1)}.progressbar > div{background-color:#ca0000;width:0;margin-bottom:0;height:15px}.progressbar > div.less-than-ten{background-color:#ca0000 !important}#clock-ticker{display:block;margin-bottom:15px}#clock-ticker .block{position:relative;color:#000;font-weight:bold;float:left;text-align:center;width:25%}#clock-ticker .block .flip-top{width:88px;height:39px;line-height:40px;font-size:40px;text-align:center}#clock-ticker .block .label,span.flip-top{color:#000;font-weight:bold;text-align:center;font-size:14px;text-transform:uppercase;width:88px;line-height:25px;font-family:"Open Sans",Arial,sans-serif}</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

function randomIntFromInterval(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}

// Settings are here

var total_items = 50;

var d = new Date();

var min_items_left = 12;

var max_items_left = 20;

var remaining_items = randomIntFromInterval(min_items_left, max_items_left);

var min_of_remaining_items = 1;

var decrease_after = 1.7;

var decrease_after_first_item = 0.17;

// Davy Jones Locker

(function($){$.fn.progressbar=function(){var a="<p>Hurry! Only <span class=count>"+remaining_items+"</span> left in stock.</p>"+"<div class=progressbar><div style=width:100%></div></div>";this.addClass(items-count);this.html(a+this.html());updateMeter(this);var b=this;setTimeout(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$(.count).css(background-color,#CE0201);$(.count).css(color,#fff);setTimeout(function(){$(.count).css(background-color,#fff);$(.count).css(color,#CE0201)},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after_first_item);setInterval(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$(.count).css(background-color,#CE0201);$(.count).css(color,#fff);setTimeout(function(){$(.count).css(background-color,#fff);$(.count).css(color,#CE0201)},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after)};function updateMeter(a){var b=100*remaining_items/total_items;if(remaining_items<10){a.find(.progressbar div:first).addClass(less-than-ten)}a.find(.progressbar).addClass(active progress-striped);setTimeout(function(){myanimate(a.find(.progressbar div:first),b);a.find(.progressbar).removeClass(active progress-striped)},1000)}}(jQuery));function myanimate(a,b){var c=0;var d=parseInt(a.closest(.progressbar).css(width));var e=Math.floor(100*parseInt(a.css(width))/d);if(e>b){c=e}function frame(){if(e>b){c--}else{c++}a.css(width,c+%);if(c==b||c<=0||c>=100)clearInterval(f)}var f=setInterval(frame,40)} jQuery.noConflict()(function($){$(document).ready(function(){$("#progress_bar").progressbar();var tag="ctdn-12-12".match(/\d+/g);var hour=14;var theDaysBox=$("#numdays");var theHoursBox=$("#numhours");var theMinsBox=$("#nummins");var theSecsBox=$("#numsecs");var d=new Date();var n=d.getDay();var date=1;var gg=0;var hh=0;var ii=0;var nsec=0-d.getSeconds();if(nsec<0){nsec=60-d.getSeconds();gg=1}var nmin=0-d.getMinutes()-gg;if(nmin<0){nmin=60-d.getMinutes()-gg;hh=1}var nhrs=14-d.getHours()-hh;if(nhrs<0){nhrs=38-d.getHours()-hh;ii=1}var ndat=date-1;if(ndat<0){var mmon=d.getMonth();ndat=30+date-d.getDate()-ii}theSecsBox.html(nsec);theMinsBox.html(nmin);theHoursBox.html(nhrs);theDaysBox.html(ndat);var refreshId=setInterval(function(){var e=theSecsBox.text();var a=theMinsBox.text();var c=theHoursBox.text();var b=theDaysBox.text();if(e==0&&a==0&&c==0&&b==0){}else{if(e==0&&a==0&&c==0){theDaysBox.html(b-1);theHoursBox.html("23");theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0&&a==0){theHoursBox.html(c-1);theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0){theMinsBox.html(a-1);theSecsBox.html("59")}else{theSecsBox.html(e-1)}}}}},1000);});});</script>

<div class="items-count" id="progress_bar"></div><div id="clock-ticker" class="clearfix"><div class="block"><span class="flip-top" id="numdays">0</span><br><span class="label">Days</span></div><div class="block"><span class="flip-top" id="numhours">1</span><br><span class="label">Hours</span></div><div class="block"><span class="flip-top" id="nummins">23</span><br><span class="label">Minutes</span></div><div class="block"><span class="flip-top" id="numsecs">36</span><br><span class="label">Seconds</span></div>

</div>

最后同时实现的效用是这样的如图

是不是给访问中文网站的朋友急促感，让他们赶快付款，库存不多了。