Home > Shopify Development > Liquid time_tag: How to Convert Timestamp into HTML time Tag

How to Convert Timestamp into HTML time Tag in Shopify

Thomas Nguyen
Thomas Nguyen Updated: August 10, 2023

Share:

Drive 20-40% of your revenue with Avada
avada email marketing

Would you like to create a content hub on your website? You would like to public the written date of an article in a format specific so that you can track the content flow. Liquid has a filter that can help you solve your concern. This tutorial will guide you to convert timestamp into HTML time tag.

Table of content

What is Liquid

For more than a decade, Liquid is a great tool for website developers to build a good page. Liquid is one of the open-source template languages in Shopify. Liquid is used as the backbone of Shopify to upload dynamic content on the front page. Liquid has now become a good source for a lot of hosted website application such as Jekyll, salesforce desk, and zendesk.

There are three codes in Liquid consisting of objects, tags, and filters. Liquid use objects to show the location of the content on a page. Double curly braces denote objects and variable names. Filters change a Liquid object’s output. Tags create logic and control flow for a template. Tags begin with two curly braces and percent signs. Tags can be divided into three types: control flow, iteration, and variable assignment.

What is time tag

Time tag is one of the additional tags that is used to convert timestamp into HTML time tag. You are able to pass a format parameter to the date filter to show the date in a specific format on the front page. A few different formats are available, and it’s possible to define your own. There are several types of formats: abbreviated_date, basic, date, date_at_time, default, on_date.

How to convert timestamp into HTML time tag

This example uses the format of the abbreviated date.

Input


{{{ order.created_at | date: format: 'abbreviated_date' }}

Output


Dec 31, 2018

Conclusion

In conclusion, time tag helps you to show the correct format on your front page. You can use a few available formats to upload the date such as abbreviated_date, basic, date, on_date, and so on. We hope that this tutorial will be helpful for you and let us know if you have any difficulties.


As the CTO of Avada, a company specializing in Marketing Automation Platform, I have over 10 years of experience in software development. I have successfully led Avada's technical team in creating innovative products for our clients.

Stay in the know

Get special offers on the latest news from AVADA.