How to Add Sales Countdown Timer to Your Shopify Store
FOMO! If you're reading this, you probably already know what these four letters mean; if you don't, it's the Fear Of Missing Out.
Humans are tuned to react to triggers, FOMO being one of them. Think of it this way, you need to buy a bag, and every time you check the site, you delay checking out because you're not ready to spend all that money.
Then one evening, you open the store and see a timer counting down a sale for a few hours later. Of course, you stack your cart and checkout your item before the clock says "00:00."
This Sales Countdown Timer pushed you to make a purchase you have delayed for months, and it does the same for every other customer.
In this article, we'll help you increase your sales by teaching you to add a Sales Countdown Timer to your Shopify store using only code.
What is a Sales Countdown Timer?
A great tip to improve sales on your Shopify store is by announcing a limited time discount. The trick behind this is that customers visit stores during a discount sale but might not make a purchase; a timed discount, on the other hand, creates FOMO, encouraging them to make a purchase.
A Sales Countdown Timer is a clock that shows how much time is left until an offer is valid.
What are the Benefits of adding a Sales Countdown Timer to Your Shopify Store?
Sales Countdown Timers increase sales by up to 50%, meaning that you make more money with this small feature. Other benefits of adding a Sales Countdown Timer to your Shopify store include:
Adding a Sales Countdown Timer to your Shopify store triggers two emotions. One, to take advantage of the price, and the other is to take action.
This sense of urgency generates sales, giving merchants and customers an advantage.
Along with the sense of urgency, the Sales Countdown Timer creates the Fear Of Missing Out. Customers aware of the deal would be encouraged to purchase so as not to miss out.
An irresistible deal also means that customers would refer others, all of which would boost your conversions.
The more people want a product, the higher the product's value.
How to Add Sales Countdown Timer To Shopify Using Code
You can add a Sales Countdown Timer to your Shopify store by following this:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Snippets directory, click Add a new snippet.
- Give your snippet the name countdown-timer and click Create snippet.
- After creating a new snippet, paste the following code into it and Save 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 %}
The next step depends on where you want to show your countdown. In case you want to include it to all products click on the product-template.liquid file located within the Sections folder or the product.liquid file located within the Templates folder. Now, include snippet file to anywhere you want it display.
{% include 'countdown-timer',
title: "Special Offer End In",
end_date: "Dec 31, 2020"
%}
Change the date to your liking and you are done.
If you want to add it to specific products first go to the Sections folder and click on Add a new Section. Name your section product-template-countdown and remove all the code from the file. Copy and paste the content from the product-template.liquid file located within the Sections folder.
Find the place where you want your countdown to be shown, for example below the add to cart button and paste the following code:
{% include 'countdown-timer',
title: "Special Offer End In",
end_date: "Dec 31, 2020"
%}
Change the end day.
Click on Save.
Go to the Templates directory and choose to add a new template. From the dropdown choose Products and name your template product-countdown-template.
Replace this line
{% section 'product-template' %}
with
{% section 'product-template-countdown' %}
and click on Save.
Assign the template to the products
From your Shopify Admin go to the products. Find the products that you want to change. Click on it and from the sidebar to the right find the templates section. From the drop-down choose product-countdown-template and click on Save.
Do you need more coding tutorials, check out of blog, we have a bunch of them for you.
Guides
- How To Create CUSTOM PRODUCT OPTIONS on Shopify 2.0
- How To Open External Links In A New Tab - Easy Shopify Tutorial
- How To Add Before And After Slider To Shopify - Easy 2022 Tutorial
- How To Add a Background Video To Shopify For Free
- How To Embed TikTok Videos To Any Shopify Page For Free
- Create Product Bundles Without The App - 2022 Easy Shopify Tutorial!
- Add Back to Top Button on Shopify Using Code: Detailed Tutorial
- How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial
- How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code
- How to Add Sales Countdown Timer to Your Shopify Store
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Ask How Customers Heard About Your Store On The Cart Page - 2022 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2022 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2022
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
1 comment
-
To the ecomexperts.io Webmaster, very same listed here: Link Text
LEARN MORE
Get ahead with the latest in e-commerce and Shopify Plus

How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
1 comment
To the ecomexperts.io Webmaster, very same listed here: Link Text