How to Create a Countdown Timer in Magento 2

Creating and inserting a timer into your website is a good stimulating tool, motivating customers to take action. Magento 2 itself allows to add special prices to products. What is the best and fast way to remind customers about current or upcoming discounts? Countdown timers offer clients some useful information about the benefits they can get. For example, the special offer with 80 % discount ending in three hours’ time or one day sale of customers' favorite headphones.

The Special Price Countdown extension for Magento 2 creates incentives and displays time and information for products with special prices. The extension enables the countdown if the offer is set to expire soon or available in the nearest future. The customizable timer format and template allows admins to create the effective countdown in Magento 2 that will attract customers' attention.

Are countdown timers useful?

1. Time is slipping away. Customers seeing the start or end countdown are acting fast as the opportunity can be missed and those half priced sneakers can be purchased by someone else. Use urgency within reasonable limits to induce customers into taking an action.
2. Increased conversion rate and boosted traffic. After you implement the timer with additional information into your Homepage, catalog and product pages, a lot of anxious customers will most likely get products at cheaper prices or bookmark a product page with the offered discount.

The extension enables an automatic countdown displaying the special price time period. If the special offer comes to an end, the end countdown is shown on product and category pages to remind customers about discounts which just expired. If the special offer is coming soon, the start countdown is displayed on product and category pages informing visitors about upcoming offers. You can also insert the timer into Homepage, related products, upsells and cross-sells as well. It is also possible to customize the Magento 2 countdown timer format via the HTML tags and variables.

Enable Countdown on Product Pages

After special prices were created for necessary products you can display the countdown timer on frontend. Let's get a deeper insight into how to enable the end countdown timer if the special end date is set.

You can find the general settings following STORES > Configuration > ITORIS EXTENSIONS > Special Price Countdown > Special Price End Countdown. The same configuration is applied per product as well.

1. Enable the countdown timer to be shown on Frontend.
2. Specify a number of days the timer is to be displayed before the special price is expired. If you enter "10" the countdown timer will be activated in 10 days before the special price end date.
3. Enable the timer on the product view in dropdown "Display on the Product View".
4. Define the countdown format. The format "HHHH:MM:SS" is available by default defining the unit of time. Let's enter the following format "DD days: HH hours: MM minutes: SS seconds".
5. Customize the timer text template using variables or the HTML tags if needed. The following template is available by default "<span style="color:red; font-size:14px;">Hurry up! Offer ends in {countdown}".
6. Save the changes.

You can also enable and customize the start countdown timer following STORES > Configuration > ITORIS EXTENSIONS > Special Price Countdown > Special Price Start Countdown. The special price start countdown notifies when the special price will be activated. You can leave the default settings unchanged or customize them according to your needs. This is how the special price start countdown looks on product pages.

Enable Countdown on Category Pages

Along with displaying the countdown timer on product pages you can show the separate and customizable timer on category pages.

1. Activate the end countdown on category pages in the "Display in Catalog" dropdown in the general settings.
2. Specify the countdown format in catalog. You can make it less detailed and enter days only.
3. Change the default template if needed, for example "Don't miss the opportunity! The offer will end in {countdown}".

The extension also allows to enable the countdown timer on category pages after the special price start date is specified.

1. Define the days the timer to be shown before the start date is activated.
2. Choose "Yes" in "Display in Catalog".
3. Customize the countdown format and its template in catalog if needed.
4. Save the changes.

This is how the special price start countdown looks on the category page.

Enable Countdown on Homepage

Both special price end and start countdown can be enabled on the homepage as well. There is no need to create additional blocks or insert widgets. All products with special prices inherit the category timer settings.

Enable Countdown per Product with Special Price

All product settings have a separate section allowing to configure the start and end countdown timers. Find the section following PRODUCTS > Catalog > choose a product > Special Price Countdown Settings. Clear the checkbox to make changes within the product. The settings for the special price start countdown will look as follow: