不用App也能实现的,简单实用的倒计时教程

    倒计时功能大家都不陌生,主要用来给顾客营造活动的紧迫感以及库存的稀缺感,用来提升店铺转化。倒计时种类很多,样式很多,实现方式也很多。先给大家看看几种在Shopify店铺里实现的倒计时功能示例。

    1.ATC按钮下方。

    这种倒计时样式应该算是最常见的倒计时样式,放在产品页的ATC按钮下方,让用户点击加入购物车的时候能一眼看到倒计时。另外还有一种这个的改良版本,直接将产品库存显示在上方,营造紧迫感。这种方式可以针对某一个产品或者某一个分类产品,灵活性比较高。

    2.顶部推广导航栏处。

    顶部推广导航栏处的倒计时最近也比较流行。主要是用来做店铺的整个活动倒计时,并不会特殊针对某些特殊活动产品。推广导航栏的倒计时功能通常后面会带一个召唤按钮,直接跳转到店铺的活动介绍页面,或者指定产品页面。

    3.底部固定悬浮框处。

    底部固定悬浮框类似悬浮ATC按钮,不管页面如何拉动,倒计时始终固定在页面底部,功能类似上面所讲到的推广导航栏倒计时功能,只不过一个在顶部,一个在底部。

    4.产品详情页图片上。

    不同于其他的倒计时功能,这个是放在产品图片上,上图是手机端效果,PC端是放在产品Title上方。除显示倒计时外,还显示了价格对比以及订单数量的多少。这种风格比较类似国内的活动风格。

    5.Checkout页面上。

    Checkout页面的倒计时功能大家够不陌生,前面介绍的四种倒计时都是为了让顾客尽快下单,那Checkout倒计时功能则是为了让顾客尽快付款。

    总之一句,都是为了营造活动氛围和紧迫感以及稀缺感

    再来看看倒计时功能的几种实现方式。通常在Shopify上一种扩展功能的实现,无非是两种方式,一个是通过App去实现,一个是通过技术写代码去实现

    第一种最常见的倒计时功能通常很多都是免费的,所以很多人会选择直接安装一种免费的App去实现,这也是一种方式。第二种和第三种App基本都需要收费了。第四种是小编一个客户自己根据自己的需求写的。第五种是之前我们一直提到的Checkout页面优化中涉及的部分,具体可以查看我们之前的文章。

另外一种方式,通过技术写代码实现。因为很多人会去考虑到安装App后影响网站的加载速度,所以一些小功能会愿意自己去写或者找自己公司技术去写。所以我今天给大家简单分享一个倒计时的教程。

最终效果图如下:

本文教程我以Brooklyn主题为例,点开Shopify后台,点击Online Store -> Themes -> Current Theme -> Edit Code,找到左边的搜索目录框,搜索product-template,找到product-template.liquid。右边代码处,ctrl + F 搜索”button“,找到{% endform %}下面一行,按如下位置黏贴代码。

具体代码如下:

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

参考:https://conversionpirate.com/shopify-countdown-product-page-how-to/

    本篇文章就分享到这里了。如果对文中所涉及内容有疑问处,可联系小编QQ : 2790641050。欢迎加入免费Shopify技术交流qq群:632205694,如有疑问,也可在群中与小编实时交流。        

    

   除非注明,文章均为 SFS技术服务 原创,转载请注明来源,谢谢! 

    SFS为国内首家专注于Shopify技术服务的供应商,因为专注,所以专业

更多精彩推荐,请关注我们
专业的技术服务

本篇文章来源于微信公众号: shopify技术服务

发表评论

关闭菜单