How to Add Countdown Timer to Shopify Store? – Guide

By Sanjay Jethva|

Updated on: Jan 30,2024|

Shopify,

Easily Create & Customize Timer Bars

15+ preset templates. Customization options. And more.

Install Now

Running flash sales and want to promote limited-time deals? Countdown timer in Shopify can be an excellent option.

The Shopify timer bar can help you create a fear of missing out (FOMO) effect amongst the visitors. And promote the deals to drive more sales. In this tutorial, we’ll discover the Shopify Countdown timer and learn how to add it.

Table of Contents

What is a Shopify Countdown Timer?
Benefits of Adding Shopify Countdown Banner Timer
Methods to Add a Countdown Timer to Shopify
How to Add Shopify Countdown Timer Using App?
How to Add a Countdown Timer to Shopify Manually Using Code?
Win Conversions with Shopify Countdown Sales Timer

Let’s get started with the complete guide on how to add Shopify countdown timer.

What is a Shopify Countdown Timer?

Shopify countdown timer is a clock displayed as a popup or banner on the website that encourages visitors to take action before time runs out. It is used as a marketing tactic to promote limited-time offers like discounts during a sale.

Here is an example of a Shopify countdown sales timer:

Shopify countdown timer example

Generally, the Shopify countdown timer bar contains a message with a call to action button.

The benefits of adding a countdown timer Shopify can not be ignored. It helps the merchants in a number of ways. Here’s how you can benefit from adding Shopify Sales Timer to your store:

Create FOMO: You can add countdown timer to Shopify to create a sense of urgency by promoting limited-time deals and offers.
Increase conversion rate: Shopify countdown timer app helps you increase the e-commerce conversion rate by encouraging the visitors to take actions.
Drive more sales: Countdown timer on Shopify is a good way to promote the seasonal and limit-time sales and generate more revenue.

Overall, using a countdown timer for Shopify is a great way to increase conversion rates and boost revenue by creating a FOMO.

Methods to Add a Countdown Timer to Shopify

There are multiple ways to add countdown timer bar to Shopify. The approach varies from store-to-store. Here are the most-common ways add sales countdown bar in Shopify:

Use Shopify App: You can simply use a Shopify app for Countdown timer. For e.g., apps like Meetanshi Countdown Timer Bar helps you quickly add a timer bar in Shopify with plenty of pre-defined templates. It is the quickest and easiest method.
Code Manually: This method is a bit difficult and risky, but allows you to add Shopify countdown timer free.

Another possible way on how to add countdown timer to Shopify is using landing page builders. Many landing page builders allow adding sales timer bars on pages. If you’re using one, check it’s features.

How to Add Shopify Countdown Timer Using App?

There are many Shopify countdown timer apps available in the official app store. Our recommendation is to go with the Meetanshi countdown timer for Shopify. Strongly, it is the best countdown app for Shopify that is easy to use, offers preset templates, and can be set up in less than 5 minutes.

To get started, install the Meetanshi Countdown Timer app in your Shopify store.

Install Meetanshi Countdown Timer app from Shopify app store

Once the countdown Shopify app is installed, go to Theme Settings > App Embeds and enable the Shopify countdown timer app. (You can also find the direct link to this section from the app dashboard.)

And “Save” settings.

Enable the Meetanshi Countdown Timer Bar app from the Theme Settings > App Embeds

Now, navigate to Meetanshi Countdown Timer Bar > Settings, where you can enable the Shopify sales timer, choose template, and customize it.

Start by choosing any of the simple or graphical templates in the countdown timer app Shopify. You’ll also get a live preview of the timer bar as you customize it.

Choose Countdown Timer bar template in the app

Now, scroll down to the Content Configuration section. Here, you can customize the look and feel of the Shopify countdown timer using the following settings:

Enable or disable the Shopify countdown timer bar
Customize the countdown timer bar & button text
Show the close button to close Shopify countdown timer
Configure the user interaction settings with the timer bar

Content configuration for the Shopify countdown timer bar app

Now, scroll down and set time and date for the Shopify app countdown timer.

You can also customize the colors for background, text, buttons and choose from various background types.

Set time and customize timer bar colors

Finally, set the page and device targeting settings. (You can choose the pages and target devices to display the timer bar.)

Set page and device targeting for the Shopify countdown timer bar

Click “Save” to activate the Shopify countdown timer bar.

The Shopify countdown timer bar will be displayed on the frontend as configured. That’s how easy it is to add a countdown timer to Shopify!

Shopify Countdown Timer bar using app

Install Shopify countdown timer bar

& quickly create & customize beautiful timer bars

⚡ 15+ in-built templates
🥳 Fully-responsive designs
🚀 Boost conversions & sales

Install Now!

How to Add a Countdown Timer to Shopify Manually Using Code?

In the manual coding method, you need to create a Shopify countdown timer code snippet. And then call it in the theme.liquid file. You can also declare settings schema for ease of customization. This is an ideal method to add a free countdown timer Shopify.

Here’s how you can add countdown timer Shopify code.

In the Shopify admin, go to Sales Channels > Online Store > Themes

Click the three dots beside the “Customize” button and select “Edit code” from the dropdown menu.

Edit Shopify theme code to add countdown timer

Now, the Shopify theme editor will open.

In the left menu, navigate to Snippets and click “Add a new snippet.”

Enter meetanshi-countdown-timer as the filename and click “Save.”

Create a new snippet code for countdown timer

Now, copy the following countdown timer liquid snippet code:

<div class="container {{ settings.countdown_position }}" style="background-color: {{ settings.countdown_bg_color }}; color: {{ settings.countdown_text_color }};">
  <div class="close-button" onclick="closeCountdown()">✕</div>
  <div id="countdown-bar">
    <div id="pre-countdown-message">
      <span style="font-size: {{ settings.main_text_size }}px;">{{ settings.countdown_text }}</span>
      <div id="countdown">
        <ul>
          <li><span id="days"></span> Days</li>
          <li><span id="hours"></span> Hours</li>
          <li><span id="minutes"></span> Minutes</li>
          <li><span id="seconds"></span> Seconds</li>
        </ul>
      </div>
    </div>
    <div id="post-countdown-message" style="display: none;">
      <span style="font-size: {{ settings.timer_text_size }}px;">{{ settings.post_countdown_text }}</span>
    </div>
    {% if settings.countdown_button_label != blank %}
      <a href="{{ settings.countdown_button_link }}" style="color: {{ settings.button_text_color }}; font-size: {{ settings.button_text_size }}px; background-color: {{ settings.countdown_button_color }};">{{ settings.countdown_button_label }}</a>

    {% endif %}
  </div>
</div>
<script>
  (function () {
    const second = 1000,
          minute = second * 60,
          hour = minute * 60,
          day = hour * 24;

    let timerEnd = new Date("{{ settings.countdown_date }}").getTime(),
        countdownEl = document.getElementById("countdown"),
        postMessageEl = document.getElementById("post-countdown-message"),
        x = setInterval(function() {    
          const now = new Date().getTime(),
                distance = timerEnd - now;

          if (distance < 0) {
            clearInterval(x);
            document.getElementById("headline").innerText = "{{ settings.post_countdown_text }}";
            countdownEl.style.display = "none";
            postMessageEl.style.display = "block";
          } else {
            countdownEl.style.display = "block";
            document.getElementById("days").innerText = Math.floor(distance / (day));
            document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour));
            document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute));
            document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
          }
        }, 1000);
  }());

  function closeCountdown() {
  const container = document.querySelector(".container");
  container.style.display = "none";
}

</script>

<style>
  .container {
    text-align: center;
    padding: 10px;
    position: fixed;
    width: 100%;
    z-index: 999;
  }

  .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #ffffff;
  width: 30px;
  height: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
}

  .container.top {
    top: 0;
  }
  .container.bottom {
    bottom: 0;
  }
  #countdown-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  #countdown ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  #countdown ul li {
    display: inline-block;
    text-align: center;
    background-color: {{ settings.countdown_bg_color }};
    padding: 5px; /* Adjust the padding as needed */
    border-radius: 5px; /* Optionally, add some border radius for styling */
  }
  #countdown ul li span {
    display: block;
    font-size: {{ settings.timer_text_size }}px; /* Control timer text size */
    color: {{ settings.countdown_text_color }};
  }
  span {
    font-size: {{ settings.main_text_size }}px; /* Control main text size */
  }
  a {
    color: {{ settings.button_text_color }}; /* Control button text color */
    padding: 10px 20px;
    text-decoration: none;
    font-size: {{ settings.button_text_size }}px; /* Control button text size */
    display: inline-block;
  }
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<span style="font-size: {{ settings.main_text_size }}px;">{{ settings.countdown_text }}</span>

<ul>

<li><span id="hours"></span> Hours</li>

<li><span id="minutes"></span> Minutes</li>

<li><span id="seconds"></span> Seconds</li>

</ul>

</div>

<span style="font-size: {{ settings.timer_text_size }}px;">{{ settings.post_countdown_text }}</span>

</div>

{% if settings.countdown_button_label != blank %}

<a href="{{ settings.countdown_button_link }}" style="color: {{ settings.button_text_color }}; font-size: {{ settings.button_text_size }}px; background-color: {{ settings.countdown_button_color }};">{{ settings.countdown_button_label }}</a>

{% endif %}

</div>

(function () {

const second = 1000,

minute = second * 60,

hour = minute * 60,

day = hour * 24;

let timerEnd = new Date("{{ settings.countdown_date }}").getTime(),

countdownEl = document.getElementById("countdown"),

postMessageEl = document.getElementById("post-countdown-message"),

x = setInterval(function() {

const now = new Date().getTime(),

distance = timerEnd - now;

if (distance < 0) {

clearInterval(x);

document.getElementById("headline").innerText = "{{ settings.post_countdown_text }}";

countdownEl.style.display = "none";

postMessageEl.style.display = "block";

} else {

countdownEl.style.display = "block";

document.getElementById("days").innerText = Math.floor(distance / (day));

document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour));

document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute));

document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

}

}, 1000);

}());

function closeCountdown() {

const container = document.querySelector(".container");

container.style.display = "none";

}

</script>

<style>

.container {

text-align: center;

padding: 10px;

position: fixed;

width: 100%;

z-index: 999;

}

.close-button {

position: absolute;

top: 10px;

right: 10px;

cursor: pointer;

color: #ffffff;

width: 30px;

height: 30px;

font-weight: bold;

text-align: center;

line-height: 30px;

}

.container.top {

top: 0;

}

.container.bottom {

bottom: 0;

}

#countdown-bar {

display: flex;

align-items: center;

justify-content: space-around;

}

#countdown ul {

list-style-type: none;

padding: 0;

margin: 0;

}

#countdown ul li {

display: inline-block;

text-align: center;

background-color: {{ settings.countdown_bg_color }};

padding: 5px; /* Adjust the padding as needed */

border-radius: 5px; /* Optionally, add some border radius for styling */

}

#countdown ul li span {

display: block;

font-size: {{ settings.timer_text_size }}px; /* Control timer text size */

color: {{ settings.countdown_text_color }};

}

span {

font-size: {{ settings.main_text_size }}px; /* Control main text size */

}

a {

color: {{ settings.button_text_color }}; /* Control button text color */

padding: 10px 20px;

text-decoration: none;

font-size: {{ settings.button_text_size }}px; /* Control button text size */

display: inline-block;

}

</style>

And paste it into the newly created snippet file.

Then click “Save.”

Save shopify countdown timer code snippet

Now, open the settings_schema.json file under the Config folder.

Copy the following code:

{
  "name": "Countdown Timer",
  "settings": [
    {
      "type": "text",
      "id": "countdown_text",
      "label": "Countdown Text",
      "default": "Our winter sales is on! Get up to 40% OFF on all products."
    },
    {
      "type": "text",
      "id": "countdown_date",
      "label": "Countdown Date (yyyy-mm-dd)",
      "default": "2024-01-01"
    },
    {
      "type": "text",
      "id": "post_countdown_text",
      "label": "Countdown Ended Text",
      "default": "Our offer has ended!"
    },
    {
      "type": "color",
      "id": "countdown_text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "countdown_bg_color",
      "label": "Background Color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "countdown_button_label",
      "label": "Button Label",
      "default": "Explore Now!"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "button_text_size",
      "label": "Button Text Size",
      "min": 12,
      "max": 48,
      "step": 1,
      "default": 24,
      "unit": "px"
    },
    {
      "type": "url",
      "id": "countdown_button_link",
      "label": "Button Link",
      "default": "/collections/all"
    },
    {
      "type": "color",
      "id": "countdown_button_color",
      "label": "Button Color",
      "default": "#ff0000"
    },
    {
      "type": "select",
      "id": "countdown_position",
      "label": "Position",
      "options": [
        {
          "value": "top",
          "label": "Top"
        },
        {
          "value": "bottom",
          "label": "Bottom"
        }
      ],
      "default": "top"
    },
    {
      "type": "range",
      "id": "main_text_size",
      "label": "Main Text Size (px)",
      "min": 12,
      "max": 48,
      "step": 1,
      "default": 24,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "timer_text_size",
      "label": "Timer Text Size (px)",
      "min": 12,
      "max": 48,
      "step": 1,
      "default": 24,
      "unit": "px"
    }
  ]
},

100

101

102

103

104

105

{

"name": "Countdown Timer",

"settings": [

{

"type": "text",

"id": "countdown_text",

"label": "Countdown Text",

"default": "Our winter sales is on! Get up to 40% OFF on all products."

{

"type": "text",

"id": "countdown_date",

"label": "Countdown Date (yyyy-mm-dd)",

"default": "2024-01-01"

{

"type": "text",

"id": "post_countdown_text",

"label": "Countdown Ended Text",

"default": "Our offer has ended!"

{

"type": "color",

"id": "countdown_text_color",

"label": "Text Color",

"default": "#ffffff"

{

"type": "color",

"id": "countdown_bg_color",

"label": "Background Color",

"default": "#000000"

{

"type": "text",

"id": "countdown_button_label",

"label": "Button Label",

"default": "Explore Now!"

{

"type": "color",

"id": "button_text_color",

"label": "Button Text Color",

"default": "#ffffff"

{

"type": "range",

"id": "button_text_size",

"label": "Button Text Size",

"min": 12,

"max": 48,

"step": 1,

"default": 24,

"unit": "px"

{

"type": "url",

"id": "countdown_button_link",

"label": "Button Link",

"default": "/collections/all"

{

"type": "color",

"id": "countdown_button_color",

"label": "Button Color",

"default": "#ff0000"

{

"type": "select",

"id": "countdown_position",

"label": "Position",

"options": [

{

"value": "top",

"label": "Top"

{

"value": "bottom",

"label": "Bottom"

}

"default": "top"

{

"type": "range",

"id": "main_text_size",

"label": "Main Text Size (px)",

"min": 12,

"max": 48,

"step": 1,

"default": 24,

"unit": "px"

{

"type": "range",

"id": "timer_text_size",

"label": "Timer Text Size (px)",

"min": 12,

"max": 48,

"step": 1,

"default": 24,

"unit": "px"

}

]

And paste it after the first square bracket in the file.

Click “Save.”

add settings schema for the shopify countdown timer

To render the countdown timer bar in Shopify theme, copy the following code:

{% render 'meetanshi-countdown-timer' %}

1	{% render 'meetanshi-countdown-timer' %}

And put it before </body> tag, as shown below.

Render countdown timer code in Shopify theme

Click “Save.”

You can also place the code in the respective liquid file to add countdown timer to specific pages, for e.g. add Shopify countdown timer on password page.

Once you’re done modifying the Shopify theme code, you can customize the coutndown timer bar from the theme settings.

Go to Sales Channels > Online Store > Themes and click the “Customize” button.

Customize shopify theme to add countdown timer to shopify

In theme customization, move to “Theme Settings” and expand the Countdown Timer to configure the settings.

Here, you can customize how you want to display the countdown timer in Shopify. For example, you can:

Customize the countdown timer text
Set the date for the countdown timer
Change colors for the text, button, and background
Change sizes of text
Set destination URL for the CTA button
Position the countdown timer to top or bottom of the page

Configure countdown timer in Shopify

Once you’re done customizing countdown timer in Shopify theme settings, click “Save.”

It will add countdown timer to Shopify store, which will look like this:

add countdown timer to shopify store

Now, that’s really impressive and quick!

Win Conversions with Shopify Countdown Sales Timer

Leverage the methods provided above to add a countdown timer to Shopify. You can either go with the quick app way or do manual coding, depending on your expertise. But we recommend you to try the Meetanshi Shopify Countdown Timer app. It offers advanced customization options like button animations, graphical backgrounds, and page targeting to create compelling and successful countdown timer bars.

Quickly create & customize countdown timer bars in Shopify.

Install App

4.9

(based on 14 Reviews)

Sanjay Jethva

Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe.

His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.

How to Add Stripe to Shopify – Quick Steps

Magento 2 Shopping Assistance: What It Is & How It Works?

How to Add Countdown Timer to Shopify Store? – Guide

What is a Shopify Countdown Timer?

Benefits of Using Shopify Countdown Banner Timer

Methods to Add a Countdown Timer to Shopify

How to Add Shopify Countdown Timer Using App?

How to Add a Countdown Timer to Shopify Manually Using Code?

Win Conversions with Shopify Countdown Sales Timer

Prev

Next

12 Best Shopify Themes For Personalized Products Stores

7 Best Shopify Review Importer Apps [Display & Convert]

Leave a Reply Cancel reply

Customer Service

Quick Links

Address

Client's Love

How to Add Countdown Timer to Shopify Store? – Guide

What is a Shopify Countdown Timer?

Benefits of Using Shopify Countdown Banner Timer

Methods to Add a Countdown Timer to Shopify

How to Add Shopify Countdown Timer Using App?

How to Add a Countdown Timer to Shopify Manually Using Code?

Win Conversions with Shopify Countdown Sales Timer

Prev

Next

12 Best Shopify Themes For Personalized Products Stores

7 Best Shopify Review Importer Apps [Display & Convert]

Leave a Reply Cancel reply

Customer Service

Quick Links

Address

Client's Love

Share

Copy short link