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

How to Convert Timestamp into HTML time Tag in Shopify

Sam Nguyen
Sam Updated: August 10, 2024

Share:

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

Accurate date and time formatting plays a vital role in enhancing user experience and SEO for any Shopify store. Understanding how to handle timestamps effectively ensures your store presents information clearly and professionally. In this guide, you’ll learn how to convert a timestamp into an HTML time tag within Shopify, providing a simple solution to improve your store’s performance.

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

To convert a timestamp into an HTML time tag, you can use Liquid’s date filter with a format parameter. This allows you to display the date in a specific format on your Shopify store’s front page. There are several pre-defined formats available, including abbreviated_date, basic, date, date_at_time, default, and on_date. You can also define your own custom format if needed. By using this method, you can easily transform raw timestamps into readable, formatted dates that are more user-friendly and better suited for your content presentation.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.