Date Filter

What is the Date Filter?

The date filter in Shopify Liquid is used to format date and time values. By default, dates in Liquid are represented in the ISO 8601 format (YYYY-MM-DD). However, with the date filter, you can easily change the display format of your dates to better suit your store's needs.

How to Use the Date Filter

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

{{ '2023-04-06' | date: "%B %d, %Y" }}

In this example, we have a date in the ISO 8601 format. We use the date filter with a format string "%B %d, %Y" to display the date as "April 06, 2023".

Date Format Codes

Format codes are used to represent different parts of a date. Some common format codes include:

• %a - Abbreviated weekday name (e.g., "Mon")
• %A - Full weekday name (e.g., "Monday")
• %b - Abbreviated month name (e.g., "Jan")
• %B - Full month name (e.g., "January")
• %d - Day of the month with a leading zero (e.g., "01")
• %-d - Day of the month without a leading zero (e.g., "1")
• %m - Month as a number with a leading zero (e.g., "01")
• %-m - Month as a number without a leading zero (e.g., "1")
• %Y - Year with century (e.g., "2023")
• %y - Year without century (e.g., "23")

By combining these format codes, you can create custom date formats to meet your store's requirements.

Working with Dynamic Dates

You can also use the date filter with dynamic dates, such as the date an article was published or the date an order was placed. Here's an example using a blog article's published date:

{% for article in blog.articles %}
  <h3>{{ article.title }}</h3>
  <p>Published on {{ article.published_at | date: "%B %d, %Y" }}</p>
{% endfor %}

In this example, we loop through a blog's articles and display each article's title and published date. The date filter is used to format the published_at attribute of each article.

The date filter is an essential tool for formatting and displaying dates on your online store. By understanding the various format codes and how to use them, you can create custom date formats that match your store's design.