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 the
date
andtime_tag
filters in Liquid, how to create custom date formats usingstrftime
formatting, and how to create custom date-formats for localization.
Grow your business with the Shopify Partner Program
Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.
Sign upUnderstanding the
element
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, andMicrofromatsandMicrodatawere mostly relied upon to fill specific use-cases.
Theelement 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 HTMLtags.
For example:
<时间datetime = " 2019 -04-26 20:00-05:00”>April 26, 2019 at 8pm EST
Thedatetime
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 |
Thedatetime
attribute can also take a duration of time, which looks like this:
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 thedate
filter in Liquid and Shopify
In Shopify’s Liquid language, thedate
filter converts a timestamp to another date format. For example, a blog article will have apublished_at
attribute, a Liquid object on which we can apply thedate
filter. I’ve specified the output inside the comment below:
{{ article.published_at | date: "%a, %b %d, %Y" }}
<-- Tues, Apr 30, 2019 -->
Thedate
filter accepts the same parameters for formatting as Ruby’sstrftime
method. 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 ofdate
isn’t translated into other languages. To ensure dates are universal, consider using a numbered format like2019-09-14
.
The date filter also accepts some defaultformat
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 thedate
filter is just the date itself, without aelement. This can be useful if you need to output just the date into a
tag so you can control the markup around it.
You might also like:Announcing Shopify Liquid Code Examples for Partners.
Using thetime_tag
filter
Thetime_tag
filter converts a timestamp to another date format and outputs an HTMLelement. For example, for the same
published_at
date above, if we used thetime_tag
filter it would look like this:
{{ article.published_at | time_tag }}
<-- -->
The output inside the HTML element can be customized the same way as we did previously with thedate
filter. It can take date parameters, and doesn’t affect the value of thedatetime
attribute set on the tag. For example:
{{ article.published_at | time_tag: '%a, %b %d, %Y' }}
<-- -->
You can also alter thedatetime
attribute for thetime_tag
by passing adatetime
parameter using a custom format:
{{ article.published_at | time_tag: '%a, %b %d, %Y', datetime:'%Y-%m-%d' }}
<-- -->
You might also like:How to Display Price Ranges on Shopify Collection Pages.
Creating localized date formats
As mentioned earlier, thedate
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 thetheme editor.
In your theme’slocales/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 theformat
parameter in Liquid. Here are two examples:
{{ article.published_at | time_tag: format: 'month_day_year' }}
<-- -->
{{ article.published_at | time_tag: format: 'day_month' }}
<-- -->
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!