How to Create GIF and HTML Countdown Timers for Emails

Countdown timer GIFs are fast to create and very effective when it comes to making promotional offers more actionable. Whether it is a limited-time offer, a special promotion, or a gentle reminder that some product will go out of stock soon, a neatly integrated countdown timer GIF can enhance its effectiveness.

In this article, we’ll cover pros and cons of GIF and HTML countdown timers, as well as ways of creating them in Mailchimp, Shopify, and more. Plus, we’ll show you how to add countdown timers to your email campaigns. 

What Is a Countdown Timer and Why Is It an Effective Marketing Tool?

A countdown timer is a virtual clock that shows how much time is left till a particular event (like the beginning or the end of a sale). There are two main ways to create such timers: as a GIF, or as an HTML code; we’ll tell you about their differences a bit later.

A countdown timer prompts subscribers to act :it literally shows that the clock is ticking. You can always adjust the timer to suit the needs of your campaign.

One thing you should remember about countdown emails is that they should be attention-grabbing. Be it eye-catching colors, large fonts, or other elements, they should visually stand out.

How to Create a Countdown Timer GIF

A countdown timer GIF is an animated image that is activated every time the email is opened. Since it’s an image file like a PNG and a JPEG, you can insert it into the image block of your template.

The easiest way to add a countdown timer GIF to your email is to find it online. There are tons of ready-made GIFs on websites like Giphy, Pinterest, or Tumblr. Just choose the one you like and voilà, your email is ready! 

Also, you can generate a countdown timer for an email with a drag-n-drop email editor.

If you want to create countdown timer GIF on your own, there are plenty of services that can help you. The idea is more or less the same: choose a template, customize the background, colors, set the event time, and save it as a GIF.  

Drawbacks of a Countdown Timer GIF

The main drawback of ready-made GIFs — they reset every time a user opens the email. It might cause some difficulties when you’re tied to a particular time. 

You can’t expect too much from a simple countdown timer GIF: the image won’t change based on when the subscriber opens the email and how it relates to the event.  

Still, even if the time your countdown timer GIF is off, you will certainly create FOMO in your email campaign. Besides, not so many users open emails more than once.

Bottom line: use countdown timer GIFs if you don’t need the content to update in real time. If you do, consider using an HTML countdown timer. 

How to Create an HTML Countdown Timer for Email

An HTML countdown timer is more flexible. Basically, it is a script that leads to a dynamically generated image according to the parameters you set (time, date, and so on). When a subscriber opens the email, they see an updated image.

The code usually looks something like this :

  
   <img src="http://timerexample.com/countdown/nxzpxc4w44" alt="Countdown" style="display: block; margin: 0 auto" />
  

How Different Email Clients Display HTML Countdown Timers 

When a user receives an email with an HTML countdown timer, they should see a dynamic image. For most email clients, this is not a problem. However, with Microsoft Outlook 07/10/13/17, a user will only see the first static frame of the timer.

Side note: "+" in the "image display" column doesn't mean 100% of the receivers will see your timer. Some email services and clients won't display images either by default or from untrusted senders.

And some email providers cache all images. This means the timer will reset right after being opened, making it irrelevant. 

Before sending an email with an HTML countdown timer, make sure that the timer generating system you're using can avoid this problem.

One more problem you can face along the way is iOS15. Apple Mail Privacy Protection affected the performance of HTML countdown timers . In a nutshell, Apple’s services automatically mark all emails you get as opened, and generate the timer. The algorithms calculate the remaining time, BUT the timers don’t start counting down till you open the email manually. So when you finally do, you see more time than is actually left. 

As for responsiveness, HTML countdown timers automatically adjust to different devices and screens. Generally, this shouldn't be a problem as long as you embed them correctly.

How to Add an HTML Countdown Timer to an Email

Let's quickly go through the steps:

1. Set a valid end date specifying the exact time and the time zone and how it should adjust depending on the user's location.
2. Choose an easily digestible format, such as days, hours, minutes, and seconds.
3. Change the design, palette, background to fit your branding.
4. Click "Generate code" or something along these lines (varies by the tool) to produce a short code snippet.
5. Copy the code from the generator and add an HTML countdown timer to an email.

Double-check whether the clock stops when it reaches zero, and calculates the remaining time correctly (just count the amount of time between the current time and the end time).

Before you send the email, test it across your team members, preferably those in remote locations. 

For example, if you're launching a new product in stores at 12 pm, the countdown should finish earlier on the East Coast than on the West Coast. This, of course, applies only to situations when the task is time zone-sensitive.

How to Create a Countdown Timer in Shopify

You can add a timer in Shopify with the help of various apps, or you can go a bit further and create it yourself.

If you choose the second variant, go to your Shopify admin account and open the Themes page. Then create a new snippet, add your timer embed code (actually, you don’t have to create it yourself, just google it) and save the settings.

After that, go to the Shopify product page and add the snippet in the Section folder. Change the end time and the title to your needs, and you're all set.

How to Create a Countdown Timer in Mailchimp

If you want to create a Mailchimp countdown timer, just follow these 3 steps:

1. Open Mailchimp template editor and select the campaign you need.

2. Pick the Code block in the Content tab and place it where you want in the email.

3. Paste the HTML timer code and save the result in Mailchimp.

‍

6 Useful Tools for Creating Countdown Timers

There are tons of services that can be helpful in designing a countdown timer GIF or an HTML countdown timer for your email. Below you can find six countdown timer generators to help get you started.

1. Sendtric — Best for free essential functions and intuitive interface. These HTML countdown timers are compatible with iOS15 in most of the cases.

2. NiftyImages — Best for personalized images, custom fonts, and add-ons such as rule sets, click tracking, and so on.

3. Motion Mail — Best for simplicity as the tool is dedicated solely to creating HTML countdown timers.

4. Mail Timers — Best from the point of UI & UX.

5. Zembula — Best for the easy set up, free features, and a variety of other interactive email tools. It also allows you to create fallbacks for iOS 15 Privacy users.

6. Liveclicker — Best for a wide range of applications, including not only time-targeted solutions but also geo- and device-targeted ones.

How to Use Countdown Clock GIFs in Marketing: Examples

As we've mentioned, a countdown timer in an email creates a sense of urgency. When the receivers learn that an offer is time-limited, they are less likely to postpone the purchase.

Another function of countdown timers is building anticipation, since even thinking about a purchase brings users closer to finalizing it. That’s why sometimes you can find yourself surrounded by stuff you didn’t even plan to buy.

Let's look at the possible ways to use countdown timers:

Discount Coupons

• Make your customers feel special with personalized discount coupons

• Attract new customers by giving them special discount coupons

Countdown GIFs for Limited-time Offers

• Remind your customers of big sales like Black Friday or Cyber Monday

• Promote a particular service or product

• Urge the users to take part in some event 

New Year Countdown Timer GIFs

• Remind you subscribers that the seasonal not-to-be-missed sale will finish soon

• Give your customers some gift ideas

Countdown Timer GIFs for Out-of-Stock Products

• Tell the customers that you may run out of some goods pretty soon

HTML and GIF Countdown Timers for Email: Summary

Email countdown timers can be used in any type of email campaign, but you shouldn’t use them more often than every three months. Otherwise, an annoyed audience will get you more unsubscribes than sales. 

To get the most out of HTML and GIF countdown timers, place them at the top of the emails and try to use them only on special occasions. Combine the timer with a strong CTA and some text explaining the terms of the offer to craft an actionable message.

If you're ready to take the next step in your email marketing game, reach out to EmailSoldiers. We will make your emails stand out and show you many other creative techniques to communicate with your target audience.