Adding a Countdown Timer to Your Emails

countdown timerAs we discussed in our last blog post and in our webinar last week, creating a sense of urgency is an absolutely crucial step in making a successful Black Friday campaign. That said, there’s no better way to foster the sense that sales are fleeting and products are flying off the shelves than a countdown clock.

So, how do you create one and add it to your emails? Adding a countdown timer to your emails can get pretty technical, but it doesn’t have to.

How to Make a Countdown Clock

Essentially, there are two ways you can display a countdown clock in your emails: you can use HTML to code one, or you can create a GIF file.

The simplest way is to create a GIF that counts down to your specified date or time. If you’ve spent any extended period of time on the internet, you’re probably already somewhat familiar with GIFs. A GIF is a compilation of images, which means you can create a countdown sequence by changing one aspect of the image at a time. Think of it as a sort of stop motion film – as long as the background doesn’t change, the GIF will move seamlessly between images. In the example above, I only changed the numbers on the clock. You can also add other animations to the GIF, like changes in color or images. We wrote a post on GIFs in ecommerce emails last year, so check it out if you’re looking for inspiration. There are many online tools to help you create GIFs – gifmaker.me is what we used to make ours.

Using Photoshop or any other type of image editor, it’s easy to create the sequence of images you’d like to use. Then, all you have to do is upload these images to a site like gifmaker.me to create your own GIF. You can also convert a video into a GIF using a tool like Blog GIF.

Alternatively, you can code your own countdown clock using HTML. RMK Web Design has some snippets of code that you can copy into your emails.

How to Use GIFs in Your Black Friday Campaigns

Email Editor

You can add a GIF in exactly the same way you would insert an image using Klaviyo’s image uploading tool. A countdown clock would be especially effective in the final email leading up to the start of sales, with an hour or so left on the clock.

GIFs are also a great way to display different colors or variations of products. So, if you’re running a sale featuring an item in several colors or styles, GIFs can effectively get your message across without the need for several redundant images. GIFs can also be used to showcase the features of a certain product, like K-Way’s water-resistant jacket below.

full12-8ba72734cc93c655b99f5f5a1f5e035b-1

Facts to Keep in Mind

GIFs are awesome, but too many in one email can be flashy and distracting. It’s best to keep their use limited to one (or two max, if you’re using something simple, like a countdown clock) per email.

Another thing to bear in mind is that GIFs will automatically reset when a recipient leaves the page, and will remain constant no matter when a recipient opens the email – if you send the email at 11:00 PM with a countdown for one hour and a recipient opens the email at 11:30 PM, the clock will still read one hour.

And lastly, earlier versions of Outlook (2007, 2010, and 2013) don’t support GIFs; these domains will simply display the first fame in the GIF, so make sure it’s an image that can stand alone.

Are you going to use a countdown clock in your Black Friday emails? Have you used GIFs in your emails before? Let us know in the comments.

 

5 Ways Your Ecommerce Store Can Stand Out This Black Friday & Cybe…

 

 

Upworthy’s Headlines Are Awful. Here’s Why They Work and W…

 

 

3 Ways to Make Sure Your Email Subscribers Stick Around

 

.yuzo_related_post img{width:260px !important; height:250px !important;}
.yuzo_related_post .relatedthumb{line-height:16px;background: !important;color:!important;}
.yuzo_related_post .relatedthumb:hover{background:#ffffff !important; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear;;color:!important;}
.yuzo_related_post .relatedthumb a{color:#323b43!important;}
.yuzo_related_post .relatedthumb a:hover{ color:}!important;}
.yuzo_related_post .relatedthumb:hover a{ color:!important;}
.yuzo_related_post .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb:hover .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb{ margin: 0px 0px 0px 0px; padding: 5px 5px 5px 5px; }

jQuery(document).ready(function( $ ){
//jQuery(‘.yuzo_related_post’).equalizer({ overflow : ‘relatedthumb’ });
jQuery(‘.yuzo_related_post .yuzo_wraps’).equalizer({ columns : ‘> div’ });
})

Back to Blog Home

7 comments

  • Hey Marissa here’s a simple solution that works: http://sendtric.com/

    • Nice. I was looking for something like this a while ago. Thanks.

    • Thanks so much for sharing!

    • I use https://countdownmail.com is a very powerful app to create countdown timers. It also allows creating evergreen countdown timer

  • Marissa. I wanted to share our tools as an alternative to making your own .gif. NiftyImages.com will allow you to select an End Date and then we automatically make the .gif for you. Best part is, each time the user opens the email, we make a new .gif that reflects the time until the End Date. Doing it your way would always show 1 day, 2 hours left. Using NiftyImages, the countdown is unique each time the user opens the email and even gives you an option to show an Expiration Image, after the time is up.

  • I tried inserting a countdown clock in an email using the one I made on with sendtric.com (as well as another similar one). It looked fine on the desktop but when I tested the email on mobile, it would either cause the margins to be so wide the text fell off the side or made the text very small (I think it did one or the other based on whether or not I centred the timer). Any solutions to this in Klaviyo?

    • Hey, Chris. Sounds very specific. Best to submit a ticket to success@klaviyo.com . They’ll want to take a look at the template.

Comments are closed.