How to Add a Countdown Timer for Promoting Best Offers Without Third-Party Apps
Learn how to enhance your Shopify store's promotional offers with a countdown timer, all without the need for any third-party apps.
In this comprehensive guide, we will walk you through the process of adding a countdown timer to your Shopify store, even if you lack coding knowledge. While Shopify's free themes come with several pre-installed sections to elevate your website's appearance, certain features like a countdown timer are exclusively available in premium themes.
By following our tutorial, you can add this valuable sales tool to your store and potentially increase customer trust and sales. To ensure the highest level of customization, some HTML/CSS knowledge may be required. However, we will keep our instructions as straightforward as possible to accommodate users of all skill levels.
Steps for Adding Countdown Timer in Your Shopify Theme
Step 1: Duplicate Your Theme Files
Before making any changes to your Shopify theme files, always duplicate your theme. This ensures you have a backup in case anything goes wrong during the customization process.
- Go to your Shopify dashboard.
Navigate to Online Store > Themes.
- In the “Current theme” section, click on Actions > Duplicate.
Step 2: Add a New Section Countdown Timer
In the Shopify admin, go to Online Store > Themes.
Click Actions > Edit code for your active theme.
Under sections, click on “Add a new section” and create a section named: countdown-timer.
Paste the following code and save:
<div class="counter_color">
<div class="page-width countdown-timer countdown-condensed">
<div class="countdown-timer__text countdown-condensed__text">
<p>{{ section.settings.content }}</p>
{% if section.settings.link_text != blank %}
<a href="{{ section.settings.link_url }}" class="link countdown_link">{{ section.settings.link_text }}</a>
{% endif %}
</div>
<div class="countdown-timer__display countdown-condensed__timer" role="timer" aria-label="Countdown Timer">
<div class="countdown-condensed__timer__item">
<span class="countdown-timer__days countdown-condensed__timer-flip">00</span
><span class="countdown-condensed__timer-unit">Day</span>
</div>
<span class="countdown-condensed__timer-item-separator" aria-hidden="true">:</span>
<div class="countdown-condensed__timer__item">
<span class="countdown-timer__hours countdown-condensed__timer-flip">00</span
><span class="countdown-condensed__timer-unit">HRS</span>
</div>
<span class="countdown-condensed__timer-item-separator" aria-hidden="true">:</span>
<div class="countdown-condensed__timer__item">
<span class="countdown-timer__minutes countdown-condensed__timer-flip">00</span
><span class="countdown-condensed__timer-unit">MIN</span>
</div>
<span class="countdown-condensed__timer-item-separator" aria-hidden="true">:</span>
<div class="countdown-condensed__timer__item">
<span class="countdown-timer__seconds countdown-condensed__timer-flip">00</span
><span class="countdown-condensed__timer-unit">SEC</span>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const expirationDate = new Date("{{ section.settings.expiration_date }}").getTime();
const timerDisplay = document.querySelector('.countdown-timer__display');
const countdown = setInterval(function() {
const now = new Date().getTime();
const distance = expirationDate - now;
if (distance < 0) {
clearInterval(countdown);
if ("{{ section.settings.expiration_behavior }}" === "hide") {
document.querySelector('.countdown-timer').style.display = 'none';
}
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
timerDisplay.innerHTML = `
<div class="countdown-condensed__timer__item"><span class="countdown-timer__days countdown-condensed__timer-flip">${String(days).padStart(2, '0')}</span><span class="countdown-condensed__timer-unit">Day</span></div><span class="countdown-condensed__timer-item-separator" aria-hidden="true">:</span>
<div class="countdown-condensed__timer__item"><span class="countdown-timer__hours countdown-condensed__timer-flip">${String(hours).padStart(2, '0')}</span><span class="countdown-condensed__timer-unit">HRS</span></div><span class="countdown-condensed__timer-item-separator" aria-hidden="true">:</span>
<div class="countdown-condensed__timer__item"><span class="countdown-timer__minutes countdown-condensed__timer-flip">${String(minutes).padStart(2, '0')}</span><span class="countdown-condensed__timer-unit">MIN</span></div><span class="countdown-condensed__timer-item-separator" aria-hidden="true">:</span>
<div class="countdown-condensed__timer__item"><span class="countdown-timer__seconds countdown-condensed__timer-flip">${String(seconds).padStart(2, '0')}</span><span class="countdown-condensed__timer-unit">SEC</span></div>
`;
}, 1000);
});
</script>
{% style %}
.countdown-condensed {
column-gap: 2.25rem;
justify-content: var(--countdown-condensed-justify-content, space-between);
padding: 1rem var(--container-gutter);
display: flex;
color:{{section.settings.text_color}}
}
.countdown-condensed__text {
flex-wrap: wrap;
align-items: center;
gap: .5rem 1.5rem;
display: flex;
}
.counter_color{
background-color:{{ section.settings.back_color }};
}
.countdown-condensed__timer {
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
letter-spacing: .2em;
text-transform: uppercase;
text-align: center;
flex-shrink: 0;
align-items: center;
column-gap: .25rem;
display: flex;
}
.countdown-timer {
text-align: center;
}
.countdown-timer__display {
}
.countdown-condensed__timer-flip{
font-weight: bold;
}
.countdown-condensed__timer__item{
display: grid;
padding: 10px;
}
.countdown-condensed__timer-unit{
font-size: x-small;
font-weight: bold;
}
@media screen and (max-width: 750px) {
.countdown-condensed{
font-size: small;
padding: 0 20px;
}
}
@media screen and (max-width: 750px) {
.countdown_link{
display:none;
}
}
{% endstyle %}
{% schema %}
{
"name": "Countdown timer",
"class": "shopify-section--countdown-condensed",
"tag": "section",
"limit": 1,
"enabled_on": {
"groups": ["header"]
},
"settings": [
{
"type": "inline_richtext",
"id": "content",
"label": "Promote Current Offer",
"default": "PROMOTE YOUR CURRENT OFFER!"
},
{
"type": "text",
"id": "link_text",
"label": "Link Text",
"info": "This won't appear on mobile."
},
{
"type": "url",
"id": "link_url",
"label": "Link URL"
},
{
"type": "text",
"id": "expiration_date",
"label": "Expiration Date",
"placeholder": "Eg. 2025-12-25 12:00",
"info": "Use the format YYYY-MM-DD HH:MM (hours and minutes are optional). Do not use a date farther than 99 days."
},
{
"type": "select",
"id": "expiration_behavior",
"label": "Expiration Behavior",
"info": "When timer expires...",
"options": [
{
"value": "hide",
"label": "Hide"
},
{
"value": "leave",
"label": "Leave"
}
],
"default": "leave"
},
{
"type": "header",
"content": "Color Scheme"
},
{
"type": "color",
"id":"text_color",
"label": "Text Color",
"default":"#000000"
}
,{
"type": "color",
"id":"back_color",
"label": "Background Color",
"default":"#FFFFFF"
},
{
"type": "header",
"content": "Made by [Tushar Garg](https://optixpert.blogspot.com/)"
},
{
"type": "paragraph",
"content": "Replace apps with copy/paste code snippets like this one & save money. [Click here for more tutorials.](https://optixpert.blogspot.com/)"
},
],
"presets": [
{
"name": "Countdown Timer"
}
]
}
{% endschema %}
Step 3: Adding the Custom Countdown Timer Support
On the top left, click on the 3 dots and “customise theme”.
On the sidebar located on the left side, you will find a new section called “countdown-timer”.
Click on the countdown timer section and under the countdown timer section add a Promoting Offer and Expiration Time.
Save the customization changes.
Conclusion
In conclusion, adding a countdown timer to your Shopify store is a powerful strategy for promoting your best offers and driving sales, all without the need for any additional apps. By leveraging this feature, you can create a sense of urgency that encourages customers to take action, thereby enhancing their shopping experience and increasing their trust in your brand. Whether you're using a free or premium theme, our step-by-step guide ensures that even those with minimal coding experience can successfully implement this feature. So, take the next step in optimising your online store and watch as your sales and customer engagement soar.Start harnessing the potential of countdown timers today and elevate your promotional campaigns to new heights!
Special Offer:-
Are you looking to elevate your Shopify store with a stunning, premium quality theme? Look no further! I am offering a selection of top-notch Shopify themes designed to enhance your online presence and boost sales—all at affordable prices.
Whether you're starting a new store or revamping an existing one, my premium themes are tailored to meet your needs, ensuring a seamless shopping experience for your customers. With responsive designs, customizable features, and SEO-friendly layouts, you can attract more visitors and convert them into loyal customers.
Don’t miss out on the opportunity to give your Shopify store the professional look it deserves! Contact me today for more information and to find the perfect theme for your business.
tushar.garg.earningac@gmail.com
Looking for something specific? Drop me a message.