查看: 1422|回复: 6

不使用插件如何在Shopify的Checkout Page页面添加Countdown Timer

[复制链接]

72

主题

490

帖子

1599

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1599
QQ
发表于 2017-12-22 19:44:18 | 显示全部楼层 |阅读模式
UPDATED on 20180328 这个是Checkout页面修改的2.0版本了,最新的3.0版本请查看:https://waimaob2c.cn/thread-82-1-1.html



如上图,给你的shopify网站的Checkout Page添加一个Countdown Timer
1. 复制下面的代码

  1. function createCookie(a,b,c){if(c){var d=new Date;d.setTime(d.getTime()+c*60*1e3);var e="; expires="+d.toUTCString()}else var e="";document.cookie=a+"="+b+e+"; path=/"}function readCookie(a){for(var b=a+"=",c=document.cookie.split(";"),d=0;d<c.length;d++){for(var e=c[d];" "==e.charAt(0);)e=e.substring(1,e.length);if(0==e.indexOf(b))return e.substring(b.length,e.length)}return null}function eraseCookie(a){createCookie(a,"",-1)}function crtmedir(a){var b=document.createDocumentFragment(),c=document.createElement("div");for(c.innerHTML=a;c.firstChild;)b.appendChild(c.firstChild);return b}function startTimer(start, duration, display){var diff,minutes,seconds;function timer(){diff=duration-(((Date.now()-start)/1000)|0);minutes=(diff / 60)|0;seconds = (diff % 60)|0;minutes = minutes < 10 ? "0" + minutes : minutes;seconds = seconds < 10 ? "0" + seconds : seconds;display.textContent = minutes + ":" + seconds; if (diff <= 0){clearInterval(inti);document.getElementById("countdownhere").innerHTML = "Order reservation ended.";start = Date.now() + 1000;}};timer();var inti = setInterval(timer, 1000);}var pdm = crtmedir('<div class="countdownholder"><div id="countdownhere" style="display:block;background:#fff5d2;padding:10px 20px;border:1px solid #e3df74;font-size:14px;color:#2c2c2c;font-weight:bold;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; margin:20px 0px">Your order is reserved for <span id="time"></span> minutes!</div></div>');if(window.location.href.indexOf('checkout') > -1 && document.location.href.indexOf('thank_you') === -1 && document.location.href.indexOf('orders') === -1){window.onload = function () { document.getElementsByClassName('main__header')[0].appendChild(pdm);var dolzina=15;var ten=60*dolzina;var starttime=Date.now();var xcnt=readCookie('prtcntdwn');if(xcnt){if(starttime<xcnt){ten=(xcnt-starttime)/1000;}else{eraseCookie('ptcntdwn');createCookie('prtcntdwn',Date.now()+(ten*1000),ten+1);}}else{createCookie('prtcntdwn',Date.now()+(ten*1000),ten+1);}display=document.querySelector('#time');startTimer(starttime, ten, display);};}
复制代码

2. 打开Shopify后台 - Online Store - Preferences - Google Analytics -  Add custom Javascript to Google Analytics, 将上面的代码粘贴到这里,然后保存就可以了。




保存之后记得去查看下你的Checkout Page页面,是不是已经生效了


Bye the Way, 为了提高转化率,建议在Checkout Page页面添加自定义Logo的时候,把一些Trust Badges PS到你的Logo下面,多多少少给你的页面加个分吧,多一份信任,就高一些订单转化率。

Just like this:


本文代码来源于网站: http://conversionpirate.com/pirate-countdown

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

0

主题

8

帖子

84

积分

注册会员

Rank: 2

积分
84
发表于 2017-12-22 20:09:43 | 显示全部楼层
Trust Badges如何插入网页中?
回复 支持 反对

使用道具 举报

72

主题

490

帖子

1599

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1599
QQ
 楼主| 发表于 2017-12-22 23:21:12 | 显示全部楼层
STay 发表于 2017-12-22 20:09
Trust Badges如何插入网页中?

看上文最后的链接地址
回复 支持 反对

使用道具 举报

2

主题

48

帖子

109

积分

注册会员

Rank: 2

积分
109
发表于 2018-3-28 17:34:30 | 显示全部楼层
现在就测试
回复 支持 反对

使用道具 举报

1

主题

50

帖子

143

积分

注册会员

Rank: 2

积分
143
发表于 2018-5-7 18:37:16 | 显示全部楼层
收藏以后备用
回复 支持 反对

使用道具 举报

0

主题

30

帖子

104

积分

注册会员

Rank: 2

积分
104
发表于 2018-10-13 16:46:30 | 显示全部楼层
您好,以前加了一段优化代码到GA这里了,再加代码,GA里面没有地方放了?可以加到别的地方吗?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

热门推荐

Shopify联系我们页面的表单如何设置
Shopify联系我们页面的表
最近群里有几个朋友问到了这个同样的问题,如下图所示,联系我们的页面表单是怎么做出
视频制作软件 Camtasia 破解程序
视频制作软件 Camtasia 破
做FB广告怎么能少了视频制作软件呢? 用了几款免费付费软件,最后还是觉得Camtasia最
新手分享操作经验-如何通过Oberlo实现Dropshipping
新手分享操作经验-如何通
去年就看过一个外国人分享自己通过Oberlo做dropshipping的视频,简单的操作和可观的收
Help shopify 信用卡支付通道
Help shopify 信用卡支付
Shopify 提供的三个信用卡通道,你们用的哪个。怎样去注册?哪个好用?
求教高手
求教高手
在注册2checkout时册,填写了免费注册的申请后,按“开始吧”按钮时页面就不动了,这
shopify链接Instagram
shopify链接Instagram
我想用shopify去链接Instagram,但是Instagram是限制国家的,所以我想用shopify链接In
shopify的google Merchant Center产品审核问题
shopify的google Merchant
为什么从shopify导入的feeds一直审核不通过,现在出现价格警告问题,一直没有办法解决

Archiver|手机版|小黑屋|

  • Copyright   ©2015-2016  Shopify论坛 | WaimaoB2C.cn   Powered by©Discuz!   ( 冀ICP备15011551号-4 )
快速回复 返回顶部 返回列表