Shopify tutorial: How to add Countdown Timer Bar with examples

Why do you need a countdown timer for your Shopify Store?

1. To add a sense of urgency along with a product discount/offer.
2. Quick and easy way to boost user engagement.
3. Create a store flash sale based on festivals, occasions, etc. such as black Friday sale, Christmas sale, etc.

Countdown Timer Examples

Countdown Timer Banner: anirutest2.myshopify.com (password: demo)

Countdown Timer Popup: anirutest2.myshopify.com/collections/all (password: demo)

Watch this video on YouTube.

1) Install “Profy Discount & Countdown Bar” Shopify plugin

Link: https://apps.shopify.com/profy-promo-bar

Profy is a free shopify plugin which allows you to create countdown timer sticky banners, countdown timer popups with many other options. It is much easier to create a countdown timer with this plugin rather than having to do it manually.

2) Enable App embed

Once the app is installed, you need to enable App embed so that the banner is visible on the storefront.

3) Click on Create Banner and Select “Countdown Banner”

There are multiple banner options to choose from but for this example, I will select “Countdown Banner” after clicking on the “Create Banner” button. Alternatively, you can also create a countdown timer through popup by selecting the “Countdown Popup” option.

4) Enter banner content

Based on your requirement, enter an appropriate banner message, button text, and destination URL where you want users to redirect on a button click.

5) Choose which pages to display on

By default the banner is displayed on all pages but you can customize it to be displayed on only selected pages.

6) Customize countdown timer design base on your Store theme

You can choose between five unique timer designs and modify label, digit and background colors.

Countdown Type: End Date

Here the timer counts down to the end date set by the user. For example, If I have a discount on a product that ends in the next five days, then I will set the end date as five days from now. 

The countdown timer displays the time remaining which is the end date minus the current date. If the current date exceeds the end date, the countdown timer expires and is hidden.

To create a countdown based on the end date, navigate to the “Countdown Setup” tab select the countdown type as “Till end date”, select the appropriate end date, and save the banner. 

Countdown Type: Time Duration

This option allows you to create an evergreen countdown timer that counts down from a duration and resets the timer when the countdown ends.

For example, I have a discount on a product that doesn’t end but I want to add a sense of urgency for customers by displaying a countdown timer all the time.

So I will create a countdown timer with a duration of 8 hours and enable “Repeat timer after deadline”. The result will be a countdown timer that starts with 8 hours remaining and resets the timer back to 8 hours when the countdown ends. Thus the countdown timer never expires and it is displayed all the time.

To create a countdown based on the duration, select the countdown type as “Duration”, and select the appropriate duration days, hours, and minutes. If you need a recurring timer, enable “Repeat timer after deadline”. Finally, save the banner.

Countdown Type: Specific hours of a day

This option allows you to display a countdown timer between a specified hour window every day.

For example, 6 pm to 8 pm is the peak time when most customers visit my store, so I will create a countdown timer with a time window of 6 pm to 8 pm. The countdown timer appears in the store every day from 6 p.m. to 8 p.m. and is hidden when the current date is outside the time window.

To create a countdown based on the duration select the countdown type as “Specific hours of a Day”, and select the appropriate time window. If you don’t select an end date then the countdown timer will appear every day.