This article is also available in:
A Countdown Timer and content such as Product Guarantee, Successful orders.. are tools that help your store create urgency for your customers visiting stores and increase E-commerce trustworthiness… all those elements aim to boost your customers ’s desires to place orders. In this section, we will guide you on how to add Countdown and Trust Indicators to Checkout Page in a few steps.

Step by Step Tutorial:

They will be added into the Checkout Page as below:


Go to Online Store > Themes > Customize > Checkout Page > More Customization > Custom JavaScript code > Save. That's all!


Add these below scripts

Note:

You can change content, image links if you need.

var mins = 10;
var pSettings = {
highDemandImg: 'https://img.shopbase.com/files/10038432/2019/06/19/0x500@flame_24-aa8a1.png',
highDemandText: "An item you ordered is in very high demand. No worries, we have reserved your order so it doesn't run out of stock before checkout.",
// highDemandText: "An item you ordered is in very high demand.",

whyUs: [
{
img: 'https://img.shopbase.com/files/10038432/2019/06/19/0x500@money-back-6d3f8.png',
title: "60-day Satisfaction Guarantee",
text: "If you're not satisfied with our products we will rectify the situation immediately, no questions asked. Your satisfaction is very important to us.",
},
{
img: 'https://img.shopbase.com/files/10038432/2019/06/19/0x500@mail-truck-64e12.png',
title: "Over 34,245 successfully shipped orders",
text: "We made as many happy customers as many orders we shipped. You simply have to join our big family.",
}
]
};

!function(e){var n=!1;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var o=window.Cookies,t=window.Cookies=e();t.noConflict=function(){return window.Cookies=o,t}}}(function(){function e(){for(var e=0,n={};e<arguments.length;e++){var o=arguments[e];for(var t in o)n[t]=o[t]}return n}return function n(o){function t(n,r,i){var c;if("undefined"!=typeof document){if(arguments.length>1){if("number"==typeof(i=e({path:"/"},t.defaults,i)).expires){var a=new Date;a.setMilliseconds(a.getMilliseconds()+864e5*i.expires),i.expires=a}i.expires=i.expires?i.expires.toUTCString():"";try{c=JSON.stringify(r),/^[\{\[]/.test(c)&&(r=c)}catch(e){}r=o.write?o.write(r,n):encodeURIComponent(String(r)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),n=(n=(n=encodeURIComponent(String(n))).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent)).replace(/[\(\)]/g,escape);var s="";for(var f in i)i[f]&&(s+="; "+f,!0!==i[f]&&(s+="="+i[f]));return document.cookie=n+"="+r+s}n||(c={});for(var p=document.cookie?document.cookie.split("; "):[],d=/(%[0-9A-Z]{2})+/g,u=0;u<p.length;u++){var l=p[u].split("="),C=l.slice(1).join("=");this.json||'"'!==C.charAt(0)||(C=C.slice(1,-1));try{var g=l[0].replace(d,decodeURIComponent);if(C=o.read?o.read(C,g):o(C,g)||C.replace(d,decodeURIComponent),this.json)try{C=JSON.parse(C)}catch(e){}if(n===g){c=C;break}n||(c[g]=C)}catch(e){}}return c}}return t.set=t,t.get=function(e){return t.call(t,e)},t.getJSON=function(){return t.apply({json:!0},[].slice.call(arguments))},t.defaults={},t.remove=function(n,o){t(n,"",e(o,{expires:-1}))},t.withConverter=n,t}(function(){})});var defaultTime=mins*60;var cookieCode='checkout_start_ts';function formatSecs(secs){var m=Math.floor(secs/60),s=secs%60;if(m<10){m='0'+m}
if(s<10){s='0'+s}
return m+':'+s}
function currentTSs(){var date=new Date();return Math.round(date.getTime()/1000)}
function getStartTimestamp(){var timestamp=currentTSs();var startTS=Cookies.get(cookieCode);if(typeof startTS==='undefined'||(timestamp-startTS>=defaultTime)){startTS=currentTSs()}
Cookies.set(cookieCode,startTS,{expires:1});return startTS}
function addCountdownBlock(){setTimeout(function(){var ele1=document.getElementsByClassName('checkout-layout');if(ele1&&ele1.length===0){return}
var ele2=document.getElementById('order_count_down');var ele3=document.getElementsByClassName('os-order-number');if(ele3&&ele3.length>0){if(ele2){ele2.parentNode.removeChild(ele2);Cookies.remove(cookieCode)}
return}
if(ele2){return}
var date=new Date();var timestamp=currentTSs();var startTS=getStartTimestamp();var remainingSecs=startTS-timestamp+defaultTime;var content='<div id="order_count_down"><div class="high_demand_text" style="width:100%;display:table"><div style="display:table-cell;vertical-align:middle"><img src="'+pSettings.highDemandImg+'"></div><div style="font-weight:bold;padding-left:5px; color: #545454;">'+pSettings.highDemandText+'</div></div><div stlye="margin-top:8px;"><div id="ct836" class="checkout_countdown" style="display:block;background:#fff5d2;padding:10px 20px;border:1px solid #fac444;font-size:14px;color:#2c2c2c;font-weight:bold;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; margin:5px 0px 20px 0px">Your order is reserved for <span id="time">'+formatSecs(remainingSecs)+'</span> minutes!</div></div></div>';document.getElementsByClassName('main__content')[0].insertAdjacentHTML('afterbegin',content)},500)}
function addAdBlock(){setTimeout(function(){var ele1=document.getElementsByClassName('checkout-layout');if(ele1&&ele1.length===0){return}
var ele2=document.getElementById('why-us');if(ele2){return}
var reasonsContent='';for(var i=0;i<pSettings.whyUs.length;i++){reasonsContent+='<div class="wyuscs" style="overflow: auto;margin-top: 16px;"><div class="wyuscs1" style="float: left;width: 20%">';reasonsContent+='<img style="max-width: 64px;" src="'+pSettings.whyUs[i].img+'"></div>';reasonsContent+='<div class="wyuscs2" style="float:right;width: 80%">';reasonsContent+='<span style="font-weight: bold">'+pSettings.whyUs[i].title+'</span>';reasonsContent+='<p>'+pSettings.whyUs[i].text+'</p></div></div>'}
var content='<div id="why-us" style="position:relative;padding:10px 0px;color: #666"><div class="wyustit" style="position:relative;z-index:1;text-align:center"><span style="background:#f2f2f2;padding:0 15px">Why choose us?</span><span style="position: absolute; height: 1px;width: 100%;top: 50%;background: #dfdfdf;left: 0;z-index: -1;"></span></div>'+reasonsContent+'</div>';document.getElementsByClassName('order-summary__sections')[0].insertAdjacentHTML('afterend',content)},500)}
function removeScriptOnLastStep(){setTimeout(function(){window.sbsdk.page.onContextUpdate(function(context){if(context.type==='post_checkout'){var ad=document.getElementById('why-us');var count=document.getElementById('order_count_down');if(ad){ad.remove()}
if(count){count.remove()}}})},600)}
window.sbsdk.page.onContextUpdate(function(context){if(context.type!=='post_checkout'){addCountdownBlock();addAdBlock()}})
removeScriptOnLastStep();window.sbsdk.$on('page_load',function(){window.sbsdk.page.onContextUpdate(function(context){if(context.type!=='post_checkout'){addCountdownBlock();addAdBlock()}})
removeScriptOnLastStep()});setInterval(function(){var timeElm=document.getElementById('time');if(timeElm){var timestamp=currentTSs();var startTS=getStartTimestamp();var remainingSecs=startTS-timestamp+defaultTime;if(remainingSecs<=0){startTS=Math.round(date.getTime()/1000);Cookies.set(cookieCode,startTS,{expires:1});remainingSecs=startTS-timestamp+defaultTime}
timeElm.innerHTML=formatSecs(remainingSecs)}},1000)

Tips:

You can add a trust badge beside the logo too by following this instruction

Click Save
Was this article helpful?
Cancel
Thank you!