A countdown banner on Shopify is an effective way to boost sales by creating urgency. This feature encourages shoppers to make quick decisions and motivates them to act quickly. As a result, e-commerce stores can ensure maximum sales within a limited time.
You can add a countdown banner on Shopify using 2 methods: adding a custom liquid code, or using Shopify apps. Using custom code offers advanced customization, but it requires technical (coding) knowledge. On the other hand, using an app could be an easier solution for non-developers.
In this blog post, you are going to learn both ways to add countdown banners, including how to effectively use them. Additionally, we have provided a free liquid code to add a countdown banner.
So, let’s get started to create an urgency strategy and drive sales today!
When to Use a Countdown Timer on Your Shopify Store
A countdown timer can push customers to act fast. But effectively using them to the right place, and the right time is a must. Here is how you can use these countdown banners to grab attention and encourage customers to take quick action:
- Flash Sales and Promotions: Highlight limited-time discounts to increase excitement and boost conversions.
- Holiday or Seasonal Campaigns: Create excitement for events like Black Friday, Christmas, or other festive seasons.
- Product Launch or Pre-Order Countdown: Build anticipation for new products or pre-order opportunities.
- Create Urgency to Increase Sales: Motivate shoppers to check out faster by showing stock or time limits.
Using countdown timers strategically can enhance your store’s performance. Use it for time-bound offers, launches, or scarcity tactics to keep your store dynamic and sales-focused.
2 Ways to add Countdown Banner on Shopify
You can either use custom code for full control or choose pre-made templates for an easier setup. The custom code method is ideal for advanced users, while templates make it beginner-friendly. Let’s dive into both methods to create a countdown banner:
10 Steps to Add Countdown Banner on Shopify Using Custom Code
This method involves editing your Shopify theme code and offers full control of the Shopify countdown. But, it is suitable for developers or store owners with coding experience. If you are a store owner without coding knowledge, I’m here to help you with the easiest guide and free resources.
Step 1: Download Your Theme File Before Editing the Theme Code
Whether you are a Shopify store owner, or a developer backup of your file can provide safety and peace of mind. To download the theme file:
- Visit your Shopify admin panel of the store.
- Click on the ‘Online Store’ > ‘Themes’.
- Now click on the ellipsis (…) menu.
- Then go to the “Download theme file” to backup the theme file for safety.
After a few minutes, Shopify will provide your theme file through email. You can download the theme file, and restore it if you make any mistakes during the theme code editing process.
Automatically Backup Your Store Data Daily/Weekly with Syncora
Besides the theme file code, every single piece of data like product info, content, images, orders, and customer info, is very sensitive for a store. Once you lose this data, that means you lose your business.
So, you can add an extra layer of protection by using the Syncora Backup & Restore Shopify app. It will automatically backup your store data according to your command like daily, weekly, or monthly. Additionally, it has a free plan to protect your sensitive data from the store.
Why Late?
After completing the installation and setup process of the Syncora app, ensuring the security of the store’s data, go back to the admin dashboard.
Step 2: Go to the “Edit Code”
- Click on the “Online store” > “Themes” from the Shopify store admin panel.
- Click on the ellipsis (…) menu.
- Then go to the “Edit Code” to access the theme code editor.
Step 3: Add a New ‘Countdown Banner’ Section
- Search for “Section” or go to the Section folder manually.
- Click on the “Section” to open its files including the “Add a new section option”.
- Click on the “Add a New Section”.
Step 4: Select the File Extension & Name the File
- Here you have two file extensions for your Shopify countdown banner, select the “Liquid” file extension.
- Name the file like ‘countdown-banner’.
- Then click on the “Done” button to create the ‘countdown-banner.liquid’ file.
Step 5: Copy the Custom Code Below
{%- style -%}
/* Hero Section */
.hero-section {
background-color: {{ section.settings.background_color }};
background-image: url('https://via.placeholder.com/1920x1080'); /* Add your background image URL */
background-size: cover;
background-position: center;
width: 100%;
overflow: hidden;
}
.hero-content {
background: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay */
padding-top: 120px;
padding-bottom: 120px;
text-align: center;
color: {{ section.settings.text_color }}; /* Text color from settings */
position: relative;
}
.hero-content h1 {
font-size: 3rem;
margin-bottom: 20px;
color: {{ section.settings.text_color }};
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
}
/* Countdown Timer */
#countdown {
display: flex;
justify-content: center;
gap: 20px;
}
.countdown-item {
background: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 10px;
text-align: center;
min-width: 100px;
}
.countdown-item span {
display: block;
font-size: 2rem;
font-weight: bold;
}
.countdown-item .countdown-label {
font-size: 1rem;
margin-top: 5px;
opacity: 0.8;
}
/* Shop Now Button */
.shop-now-btn {
display: inline-block;
background-color: {{ section.settings.button_bg_color }};
color: {{ section.settings.button_text_color }};
padding: 12px 24px;
font-size: 1.2rem;
font-weight: bold;
border-radius: 8px;
text-decoration: none;
margin-top: 20px;
transition: background 0.3s ease-in-out;
}
.shop-now-btn:hover {
background-color: {{ section.settings.button_hover_bg_color }};
}
.add-a-water-text-shopidevs{}
.add-a-water-text-shopidevs>a {
position: absolute;
bottom: 15px;
right: 40px;
color: #fff;
font-size: 18px;
opacity: .4;
text-decoration: none;
}
{%- endstyle -%}
<div class="hero-section">
<div class="hero-content">
<h1>{{ section.settings.banner_heading }}</h1>
<p>{{ section.settings.banner_text }}</p>
<div id="countdown">
<div class="countdown-item">
<span id="days"></span>
<span class="countdown-label">Days</span>
</div>
<div class="countdown-item">
<span id="hours"></span>
<span class="countdown-label">Hours</span>
</div>
<div class="countdown-item">
<span id="minutes"></span>
<span class="countdown-label">Minutes</span>
</div>
<div class="countdown-item">
<span id="seconds"></span>
<span class="countdown-label">Seconds</span>
</div>
</div>
{% if section.settings.button_link != blank %}
<a href="{{ section.settings.button_link }}" class="shop-now-btn">
{{ section.settings.button_text }}
</a>
{% endif %}
<div class="add-a-water-text-shopidevs">
<a target="_blank" href="https://apps.shopify.com/revolution-slider?utm_source=Shopidevs_article&utm_medium=countdown_banner_shopify&utm_campaign=ShopiDevs_marketing&utm_term=provided_free_code">Get Countdown Templates for Free</a>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const countdownEndDate = "{{ section.settings.end_date }}";
if (!countdownEndDate) {
document.getElementById("countdown").innerHTML = "<p>Please set an event date in theme settings.</p>";
return;
}
const countDownDate = new Date(countdownEndDate).getTime();
function updateCountdown() {
const now = new Date().getTime();
const distance = countDownDate - now;
if (distance <= 0) {
document.getElementById("countdown").innerHTML = "<p>The event has started!</p>";
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);
document.getElementById("days").textContent = days;
document.getElementById("hours").textContent = hours;
document.getElementById("minutes").textContent = minutes;
document.getElementById("seconds").textContent = seconds;
}
setInterval(updateCountdown, 1000);
updateCountdown();
});
</script>
{% schema %}
{
"name": "Countdown Section",
"settings": [
{
"type": "text",
"id": "banner_heading",
"label": "Banner Heading",
"default": "Welcome to the Big Event!"
},
{
"type": "text",
"id": "banner_text",
"label": "Banner Text",
"default": "Join us for an unforgettable experience. The event starts in:"
},
{
"type": "text",
"id": "end_date",
"label": "Event End Date",
"default": "2026-01-01T00:00:00",
"info": "Enter the event end date in YYYY-MM-DDTHH:MM:SS format."
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#FFFFFF"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Shop Now"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link",
"default": "/collections/all"
},
{
"type": "color",
"id": "button_bg_color",
"label": "Button Background Color",
"default": "#FF5733"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "button_hover_bg_color",
"label": "Button Hover Background Color",
"default": "#E04E1F"
}
],
"presets": [
{
"name": "Countdown Section"
}
]
}
{% endschema %}
Step 6: Paste the Code to the Countdown Banner Section
- Open the “countdown-banner.liquid” file.
- Remove all existing code from the file.
- Paste the custom code you have copied at the previous step, provided by ShopiDevs.
- Click on the “Save” button, and exit the page.
Step 7: Go to Theme Editor
- Go to the Shopify store admin dashboard.
- Click on the “Online Store” > “Themes” > Customize.
Step 8: Add Section > Countdown Banner
- Click on the ‘+’ icon, which is the “Add New Section” option.
- Search for “Countdown” or manually find the “Countdown Section”.
- Then click on it to add the countdown section to your Shopify store.
Step 9: Set the Offer Text and End Date
Now you need to customize the countdown banner. Here you can:
- Set your countdown timer’s title.
- Set a short description, that can explain your event or sales.
- Set the event date or ending date.
- Change the background color.
- Change text color.
- Change button text, text color, and background color.
- And add a link to the button to the countdown timer banner.
Finally, Save changes to the countdown timer banner.
Step 10: Preview the Storefront
By following these 10 simple steps, you can integrate a countdown timer banner on your Shopify store without an app or coding knowledge. Because I have provided the custom code for you to create a countdown timer.
However, you can consider using Apps like “Slider Revolution & Sections” which has a lot of countdown templates. These templates are visually stunning and increase conversion rates by creating an urgency.
Add Countdown Banner on Shopify Using Templates (Easiest Way)
A custom countdown banner requires coding skills, designing knowledge, and other advanced technical skills. That’s why Slider Revolution & Section made creating a countdown banner easier by offering a wide range of templates. Here are 10 simple steps you need to follow to create a countdown timer banner:
Step 1: Login to Shopify Store
- If you are a Shopify partner log in to your Shopify partner dashboard.
- If you are a store owner, log in to your Shopify store admin panel.
Step 2: Install the Slider Revolution & Sections App
- Go to the Shopify app store.
- Search for “Slider Revolution & Section”.
- Click on the “Install” button to install the Slider Revolution & Section app.
Once you have installed the Slider Revolution app, it will redirect you to the Slider Revolution & Sections app’s dashboard.
Step 3: Activate the Slider Revolution App
- Click on the ‘Enable’ button from the Slider Revolution app dashboard.
- It will redirect you to the Shopify store’s “App Embeds” section.
- Ensure the ‘Slider Revolution & Section’ app is activated.
- Then click on the “Save” button.
Let’s go back to the Slider Revolution & Sections app dashboard.
Step 4: Explore “New Slider from Templates”
- Click on the “My Slider” option.
- Then click on the “New Slider from Template”.
Additionally, you can create a countdown slider from the New Blank Slider or you can Manually Import Slider Zip from your computer. Currently, I don’t have any zip files, and I don’t want to create a slider from scratch. Because it is time-consuming and requires design knowledge which is a hassle for non-designers like me. So, I’m going to explore countdown banners from templates.
Step 5: Search for ‘Countdown’ & Install a Template
- Search for ‘countdown’ from the all templates section.
- Click on the “+” plus icon to install the countdown banner template.
- Then click on the “Install Template” button to add the countdown template to your Slider Revolution dashboard.
Step 6: Start Editing Your Countdown Banner Template
- Click on the “Pen” icon to access the template customization panel.
Step 7: Customize the template and Copy the Shortcode
In this template editing panel, you can customize everything in your countdown template.
- First, you need to select the slider and layer where you want to customize.
- Then, customize the text, layout, background, images, videos, animation, effects, button text, color, etc.
- Also, you can customize the position of the countdown timer.
- Then click on the “Save” button to save the countdown banner template.
- Finally, copy the shortcode from the “How to Publish” button or “General Module Options > Title > Module Naming” as you can see in the screenshot below.
Note: If you have any issues with customizing your countdown templates, contact our support team for free. Once you have finalized the countdown banner, go back to the Shopify store dashboard and theme editor from “Online Store > Themes > Customize”.
Step 8: Add a New “Countdown” Section/Block to the Store
- Click on the “Add Section” option (‘+’ plus icon) on the banner section where you want to add the countdown timer.
- Go to the “Apps” section.
- Then add the “Countdown Slider” app block to the store.
Step 9: Paste the Shortcode and Save
At the countdown slider, you will have the option to provide the shortcode.
- Paste the shortcode that you have copied in ‘Step 7.
- Set the countdown timer date and time following the format “yyyy-mm-dd hh:mm”.
- Then click on the “Save” button.
Step 10: Preview the Storefront
Let’s visit your Shopify storefront to check the countdown timer working properly.
By following these 10 simple steps, you can create an amazing countdown banner on Shopify. Additionally, you can explore more countdown or coming soon templates from Slider Revolution template collections.
5 Best Countdown Banner Templates on Shopify
Countdown banners help boost urgency and increase conversions. Also, it can be used for an under-maintenance page, upcoming products, coming soon page, etc. Here are the five best countdown banner templates for Shopify:
1. Black Friday Event Countdown Template
Search for “Countdown” or “Black Friday” to add this countdown timer to the Store. You can create urgency for sales with this bold, eye-catching Black Friday sale banner. Dynamic timers, animated text, and gradient effects can easily grab attention. Customizable colors and layouts fit any store. This is perfect for Black Friday sales, holiday promotions, and any seasonal sales.
2. Coming Soon Countdown Banner Template
Search for “Coming Soon” or explore the “Coming Soon” category to select this countdown timer. You can build anticipation for new launches with this sleek design. Features smooth animations, newsletter signup forms, and a minimalist timer.
3. Coming Soon Add-On Countdown Banner Template
Explore the “Coming Soon” category from the Slider Revolution & Section dashboard to find this template. It blends smoothly with your store’s design and keeps customers engaged before the big reveal.
4. Under Construction Countdown Timer Template
Search for “Under Construction” or explore the “Coming Soon” category from the Slider Revolution templates. You can inform your visitors that your store is under maintenance with this modern countdown timer.
5. Launching Very Soon Countdown Timer Template
Search for “Launching” from all templates of the Slider Revolution & Sections templates. This template is great for pre-launch pages with a sleek countdown timer and engaging design. It builds hype and encourages early sign-ups for your new store or product.
5 Best Practices to Implement Countdown Banner on Your Shopify
Of course, an effective countdown banner has the strength to boost sales by creating urgency. But you should focus on simplicity, honest deadlines, mobile optimization, and strong CTAs. Here are 5 effective tips to implement a countdown timer on your Shopify store.
- Keep the Design Simple and Eye-Catching: Use clean visuals and clear text to grab attention without cluttering the page. You can use bold colors that align with your brand guidelines, a readable font, and animated timers.
- Set Realistic and Authentic Deadlines: Use honest timeframes (e.g., “24 hours left” or “Deadline of the Season”) to build trust. This will help to increase credibility and feel genuine to your customers.
- Ensure Mobile Responsiveness Test banners on all devices. Timers and text should resize smoothly, ensuring seamless visibility on smartphones.
- Use an Engaging Call-to-Action (CTA): Include a clear and compelling CTA to guide visitors toward taking action.
- Monitor Performance and Update Regularly Track click-through rates and sales impact. Refresh designs, deadlines, or CTAs based on analytics to maintain effectiveness.
Conclusion
As you know, countdown banners on Shopify are powerful ways to create urgency, inform customers about updates, and boost sales. These help to capture your visitor’s attention and encourage them to make quick decisions. However, adding a countdown timer might be overwhelming for a non-technical person.
That’s why I have shown 2 different ways to add a countdown timer banner on Shopify. First, you can add the timer using custom code. We have provided the code for free in this article so that you don’t need to install an app or hire a developer to add this countdown template.
Just you need to copy the code from this article and paste it into the Shopify store theme editor. But if you consider the Slider Revolution & Sections app, you will have access to several countdown templates.
So, you can easily add a countdown banner using these stunning templates of Slider Revolution & Sections.
FAQs
What is a Countdown Timer?
A countdown timer shows how much time is left before an event (like a sale) ends. It creates urgency, motivates customers, and encourages them to act fast before time runs out.
Does Shopify Have a Countdown Timer?
No, Shopify doesn’t have a built-in timer, but you can add one using apps like Slider Revolution templates or using custom code. In this blog, I have provided 2 ways along with a step-by-step guide and free resources to add a countdown timer to your Shopify store.
How Do I Add a Countdown Banner on Shopify?
You can add a countdown banner by installing a Shopify app or using a custom HTML code.
Using an app:
- Install Slider Revolution & Sections App.
- Choose a Countdown Template.
- Integrate the Template with the Shopify theme Editor through a shortcode.
- Save the Countdown Banner to your store.
Using Custom code:
- Go to the Shopify theme code editor.
- Create a new section file “countdown-banner.liquid”.
- Copy the custom code from here.
- Remove existing code from the countdown-banner file and paste the code.
- Save code.
- Go to the Shopify theme editor.
- Add a new “Countdown Banner” section.
- Set the date when end the sale or event.
- Save the changes.
By following those methods, you can countdown banners on Shopify.
Jakaria is an SEO Content Writer in Shopify, Ecommerce, WordPress, and Tech Industry with 4+ years of experience. He specialises in developing engaging, helpful content by simplifying complex topics into an amazing story for B2B, SaaS, and Shopify businesses. He’s also passionate about staying updated on SEO strategies and Shopify trends.
