Remove Trailing Zeros From Shopify Price With JS

With the usual money format, Shopify shows whole prices with two decimals, so a product that costs 25 dollars appears as $25.00. This small JavaScript snippet lets you remove the trailing zeros (.00) from each Shopify price on your storefront. Prices with cents, such as $24.99, stay as they are.

If you can edit the Liquid code that prints a price, Shopify’s money_without_trailing_zeros filter does the same without JavaScript, for example {{ product.price | money_without_trailing_zeros }}. The script is handy when prices are printed in many theme files or you’d rather not edit them. If you format prices in your own JavaScript, number formatting with Intl.NumberFormat shows how to drop the .00 from whole amounts as you format them.

Add the code to your theme

In your Shopify admin, go to Online Store > Themes > Actions > Edit code. Open theme.liquid, find the closing </body> tag (press Ctrl + F, or Command + F on a Mac) and paste the code right above it. Wrap it in <script> and </script> tags, because theme.liquid is an HTML template and the code would otherwise appear as text on the page.

function updatePrice(){
var prices = document.querySelectorAll(`.price-item`);


if (!prices)return;

for (var each of prices){
each.innerText = each.innerText.replace('.00', '');
}
}

window.onload = function() {
  setTimeout(updatePrice, 50);
}

How the code works to remove trailing zeros from each Shopify price

• updatePrice() finds every element with the class price-item, the price class used by themes such as Dawn. If your theme uses a different class, change the selector.
• For each price, it replaces the first .00 in the text with nothing, so $25.00 becomes $25.
• window.onload runs the function once, 50 milliseconds after the page has fully loaded.

Because it runs only once, prices that the theme updates later, for example when a shopper picks another variant, show the .00 again. The code also only looks for a period, so money formats that use a comma for decimals are not changed. And assigning window.onload replaces any other handler that was set the same way.

For prices formatted in your theme’s Liquid instead of with a script, see my Shopify development services.

Related articles

• infinite scroll on Shopify collections: products it loads later keep their .00, because this script runs only once
• using a Shopify menu in a section with linklists: another small edit in the theme code editor