Add the code in product.liquid

<div class=”items-count” id=”progress_bar”></div>
<div id=”clock-ticker” class=”clearfix” style=”display:none;”>
<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>

<div class=”happy-shoppers-text” style=”margin: 20px 0 0 0;”>
<span class=”happy-shoppers-number” id=”peoplevisit” style=” color: white;background: #e80970;padding: 5px 10px;”></span>
Currently Viewing This Product
</div>

 

Add the Css in .css file
<style>

#progress_bar{
margin-top:15px;
width:50%;
}
.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:”Roboto”,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>

 

Add the js in .js file

<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>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
nsec=50;
}
var nmin = 0 – d.getMinutes() – gg;
if (nmin < 0) {
nmin = 60 – d.getMinutes() – gg;
hh = 1
nmin=14;
}
var nhrs = 14 – 4 – 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(“12”);
theMinsBox.html(“14”);
theSecsBox.html(“50”)
} 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>
<script>
setInterval(function(){
document.getElementById(“peoplevisit”).innerHTML =
Math.floor(Math.random() * 80) + 10;
},3000);
</script>