Easy Date Formatting With Liquid

{{magic}}

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:

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:

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: 

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

Times

Date + time

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.

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.