Answered

Liquid tag to format number

(0) Share

Report

Posted on by Community Power Pla...

I would like to format a number as $1,234.4567. I am currently able to format the number to two decimal places using the following

item.price | format: "C", "en-US"

i know that i can use the round filter (eg: item.price | round: 4) to format a number to four decimals, but how can i apply the dollar symbol and commas?

All responses (5)

Answers (1)

Community Power Pla... on at

Like (0)

Report
Re: Liquid tag to format number

For future reference, obviously you need to set the decimals to your required precision such as below (for four decimals)

{{ 12345.678901 | decimals: 4, "en-US" | prepend: "$" }}
Verified answer

Community Power Pla... on at

Like (0)

Report

Re: Liquid tag to format number

Thank you @Fubar , this is exactly what i was looking for!
Fubar 8,023 Super User 2025 Season 1 on at

Like (2)

Report
Re: Liquid tag to format number

To just display a number:
{{ 12345.6789 | decimals: 0, "en-US" | prepend: "$" }} Would give the resulte: $12,346
Community Power Pla... on at

Like (0)

Report

Re: Liquid tag to format number

Thank you for your response, if i have to use JavaScript then i will, disappointing that there is no native way to do this formatting with Liquid. As my number is the result of a fetchxml query, i have a for loop where i am showing numbers in a table row, so i guess i'll need to find a way with JavaScript where it can format every instance of myTag
ragavanrajan 7,036 Most Valuable Professional on at

Like (1)

Report
Re: Liquid tag to format number

Hi @Anonymous

Looking at the documentation. I can only see seven data types

With the help of JavaScript and the combination of liquid. I played around with your scenario. Posting here as a reference

In your page HTML area. PFB self-explanatory

{% assign Price = "5557365.56565" %} <script> $( document ).ready(function() { var itemPrice = '{{Price}}'; console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(itemPrice)); var formattedItemPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(itemPrice); console.log(555, formattedItemPrice); $('#myTag').empty().append(formattedItemPrice); }); </script>

In your HTML tag have an id tag like below

<div class="row sectionBlockLayout" style="text-align: left; min-height: 100px; padding: 8px; margin: 0px;"> <div class="container" style="display: flex; flex-wrap: wrap;"> <div class="col-md-12 columnBlockLayout"> <h3 id="myTag"> Price here </h3> </div> </div> </div>

Note: H3 element has myTag id

Hit Save> Sync Config and Browse the website ( Ctrl + F5)

Output:

Hope it helps.

------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.