Understanding Date Formats in Liquid and Shopify

Date and time are a part of our everyday lives. In this article we discuss the element, along with the date and time_tag filters in Liquid, how to create custom date formats using strftime formatting, and how to build custom date formats for localization.

Date and time are a part of our everyday lives, whether you’re booking a flight, checking when something will be delivered by, or setting up an appointment. Therefore, the need to understand date and time on the web is very important. In ecommerce especially, we need to communicate to people something happened, at a certain point in time, on a specific date, or in relation to another date or time.

In this article we’ll discuss the <time> element, along with the date and time_tag filters in Liquid, how to create custom date formats using strftime formatting, and how to create custom date-formats for localization.

Understanding the <time> element

Before we dive into the Liquid filters and tags, let’s take a look at the <time> element in plain old HTML.

The <time> element was introduced into HTML5 spec in 2009, was removed and then re-added and improved upon. Before HTML5, there was no semantic element to markup date or time, and Microfromats and Microdata were mostly relied upon to fill specific use-cases.

The <time> element represents a specific period in time, and may include the datetime attribute to help represent dates into a machine-readable format. This makes it possible to represent time in a machine-readable format when text or a more human-readable version of the date, time, or duration falls between the HTML <time> tags.

For example:

<time datetime=”2019-04-26 20:00-05:00”>April 26, 2019 at 8pm EST</time>

The datetime attribute formatting breaks down like this:

Year (YYYY)	Month (MM)	Day (DD)	T or a space - a separator (required if time is also specified)	Hour (hh)	Minute (mm)	Second (ss)	TZD - Time Zone Designator
2019	04	26	T	20	40	00	-05:00

 

The datetime attribute can also take a duration of time, which looks like this:

<time datetime="PT5H10M">5 hours and 10 minutes</time>

 It breaks down in the following way:

Period - duration is specified (P)	T or a space - a separator (required if time is also specified)	Days (D)	Hours (H)	Minutes (M)	Seconds (S)
P	T	-	5H	10M	-

Using the date filter in Liquid and Shopify

In Shopify’s Liquid language, the date filter converts a timestamp to another date format. For example, a blog article will have a published_at attribute, a Liquid object on which we can apply the date filter. I’ve specified the output inside the comment below:

{{ article.published_at | date: "%a, %b %d, %Y" }}
<-- Tues, Apr 30, 2019 -->

The date filter accepts the same parameters for formatting as Ruby’s strftime method. For creating custom formatting, try using a site like strfti.me to create the parameters that fit the output that you want.

It’s important to note that the output of date isn’t translated into other languages. To ensure dates are universal, consider using a numbered format like 2019-09-14.

The date filter also accepts some default format options:

{{ article.published_at | date: format: 'default' }}
<-- Tue, Apr 30, 2019, 6:55 am -0400 -->

{{ article.published_at | date: format: 'short' }}
<-- 30 Apr 06:55 -->

{{ article.published_at | date: format: 'long' }}
<-- April 30, 2019 06:55 -->

You’ll notice that the output of the date filter is just the date itself, without a <time> element. This can be useful if you need to output just the date into a <time> tag so you can control the markup around it.

You might also like: Announcing Shopify Liquid Code Examples for Partners.

Using the time_tag filter

The time_tag filter converts a timestamp to another date format and outputs an HTML <time> element. For example, for the same published_at date above, if we used the time_tag filter it would look like this:

{{ article.published_at | time_tag }}
<-- <time datetime="2019-04-30T10:55:00Z">Tue, Apr 30, 2019, 6:55 am -0400</time> -->

The output inside the HTML element can be customized the same way as we did previously with the date filter. It can take date parameters, and doesn’t affect the value of the datetime attribute set on the tag. For example:

{{ article.published_at | time_tag: '%a, %b %d, %Y' }}
<-- <time datetime="2019-04-30T10:55:00Z">Tue, Apr 30, 2019</time> -->

You can also alter the datetime attribute for the time_tag by passing a datetime parameter using a custom format:

{{ article.published_at | time_tag: '%a, %b %d, %Y', datetime:'%Y-%m-%d' }}
<-- <time datetime="2019-04-30">Tue, Apr 30, 2019</time> -->

You might also like: How to Display Price Ranges on Shopify Collection Pages.

Creating localized date formats

As mentioned earlier, the date format isn’t translated, so there’s also an option to create specific date formats inside a theme’s local settings, or to give the ability to change the date formatting from the theme editor.

In your theme’s locales/en.json you would specify what date formats you want:

"date_formats": {
  "month_day_year": "%B %d, %Y",
  "day_month": "%d %B"
}

From there in your theme you can pass the format parameter in Liquid. Here are two examples:

{{ article.published_at | time_tag: format: 'month_day_year' }}
<-- <time datetime="2019-04-30T10:55:00Z">April 30, 2019</time> -->

{{ article.published_at | time_tag: format: 'day_month' }}
<-- <time datetime="2019-04-30T10:55:00Z">30 April</time> -->

You might also like: How to Customize the img Element in Shopify Themes.

Date formatting galore

That’s everything you need to know about date formats in Shopify themes! You might not think it, but there are a lot of places in an online store where you can specify and take advantage of templated date formats. Here are just a few:

• Blog posts publication dates
• Email templates
• Order confirmation
• User login pages
• Products (Back in stock on _____ , or In stock after _____ )
• Footer and Copyright

Happy formatting!

What other places have you formatted dates on Shopify? Tell us in the comments below!