查看: 1873|回复: 6

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

[复制链接]

72

主题

490

帖子

1622

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1622
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

帖子

1622

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1622
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里面没有地方放了?可以加到别的地方吗?
回复 支持 反对

使用道具 举报

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

本版积分规则

热门推荐

请教如何去掉网站底部的powered by shopify 字句
请教如何去掉网站底部的po
请教如何去掉网站底部的powered by shopify 字句
Shopify建站运营推广相关问题征集
Shopify建站运营推广相关
承蒙各位Shopify卖家朋友们的支持和厚爱,在运营WaimaoB2C.com博客和WaimaoB2C.cn论坛
提高转化率的一个小提示
提高转化率的一个小提示
最近测试,在Checkout按钮下面添加了一次些促销信息,转化率稍稍有些提升,但是因为数
购物按钮下的 购物安全保证图片 怎么添加
购物按钮下的 购物安全保
购物按钮下的 购物安全保证图片 怎么添加
Shopify产品页面插入视频方法
Shopify产品页面插入视频
在Shopify网站的产品页面插入视频的两种方法: 这两种方法的前提都是你首先要将视频上
网站不做广告,Google analytics数据分析怎么有部分流量是paid...
网站不做广告,Google ana
如题, 我们的shopify网站目前主要引流方式还是引导一些其他平台的客户过来购买,平时
删除buy on amazon
删除buy on amazon
群主大人,我想删除这个按钮,比较稳妥的做法是什么? 因为之前修改代码忘记备份,产

Archiver|手机版|小黑屋|

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