How to Create Special Price Counter in Magento Store

Lots of online stores have a counter that shows the time left till the end of some promo or discount. In this short tutorials we'd like to show how to implement such counter into a Magento website. This would be really easy, and for sure will not cause any difficulties.

This is what your counter will look like.


Online you can find a number of JS scripts, but we've chosen FlipClockJS. This script looks good, it's lightweight and really flexible.

To implement the counter you need to follow three simple steps:

Find out the promo deadline. Subtract from it your current time:

$counter_time = strtotime(here_goes_the_deadline) - strtotime("now");

Add div of your countdown:

<div id="special_countdown"></div>

Initialise the script:

var clock = jQuery('#special_countdown').FlipClock(<php echo $counter_time; ?>, {
	clockFace: 'DailyCounter',
	countdown: true

IF you want to tune this scrip, you find all the necessary info on the official website.

As a bonus here you can download less file with styles where you can change the size of counters.

Here is a repository with a fully functional Magento module.

Alex Bulat

Writing a blog post or building a micro niche WordPress website is something Alex can do bare-handed. You're welcome to contact him via Telegram, Facebook, or LinkedIn.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

Leave a Reply