How to add a sales countdown timer?
Before you going to add a sales countdown timer to your Shopify website let’s understand.
Why should you need to add a countdown timer to your Shopify store?
FOMO! word defines the reason behind the use of a countdown timer on websites. If you are not familiar with this word, let me explain that “FOMO” stands for the “fear of missing out” an effective marketing technique used to create a sense of urgency.
FOMO triggers the human mind to act immediately. According to a phenomenon published by Computers in Human Behaviour, fear of missing out is a psychological trigger for humans. Because every human wants to go first, no one wants to be left behind.
Why use FoMO in marketing?
According to Strategy Online, 60% of millennial buyers said they make a reactive buy after encountering FOMO, most often within 24 hours. 67% of millennials prefer to shop online, 81.3% said they shop online at least once a month, and 45% admitted they prefer shopping online.
To attract such a high volume of online buyers, you should opt for the FOMO marketing method among all other marketing.
What is a sales countdown timer?
A sales countdown timer is a clock that ticks down and shows the time left to purchase products with a special offer. This offer can be free shipping, season sales, discounts, or other rewards.
Adding the sales countdown timer to your store creates a sense of urgency in buyers’ minds every minute and every second. This impact the purchase decision of buyers to buy things before the offer ends.
Benefits of adding a Sales Countdown Timer on the Shopify store
If you run a Shopify store or eCommerce business, you want sales, sales, and sales. To get sales, you apply all the marketing strategies, and one of the methods that help is a marketing strategy called FOMO which positively boosts sales. Adding a sales countdown timer increases the store’s sales. With other benefits such as:
Create urgency –
As we already discussed countdown timer creates the urgency to influence the buyers’ decision. So they can purchase the product immediately.
Scarcity principle –
A countdown timer triggers a natural human reaction to scarcity. It also shows the popularity and in-demand of the products or services. You can also use this strategy in contrary to selling low-demand products.
Increase value –
An increase in the product demand simultaneously increases the value of products. So you can sell products at a much higher price and increase the revenue eventually.
Build interest –
FOMO strategy builds the buyers’ interest even if they are slightly interested in the products. Building buyers’ interest is fruitful because it can promote social sharing and social media stickiness.
How to Add Sales Countdown Timer to Shopify Using Code
- Log into your Shopify admin, and go to Online Store > Themes.
- Choose the theme you want to edit, and click Actions > Edit code.
- Now, in the Snippets directory, click Add a new snippet.
- Name your snippet as a countdown-timer and click Create snippet.
- After creating a new snippet, paste the code below into it and save the snippet file.
% if end_date != blank %}
<div class=”timer”>
{% if title != blank %}<h4 class=”timer__title”>{{ title }}</h4>{% endif %}
<div class=”timer-display”>
<div class=”timer-block”>
<span class=”timer-block__num js-timer-days”>00</span>
<span class=”timer-block__unit”>Days</span>
</div>
<div class=”timer-block”>
<span class=”timer-block__num js-timer-hours”>00</span>
<span class=”timer-block__unit”>Hours</span>
</div>
<div class=”timer-block”>
<span class=”timer-block__num js-timer-minutes”>00</span>
<span class=”timer-block__unit”>Minutes</span>
</div>
<div class=”timer-block”>
<span class=”timer-block__num js-timer-seconds”>00</span>
<span class=”timer-block__unit”>Seconds</span>
</div>
</div>
</div>
<style>
.timer {
background: #f6fafd;
padding: 10px;
margin: 10px 0;
}
.timer–expired {
display: none;
}
.timer__title {
@extend .paragraph;
text-align: center;
}
.timer-display {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 5px;
}
.timer-block {
position: relative;
width: 25%;
padding: 0 10px;
&:not(:last-child):after {
content: ‘:’;
position: absolute;
right: 0;
top: 3px;
}
}
.timer-block__num,
.timer-block__unit {
display: block;
text-align: center;
}
</style>
<script type=”text/javascript”>
var second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
var countDown = new Date(‘{{- end_date -}}’).getTime(),
x = setInterval(function() {
var now = new Date().getTime(),
distance = countDown – now;
document.querySelector(‘.js-timer-days’).innerText = Math.floor(distance / (day)),
document.querySelector(‘.js-timer-hours’).innerText = Math.floor((distance % (day)) / (hour)),
document.querySelector(‘.js-timer-minutes’).innerText = Math.floor((distance % (hour)) / (minute)),
document.querySelector(‘.js-timer-seconds’).innerText = Math.floor((distance % (minute)) / second);
}, second)
</script>
{% endif %}
Now your countdown timer code snippet is created. You can place this code at your preferred location, where it is the homepage, product page, or collection page. Include the following snippet file anywhere you want to display it.
{% include ‘countdown-timer’,
title: “Special Offer End In”,
end_date: “Dec 31, 2020”
%}
Now click on save.
Note:
- You can easily change the title: parameter according to the occasion, season, and offer types.
- In the end_date parameter, you must enter it accurately with the format: Month (shorten) Date, Year, and MUST be in the future. For example, today’s date is October 15, 2022, so you can enter: October 15, 2022.
Final Words:
After you follow the steps above, you can easily add the sales countdown timer to the Shopify store. But somehow, if you get some difficulties setting up it. Then you can get the help of our Shopify developer. We have a team of Shopify developers who are experts in Shopify design and development.