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. They will be added into the Checkout Page as below:



Step by Step Tutorial

Go to Online Store > Themes > Customize > Checkout Page > More Customization > Put your custom JavaScript code here to add and change some content of Checkout pages.


Add the below script into this section

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 t=!1;if("function"==typeof define&&define.amd&&(define(e),t=!0),"object"==typeof exports&&(module.exports=e(),t=!0),!t){var o=window.Cookies,n=window.Cookies=e();n.noConflict=function(){return window.Cookies=o,n}}}(function(){function e(){for(var e=0,t={};e<arguments.length;e++){var o=arguments[e];for(var n in o)t[n]=o[n]}return t}return function t(o){function n(t,i,d){var r;if("undefined"!=typeof document){if(arguments.length>1){if("number"==typeof(d=e({path:"/"},n.defaults,d)).expires){var s=new Date;s.setMilliseconds(s.getMilliseconds()+864e5*d.expires),d.expires=s}d.expires=d.expires?d.expires.toUTCString():"";try{r=JSON.stringify(i),/^[\{\[]/.test(r)&&(i=r)}catch(e){}i=o.write?o.write(i,t):encodeURIComponent(String(i)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),t=(t=(t=encodeURIComponent(String(t))).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent)).replace(/[\(\)]/g,escape);var a="";for(var c in d)d[c]&&(a+="; "+c,!0!==d[c]&&(a+="="+d[c]));return document.cookie=t+"="+i+a}t||(r={});for(var l=document.cookie?document.cookie.split("; "):[],u=/(%[0-9A-Z]{2})+/g,p=0;p<l.length;p++){var f=l[p].split("="),m=f.slice(1).join("=");this.json||'"'!==m.charAt(0)||(m=m.slice(1,-1));try{var g=f[0].replace(u,decodeURIComponent);if(m=o.read?o.read(m,g):o(m,g)||m.replace(u,decodeURIComponent),this.json)try{m=JSON.parse(m)}catch(e){}if(t===g){r=m;break}t||(r[g]=m)}catch(e){}}return r}}return n.set=n,n.get=function(e){return n.call(n,e)},n.getJSON=function(){return n.apply({json:!0},[].slice.call(arguments))},n.defaults={},n.remove=function(t,o){n(t,"",e(o,{expires:-1}))},n.withConverter=t,n}(function(){})});var defaultTime=60*mins,cookieCode="checkout_start_ts";function formatSecs(e){var t=Math.floor(e/60),o=e%60;return t<10&&(t="0"+t),o<10&&(o="0"+o),t+":"+o}function currentTSs(){var e=new Date;return Math.round(e.getTime()/1e3)}function getStartTimestamp(){var e=currentTSs(),t=Cookies.get(cookieCode);return(void 0===t||e-t>=defaultTime)&&(t=currentTSs()),Cookies.set(cookieCode,t,{expires:1}),t}function addCountdownBlock(){setTimeout(function(){var e=document.getElementsByClassName("checkout-layout");if(!e||0!==e.length){var t=document.getElementById("order_count_down"),o=document.getElementsByClassName("os-order-number");if(o&&o.length>0)t&&(t.parentNode.removeChild(t),Cookies.remove(cookieCode));else if(!t){new Date;var n=currentTSs(),i=getStartTimestamp()-n+defaultTime,d='<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(i)+"</span> minutes!</div></div></div>";document.getElementsByClassName("main__content")[1].insertAdjacentHTML("afterbegin",d)}}},500)}function addAdBlock(){setTimeout(function(){var e=document.getElementsByClassName("checkout-layout");if(!(e&&0===e.length||document.getElementById("why-us"))){for(var t="",o=0;o<pSettings.whyUs.length;o++)t+='<div class="wyuscs" style="overflow: auto;margin-top: 16px;"><div class="wyuscs1" style="float: left;width: 20%">',t+='<img style="max-width: 64px;" src="'+pSettings.whyUs[o].img+'"></div>',t+='<div class="wyuscs2" style="float:right;width: 80%">',t+='<span style="font-weight: bold">'+pSettings.whyUs[o].title+"</span>",t+="<p>"+pSettings.whyUs[o].text+"</p></div></div>";var n='<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>'+t+"</div>";document.getElementsByClassName("order-summary__sections")[0].insertAdjacentHTML("afterend",n)}},500)}function removeScriptOnLastStep(){setTimeout(function(){window.sbsdk.page.onContextUpdate(function(e){if("post_checkout"===e.type){var t=document.getElementById("why-us"),o=document.getElementById("order_count_down");t&&t.remove(),o&&o.remove()}})},600)}window.sbsdk.page.onContextUpdate(function(e){"post_checkout"!==e.type&&(addCountdownBlock(),addAdBlock())}),removeScriptOnLastStep(),window.sbsdk.$on("page_load",function(){window.sbsdk.page.onContextUpdate(function(e){"post_checkout"!==e.type&&(addCountdownBlock(),addAdBlock())}),removeScriptOnLastStep()}),setInterval(function(){var e=document.getElementById("time");if(e){var t=currentTSs(),o=getStartTimestamp(),n=o-t+defaultTime;n<=0&&(o=Math.round(date.getTime()/1e3),Cookies.set(cookieCode,o,{expires:1}),n=o-t+defaultTime),e.innerHTML=formatSecs(n)}},1e3);


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

Click Save
Was this article helpful?
Cancel
Thank you!