The Shopify.formatMoney method extracted from option_selection.js for stand-alone purposes.

shopify-money.js

var Shopify = Shopify || {};
// ---------------------------------------------------------------------------
// Money format handler
// ---------------------------------------------------------------------------
Shopify.money_format = "${{amount}}";
Shopify.formatMoney = function(cents, format) {
  if (typeof cents == 'string') { cents = cents.replace('.',''); }
  var value = '';
  var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
  var formatString = (format || this.money_format);

  function defaultOption(opt, def) {
     return (typeof opt == 'undefined' ? def : opt);
  }

  function formatWithDelimiters(number, precision, thousands, decimal) {
    precision = defaultOption(precision, 2);
    thousands = defaultOption(thousands, ',');
    decimal   = defaultOption(decimal, '.');

    if (isNaN(number) || number == null) { return 0; }

    number = (number/100.0).toFixed(precision);

    var parts   = number.split('.'),
        dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands),
        cents   = parts[1] ? (decimal + parts[1]) : '';

    return dollars + cents;
  }

  switch(formatString.match(placeholderRegex)[1]) {
    case 'amount':
      value = formatWithDelimiters(cents, 2);
      break;
    case 'amount_no_decimals':
      value = formatWithDelimiters(cents, 0);
      break;
    case 'amount_with_comma_separator':
      value = formatWithDelimiters(cents, 2, '.', ',');
      break;
    case 'amount_no_decimals_with_comma_separator':
      value = formatWithDelimiters(cents, 0, '.', ',');
      break;
  }

  return formatString.replace(placeholderRegex, value);
};

Thank you!

Shopify's docs have 5th type: amount_with_apostrophe_separator

https://help.shopify.com/en/manual/payments/currency-formatting#currency-formatting-options

      case "amount_with_apostrophe_separator":
        value = formatWithDelimiters(cents, 2, "'", ".");
        break;

Does this limit you to just dollars? Is it possible to get this working across multiple different stores with different currencies?

It doesn’t actually care what the currency is. The first argument is the unformatted amount. The second argument is the format, which could be whatever you need for the currently displayed currency i.e. “£{{ amount }}”. Then pass it a new amount and new format when you change the currency.

Hi , I am using

`
var Shopify = Shopify || {};
Shopify.money_format = "{{ shop.money_format }}";
Shopify.formatMoney = function(cents, format) {
if (typeof cents == 'string') {
cents = cents.replace('.', '');
}
var value = '';
var placeholderRegex = /{{\s*(\w+)\s*}}/;
var formatString = (format || this.money_format);

function defaultOption(opt, def) {
    return (typeof opt == 'undefined' ? def : opt);
}

function formatWithDelimiters(number, precision, thousands, decimal) {
    precision = defaultOption(precision, 2);
    thousands = defaultOption(thousands, ',');
    decimal = defaultOption(decimal, '.');

    if (isNaN(number) || number == null) {
        return 0;
    }

    number = (number / 100.0).toFixed(precision);

    var parts = number.split('.'),
        dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands),
        cents = parts[1] ? (decimal + parts[1]) : '';

    return dollars + cents;
}

switch (formatString.match(placeholderRegex)[1]) {
    case 'amount':
        value = formatWithDelimiters(cents, 2);
        break;
    case 'amount_no_decimals':
        value = formatWithDelimiters(cents, 0);
        break;
    case 'amount_with_comma_separator':
        value = formatWithDelimiters(cents, 2, '.', ',');
        break;
    case 'amount_no_decimals_with_comma_separator':
        value = formatWithDelimiters(cents, 0, '.', ',');
        break;
}

return formatString.replace(placeholderRegex, value);

};`

I am getting an error
Uncaught (in promise) TypeError: Cannot read properties of null (reading '1')

The error is only raised at the first time i.e when someone clicks on a particular product , but error disappears when the same page is refreshed.

Would love some help here.

@shriDeveloper Make sure the method is not inside a .liquid file or use {% raw %}{{ amount }}{% endraw %} in order to escape the Liquid parsing of {{ amount }} (which parses to an empty string)

As AlpineJS Magic property if anyone wants it -> https://gist.github.com/james0r/e5a02db44beba8b5fc447e78615c1eb7

This was exactly what I was looking for and works like a charm, you sir are an absolute legend.

there was a slight error in the code

function formatMoney(cents, format) {
  if (typeof cents == 'string') { cents = cents.replace('.', ''); }
  var value = '';
  var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
  var formatString = (format || this.money_format);

  function defaultOption(opt, def) {
    return (typeof opt == 'undefined' ? def : opt);
  }

  function formatWithDelimiters(number, precision, thousands, decimal) {
    precision = defaultOption(precision, 2);
    thousands = defaultOption(thousands, ',');
    decimal = defaultOption(decimal, '.');

    if (isNaN(number) || number == null) { return 0; }

    number = (number / 100.0).toFixed(precision);

    var parts = number.split('.'),
      dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands),
      cents = parts[1] ? (decimal + parts[1]) : '';

    return dollars + cents;
  }

  var match = formatString.match(placeholderRegex);

  if (match) {
    switch (match[1]) {
      case 'amount':
        value = formatWithDelimiters(cents, 2);
        break;
      case 'amount_no_decimals':
        value = formatWithDelimiters(cents, 0);
        break;
      case 'amount_with_comma_separator':
        value = formatWithDelimiters(cents, 2, '.', ',');
        break;
      case 'amount_no_decimals_with_comma_separator':
        value = formatWithDelimiters(cents, 0, '.', ',');
        break;
    }
  }

  return formatString.replace(placeholderRegex, value);
};

paste this code into the theme.liquid file

<script>
  var Shopify = Shopify || {};
  Shopify.money_format = "{{ shop.money_format }}";
</script>

paste this code into the JavaScript file

Shopify.formatMoney = function(cents, format) {
if (typeof cents == 'string') {
cents = cents.replace('.', '');
}
var value = '';
var placeholderRegex = /{{\s*(\w+)\s*}}/;
var formatString = (format || this.money_format);
function defaultOption(opt, def) {
    return (typeof opt == 'undefined' ? def : opt);
}
function formatWithDelimiters(number, precision, thousands, decimal) {
    precision = defaultOption(precision, 2);
    thousands = defaultOption(thousands, ',');
    decimal = defaultOption(decimal, '.');
    if (isNaN(number) || number == null) {
        return 0;
    }
    number = (number / 100.0).toFixed(precision);
    var parts = number.split('.'),
        dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands),
        cents = parts[1] ? (decimal + parts[1]) : '';
    return dollars + cents;
}
switch (formatString.match(placeholderRegex)[1]) {
    case 'amount':
        value = formatWithDelimiters(cents, 2);
        break;
    case 'amount_no_decimals':
        value = formatWithDelimiters(cents, 0);
        break;
    case 'amount_with_comma_separator':
        value = formatWithDelimiters(cents, 2, '.', ',');
        break;
    case 'amount_no_decimals_with_comma_separator':
        value = formatWithDelimiters(cents, 0, '.', ',');
        break;
}
return formatString.replace(placeholderRegex, value);
};

Use the method like that anywhere you want

Shopify.formatMoney(120) // 120 is the number you want to convert into price.

TypeScript version that supports all currency formats in 2024:

/**
 * Formats a number of cents into a currency string using a Shopify format
 * string.
 *
 * https://help.shopify.com/en/manual/international/pricing/currency-formatting#currency-formatting-options
 *
 * Originally from: https://gist.github.com/stewartknapman/8d8733ea58d2314c373e94114472d44c
 *
 * @param cents - The number of cents to format.
 * @param formatString - The format string to use.
 * @returns The formatted currency string.
 */
export function shopifyFormatCurrency(cents: number, formatString: string) {
  const placeholderRegex = /{{\s*(\w+)\s*}}/;

  /**
   * Formats a number of cents into a currency string using the provided
   * precision, thousands separator, and decimal separator.
   * @param number - The number of cents to format.
   * @param precision - The number of decimal places to include.
   * @param thousands - The character to use as the thousands separator.
   * @param decimal - The character to use as the decimal separator.
   * @returns The formatted currency string.
   */
  function formatWithDelimiters(
    number: number,
    precision: number = 2,
    thousands: string = ",",
    decimal: string = ".",
  ) {
    if (isNaN(number) || number == null) {
      return "0";
    }

    const numString = (number / 100.0).toFixed(precision);
    const parts = numString.split(".");
    const dollars = parts[0].replace(
      /(\d)(?=(\d\d\d)+(?!\d))/g,
      "$1" + thousands,
    );
    const cents = parts[1] ? decimal + parts[1] : "";
    return dollars + cents;
  }

  return formatString.replace(placeholderRegex, (match, placeholder) => {
    switch (placeholder) {
      case "amount":
        // Ex.	1,134.65
        return formatWithDelimiters(cents, 2);
      case "amount_no_decimals":
        // Ex. 1,135
        return formatWithDelimiters(cents, 0);
      case "amount_with_comma_separator":
        // Ex. 1.134,65
        return formatWithDelimiters(cents, 2, ".", ",");
      case "amount_no_decimals_with_comma_separator":
        // Ex. 1.135
        return formatWithDelimiters(cents, 0, ".", ",");
      case "amount_with_apostrophe_separator":
        // Ex. 1'134.65
        return formatWithDelimiters(cents, 2, "'", ".");
      case "amount_no_decimals_with_space_separator":
        // Ex. 1 135
        return formatWithDelimiters(cents, 0, " ");
      case "amount_with_space_separator":
        // 1 134,65
        return formatWithDelimiters(cents, 2, " ", ",");
      case "amount_with_period_and_space_separator":
        // 1 134.65
        return formatWithDelimiters(cents, 2, " ", ".");
      default:
        return match;
    }
  });
}

Hi, this function isn't passed in this case:
When using the formatting option amount_no_decimals, the thousands separator (used for digit grouping) is determined from the international set standard for the currency code.
https://help.shopify.com/en/manual/international/pricing/currency-formatting