shopify产品页添加Trust Badge徽章及倒计时功能实现代码摆脱插件

跨境平头哥 06-23 163

前言：

当前兄弟们对“jquery实现短信倒计时”都比较讲究，兄弟们都想要剖析一些“jquery实现短信倒计时”的相关文章。那么小编也在网上收集了一些对于“jquery实现短信倒计时””的相关资讯，希望我们能喜欢，姐妹们快快来了解一下吧！

这几天一直没有更新文章，忙着装修二次开发我们公司19年新开始的shopify外贸服饰商城项目，这几天一直在做产品页的优化，毕竟产品页是以后我们打广告买来流量的最终着陆页，不管中间有没有专题页，打的FB，谷歌广告买来的流量最终要到产品详情页去成交，因此前期的优化是必须的

shopify着陆页landing page优化：

上传完产品后，就是产品详情页也就是主要买来流量后的着陆页Landing page的优化了，这个直接关乎到网站转化率，要优化的太多了，包括网站速度等，这里写我这几天主要做的3个功能，一个是添加了带图和视频的评论，这个是用插件的形式实现的，没有选择原来的shopify评论插件Yotpo Reviews是因为后来才出现，说是免费其实只有50个订单的使用限制，最重要的是没有带视频评论的功能，因此后来换成付费的shopify带图带视频评论插件Judge Product Reviews效果如图所示

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实现代码：

独立站相比于亚马逊这种平台给人的信用度当然比不上，为了让来到我们网站的网友相信我们网站的购物是安装的，在shopify产品详情页购物车下面添加购物安全保障徽章Trust Badge是非常必要的，原来我们是用插件的形式实现这个功能，结果速度慢的要命如图一所示

添加信用徽章Trust Badge前效果加载不出来

手机版打红×的地方甚至显示不出来，本来是为了增加客户体验的，速度慢成这样的插件反而会赶走客户，原因就是我前面说的插件服务器不跟网站一起和用这个插件的太多人请求了导致的速度慢，因此自己把购物安全保障信用徽章Trust Badge图片上传到我们自己的shopify网站再显示在购物车按钮下面就可以了，速度基本上是秒开，实现的过程也是非常简单的

首先在shopify产品添加哪里上传一张自己的购物安全保障信用徽章Trust Badge图片，这个网上很多，最好是根据自己支持的支付方式做一张图，把这张添加到产品编辑款，居中，然后看html代码就可以得到这个图片的路径了，再将该段代码添加到产品模板购物车下面就可以了，比如我的代码方式是

shopify添加信用徽章代码Trust Badge

这样就实现了非插件形式product-template.liquid文件购物车代码下面第358行前添加图片代码

SHOPIFY产品页面倒计时代码：

在产品页面添加倒计时功能目的也是为了促使客户赶快下单购买，实现这一个倒计时功能的shopify插件很多，如果能够用代码实现当然就不要用插件咯，至少速度快了不止一倍，而且还可以按自己的情况定制倒计时效果，这里就分享倒计时代码给大家。

shopify产品页添加倒计时代码

代码添加位置跟前面的添加购物车按钮下购物安全保障信用徽章Trust Badge上面就可以了，具体详情代码如下：

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

<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>

最终实现的效果是这样的如图

shopify产品页添加倒计时效果

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

本文地址：http://www.longkongtuishu.com/cac85BAVsBFEFC1dW.html

标签： #jquery实现短信倒计时 #jquery中倒计时控件