Understanding Date Formats in Liquid and Shopify

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 theelement, along with thedate和time_tagfilters in Liquid, how to create custom date formats usingstrftimeformatting, and how to create custom date-formats for localization.

Understanding theelement

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

Theelement 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, andMicrofromats和Microdatawere mostly relied upon to fill specific use-cases.

Theelement represents a specific period in time, and may include thedatetimeattribute 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 HTMLtags.

For example:

April 26, 2019 at 8pm EST

Thedatetimeattribute 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

Thedatetimeattribute can also take a duration of time, which looks like this:

5 hours and 10 minutes

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 thedatefilter in Liquid and Shopify

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

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

Thedatefilter accepts the same parameters for formatting as Ruby’sstrftimemethod. For creating custom formatting, try using a site likestrfti.meto create the parameters that fit the output that you want.

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

The date filter also accepts some defaultformatoptions:

{{ 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 thedatefilter is just the date itself, without aelement. This can be useful if you need to output just the date into atag so you can control the markup around it.

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

Using thetime_tagfilter

Thetime_tagfilter converts a timestamp to another date format and outputs an HTMLelement. For example, for the samepublished_atdate above, if we used thetime_tagfilter it would look like this:

{{ article.published_at | time_tag }}
<-- Tue, Apr 30, 2019, 6:55 am -0400 -->

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

{{ article.published_at | time_tag: '%a, %b %d, %Y' }}
<-- Tue, Apr 30, 2019 -->

You can also alter thedatetimeattribute for thetime_tagby passing adatetimeparameter using a custom format:

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

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

Creating localized date formats

As mentioned earlier, thedateformat 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 thetheme editor.

In your theme’slocales/en.jsonyou 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 theformatparameter in Liquid. Here are two examples:

{{ article.published_at | time_tag: format: 'month_day_year' }}
<-- April 30, 2019 -->

{{ article.published_at | time_tag: format: 'day_month' }}
<-- 30 April -->

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!