Tutorial: How to Add Christmas Countdown Timers to Emails

Have you received any emails with Christmas countdown timers and thought, I wonder how they did that? You’re in luck—today, we’ll show you how. Countdown timers in emails are a fun tool for adding dynamic, attention-grabbing motion. Here’s how to create a festive one, just in time for the final holiday stretch.

Why add a Christmas countdown timer?

Honestly, we’re surprised we haven’t seen more December timers in emails this season. More brands should consider using them! Here’s why:

  1. Adding timers is easy! Seriously. It’s just a matter of copying-and-pasting a few lines of code.
  2. Timers captivate readers’ attention better than static images.
  3. A countdown creates urgency. Seeing a ticking clock gives readers an incentive to act now.
  4. Including a timer demonstrates that your brand is visually sophisticated, innovative, and thoughtful.

Plus, the festive season is the perfect time to use them. With time-sensitive promotions and shipping deadlines—not to mention a flood of competing emails—the seasonal timers are a smart way to send a clear message, add visual interest, and help your message stand out. So, let’s get started on our tutorial!

Tools You’ll Need

Here are two tools to build an email with a merry countdown:

  1. Open the BEE editor to build and design our email message.
  2. Use a countdown timer generator. We like Sendtric because it’s free and simple to use. Plus, the timer it creates is an animated GIF, so it will render well in email. A number of online platforms (listed below) also offer easy-to-use countdown timers to add to any email campaign:

Find your holiday inspiration

To show how easy it is to add Christmas countdown timers to emails, let’s recreate this email from Paper Culture, the online card shop. Here’s the first module:

paper culture christmas countdown timers

This email actually doesn’t have a timer in its original design. Instead, the message (i.e a static image) simply says there are X hours left in the sale. But wouldn’t the email be more compelling if it showed how many hours are left in a countdown timer?


Video overview: How to add a countdown timer

How easy is it to add one in your email message? As easy as watching our two-minute video tutorial! Be sure to check out our steps below for all the details.


Step 1: Design the email in BEE

Open up the BEE editor and start with a basic single-column template. Trim Paper Culture’s image and add it to the template. You don’t need the “HOURS LEFT” text at the top because that’s where the timer will be placed, and plain text (the fine print) will also be added to the bottom of the email. Doing this will balance the text-image ratio better, which is an email design best practice.

paper culture christmas countdown timersHere’s our message with the remaining text and header:

paper culture christmas countdown timers

To create a placeholder for the countdown timer, add an HTML block. This is where the timer code will be dropped once it’s created.

Here’s how the HTML block looks in the Content menu. Just grab and drag it into the template.

christmas countdown timers

Place it above the 50% off image, as seen below.

paper culture christmas countdown timers

Now, the message is ready for the timer.

paper culture christmas countdown timers


Step 2: Make the countdown timer with Sendtric

Creating a countdown timer at Sendtric is a pretty straightforward process.

sendtric christmas countdown timers

After entering an email address, add the campaign end date. You can set a date that’s up to a month out. Paper Culture’s sale already ended, so let’s choose a future date just to illustrate how the timer works.

Next, update the background and number colors. Use an online HTML match tool to find the exact colors (with hex codes) that you want. Here, the background color is #eaeae9, and the text color is #f26d45.

Also, check the box to make sure it’s a centered table.

sendtric christmas countdown timers

Now, simply click Generate, and here is the HTML code for the timer:

sendtric christmas countdown timers

Then, copy the code from the text box and paste it into the HTML content block.

christmas countdown timers

And…voilá! Here is the result:

paper culture christmas countdown timers

To give some context, drag in a text box either above or below it. Finally, add a short line of copy.

paper culture christmas countdown timers

Using a countdown timer in email? Go Pro!

We hope you enjoyed this workshop. There’s no excuse not to try it in your next holiday email campaign! If you’re not already using BEE, sign-up for a BEE Pro free trial and have access to additional templates and design features.

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor