Holiday Email Design

Tutorial: How to Add Christmas Countdown Timers to Emails

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 Christmas countdown tickers 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 free email countdown timer generator. We like Sendtric because it’s simple to use (and, yes, free!) 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 build a Christmas countdown email

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.

christmas countdown timer emailHere’s our message with the remaining text and header:

christmas countdown timer sample

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.

email design content menu for christmas countdown timer

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

sale email with a christmas countdown timer

Now, the message is ready for the timer.

christmas countdown timer email in progress

Step 2: Make the countdown timer with Sendtric

Creating a free email 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.

centering a christmas countdown timer in sendtric

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

generate a christmas countdown timer in sendtric

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

christmas countdown timer html block

And…voilá! Here is the result:

christmas countdown timer sample email

To give some context, drag in a text box either above or below it. Finally, add a short line of copy. And for an extra personal touch this holiday season, you could even consider using a similar approach to create a Christmas countdown email signature.

finished christmas countdown timer email sample

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—including templates specifically for Christmas email design.

free holiday email templates

Our Reader Score:

Total: 0 - Average: 0

Kelly Shetron