How to format date in Liquid Shopify

How to format date in Liquid Shopify

Basic idea of how to format date in Liquid Shopify

To use the date filter, you simply provide a format string as an argument. The filter will then modify the input date value based on the given format string. Here’s a basic example:

{{ '2023-07-25' | date: "%B %d, %Y" }}
<-- Output: July 25, 2023 -->

To format date in Liquid Shopify, you can use the date and time_tag filter.

Using the date filter in Liquid Shopify

In Shopify’s Liquid language, the date filter is used to convert a timestamp into a different date format. For instance, when working with an article, we can access the “created_at” attribute, which is a Liquid object that allows us to utilize the date filter. The result of this conversion will be reflected as the output, as indicated below.

{{ article.created_at | date: "%a, %b %d, %Y" }}
<-- Output: Thu, Apr 20, 2023 -->

Please take note that the date output in Shopify’s Liquid language does not come with automatic translation for different languages. To make sure your date format is universally understood, go for a numbered format like “2019-09-14.”

Also, you’ll be glad to know that the date filter in Shopify’s Liquid language is equipped with default format options, giving you the flexibility to customize how dates are displayed.

{{ article.created_at | date: format: 'default' }}
<-- Output: Thu, Apr 20, 2023, 6:55 am -0400 -->

{{ article.created_at | date: format: 'short' }}
<-- Output: 20 Apr 06:55 -->

{{ article.created_at | date: format: 'long' }}
<-- Output: April 20, 2023 06:55 -->

You might have observed that the output of the date filter is just the date itself, without any <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

Using the time_tag filter

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

{{ article.created_at | time_tag }}
<-- Output: <time datetime="2023-07-21T10:55:00Z">Thu, Apr 20, 2023, 6:55 am -0400</time> -->

You can customize the output inside the HTML element in a similar manner as we did previously with the date filter. It has the capability to accept date parameters and doesn’t impact the value of the datetime attribute set on the tag.

For example:

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

In addition, you have the flexibility to modify the datetime attribute for the time_tag by passing a datetime parameter with a custom format:

{{ article.published_at | time_tag: '%a, %b %d, %Y', datetime:'%Y-%m-%d' }}
<-- Output: <time datetime="2023-04-20">Fri, Apr 20, 2023</time> -->

date Filter Placeholders

%aAbbreviated weekdaySun
%AFull weekday nameSunday
%bAbbreviated month nameJan
%BFull month nameJanuary
%cPreferred local date and time representationThu Apr 20 2023 11:16:09
%dDay of the month, zero-padded05
%-dDay of the month5
%DFormats the date29/01/16
%eDay of the month3
%FReturns the date in ISO 8601 format2023-04-20
%HHour of the day, 24-hour clock17
%IHour of the day, 12-hour clock04
%jDay of the year017
%kHour of the Day, 24-hour clock8
%mMonth of the Year08
%MMinute of the Hour04
%pMeridian indicator uppercaseAM
%PMeridian indicator lowercasepm
%r12-hour time02:25:50 PM
%R24-hour time17:20
%T24-hour time with seconds19:20:41
%sNumber of seconds since 1970-01-01 00:00:00 UTC1689938570
%SSecond of the Minute08
%UWeek number of the current year, starting with the first Sunday as the first day of the first week04
%WWeek number of the current year, starting with the first Monday as the first day of the first week05
%wDay of the week. Sunday is 05
%xPreferred representation for the date05/11/15
%XPreferred representation for the time21:15:31
%yThe year without a century17
%YThe year with a century2023
%ZTime zone nameEST
%%Literal % character%

You might also Like: How to display only products in search results Liquid Shopify

Hardik Davra
Hardik Davra
Hardik Davra is a CEO at Candisoft Tech, a Company specializing in Shopify Development. I have over 5 years of experience in Shopify website development.

Leave a Reply

Your email address will not be published. Required fields are marked *