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.

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

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> -->

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