Easy Date Formatting With Liquid

Personalizing your messages with Liquid can increase conversions and build stronger customer loyalty. Including specific dates in your emails can be a powerful way to connect with customers — celebrating a milestone, reminding them of renewal dates, alerting them when they take certain actions in your app, and more. With Liquid, it’s easy to transform and display dates to add that personal touch.

Using dates to personalize messages

Imagine you’re sending a birthday discount to a customer. You could say, “Happy birthday! Here’s a discount code.”

But you could easily go one step further and say: “We want to help you celebrate your birthday on March 9. Here’s a discount code valid March 9-16. Wishing you a wonderful birthday week!”

Both messages pull the data about your customer’s date of birth, but the second example uses Liquid to insert the specific date — and, importantly, formats it to match your brand style and customer needs. For instance, you’d want to display “March 9” for U.S. customers and “9 March” for those in the U.K.

To put this into practice, you first need to understand how computers count time using timestamps.

Timestamps: how computers mark time

Dates in computer-based systems are typically stored as timestamps. To the human eye, they look like a meaningless string of numbers:

Timestamp321436800
Human-readableSunday, March 9, 1980 at 8:00 a.m., Coordinated Universal Time

The timestamp above is in UNIX format which identifies dates by counting the number of seconds since January 1, 1970 at 12:00 a.m. Coordinated Universal Time (UTC). 

UTC allows computers to all speak the same language when referring to dates. To determine the local time in various time zones across the world, we use a positive or negative offset of UTC. When New York City, for example, is on Eastern Standard Time, or UTC-5:00, it’s five hours earlier than UTC. Similarly, when Tokyo is on Japan Standard Time, or UTC+9:00, it’s nine hours later than UTC. 

Epoch Converter is a great tool to see all this in action and convert timestamps into human-friendly date and hours. I use it all the time! (It also explains the difference between UNIX time and the UNIX epoch, if you’re curious.)

Converting timestamps into human-readable dates

To transform timestamps into dates that make sense for readers, you’ll use a Liquid date filter. There are countless options for how Liquid can display dates; here are some examples:

Your inputOutput
{{ customer.date_of_birth }}321436800
{{ customer.date_of_birth | date: “%D” }}03/09/80

The top row above shows the Liquid code for pulling in the customer’s date of birth attribute, which is a timestamp. In the second row, we’ve applied a filter: that’s the code after the pipe character. In this case, we used an argument that displays the date in MM/DD/YY format. 

There are many possible specifiers you can use to display dates, and you can combine them in countless ways — whatever elements you want, in any order. For example, say you want to display the same date above in the DD/MM/YY format. Here, we’ve used three arguments and added slashes between each element: 

Your inputOutput
{{ customer.date_of_birth }}321436800
{{ customer.date_of_birth | date: “%d/%m/%y” }}09/03/80

Because the timestamp is a quantity of seconds, it contains all the data you need to display times, too. 

Formatting dates and times in Liquid

There are dozens of specifiers for formatting dates in Liquid. Here’s a cheat sheet of the ones I see most often.

Dates

FormatOutputLiquid date filter arguments
MM/DD/YY03/09/22%D
DD/MM/YYYY09/03/22%d/%m/%y
Day abbreviation., MM/YYWed., 03/09%a., %m/%d
Day, Month, DDWednesday, March 9%A, %B %e

Times

FormatOutputLiquid date filter arguments
12-hour time (HH:MM)8:01 pm%I:%M %P
24-hour time (HH:MM)20:01%R
12-hour time (HH:MM) with am/pm and time zone abbreviation8:01 pm PST%I:%M %P %Z

Date + time

FormatOutputLiquid date filter arguments
Full date/timeThu Mar 09 20:01:00 2022%c
Day, Month, DD at 12-hour time (HH:MM) with am/pm and time zone abbreviationWed., 3/09 at 8:01 pm PST%a., %-m/%d at %I:%M %P %Z

As you can see above, some specifiers return a value with multiple elements (like %D for the full date in MM/DD/YY format), which is a handy shortcut. Other specifiers just display a single element; you can combine those to display the elements you want and add punctuation and text between them. 

Here’s another cheat sheet of common specifiers you can combine for displaying dates in different ways.

FormatOutputLiquid date filter arguments
Day
Full nameThursday%A
Shortened nameThu%a
Number with leading 009%d
Number without leading 09%e
Month
Full nameMarch%B
Shortened nameMar%b
Number with leading 003%m
Number without leading 03%-m
Year
Full year2022%Y
Shortened year22%y

A great way to explore how this works is to play with the Strftime.net tool; clicking the various date and time elements will show you the correct code and what the output looks like. 

Get started! 

Once you get going, formatting dates with Liquid is simple and, in my opinion, pretty fun — there are so many options and use cases. You’ll likely use the same formats frequently, so create cheat sheets of your own as you nail them down. For reference, here’s a list of all Liquid date filter arguments.  

As you put this into practice, consider experimenting with A/B tests to see how your audience reacts to different approaches. Over time, you’ll likely come up with a handful of formats you use regularly and can make a cheat sheet of your own, then easily build them into your templates. 

Join our mailing list for updates on our content and more!