How to Format Currency in Shopify with the formatMoney Function

Introduction

Formatting product prices correctly is crucial for creating a professional and localized shopping experience in a Shopify store. While Shopify offers built-in formatting methods, the formatMoney function provides an easier way for developers to format prices dynamically and consistently.

This guide explains how to use this function in a Shopify theme and how it simplifies currency formatting for different regions and store settings.

What is the formatMoney Function?

The formatMoney function is a JavaScript utility designed to simplify currency formatting in Shopify themes. Shopify has a default money format setting, but this function provides an easier way to control price formatting based on store settings and customer preferences.

Why Use formatMoney?

• Makes price formatting in Shopify easier and more flexible.
• Ensures consistent currency formatting across different regions.
• Supports customization of decimal points, thousand separators, and currency symbols.
• Works dynamically with Shopify's money format settings.

Here's the function to simplify currency formatting in Shopify:

1var Shopify = Shopify || {};
2
3Shopify.money_format = "${{amount}}";
4
5Shopify.formatMoney = function (cents, format) {
6  if (typeof cents == "string") {
7    cents = cents.replace(".", "");
8  }
9  var value = "";
10  var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
11  var formatString = format || this.money_format;
12
13  function defaultOption(opt, def) {
14    return typeof opt == "undefined" ? def : opt;
15  }
16
17  function formatWithDelimiters(number, precision, thousands, decimal) {
18    precision = defaultOption(precision, 2);
19    thousands = defaultOption(thousands, ",");
20    decimal = defaultOption(decimal, ".");
21
22    if (isNaN(number) || number == null) {
23      return 0;
24    }
25
26    number = (number / 100.0).toFixed(precision);
27
28    var parts = number.split("."),
29      dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1" + thousands),
30      cents = parts[1] ? decimal + parts[1] : "";
31
32    return dollars + cents;
33  }
34
35  switch (formatString.match(placeholderRegex)[1]) {
36    case "amount":
37      value = formatWithDelimiters(cents, 2);
38      break;
39    case "amount_no_decimals":
40      value = formatWithDelimiters(cents, 0);
41      break;
42    case "amount_with_comma_separator":
43      value = formatWithDelimiters(cents, 2, ".", ",");
44      break;
45    case "amount_no_decimals_with_comma_separator":
46      value = formatWithDelimiters(cents, 0, ".", ",");
47      break;
48  }
49
50  return formatString.replace(placeholderRegex, value);
51};

Adding formatMoney.js to Your Shopify Theme

To use this function in your Shopify store, follow these steps:

1. Navigate to Online Store > Themes in your Shopify Admin.
2. Click on Actions > Edit Code for your current theme.
3. In the Assets folder, create a new file called formatMoney.js.
4. Copy and paste the function into formatMoney.js and save the file.
5. Link the script in theme.liquid by adding this line before the closing </body> tag:

1<script src="{{ 'formatMoney.js' | asset_url }}" defer="defer"></script>

This ensures that the script loads properly and is available for use on the storefront.

Using formatMoney in Liquid and JavaScript

Once the script is added, you can use it dynamically to format product prices. Here's an example of how to implement it:

Example: Formatting Product Price Dynamically

1<div class="update-price">
2  Price: <span></span>
3</div>
4
5<script>
6  const updatePrice = document.querySelector(".update-price span");
7  const productPrice = {{ product.price }};
8  const moneyFormat = {{ shop.money_format | json }};
9
10  window.addEventListener("load", function() {
11    updatePrice.innerHTML = Shopify.formatMoney(productPrice, moneyFormat);
12  });
13</script>

Breakdown of the Code

1. Selecting the Price Container
   • The <span> inside .update-price will display the formatted price.
2. Fetching Price and Format Data
   • productPrice fetches the raw price in cents.
   • moneyFormat retrieves the store's money format setting dynamically.
3. Formatting and Displaying the Price
   • On page load, Shopify.formatMoney is used to format productPrice.
   • The formatted price is displayed inside .update-price span.

Example Output

If a product price is 1999 cents and the store format is "${{amount}}", the output will be:

1Formatted price: $19.99

If the store format is "€{{amount_with_comma_separator}}", the output will be:

1Formatted price: €19,99

This demonstrates how the function adapts to different currency formats dynamically.

Conclusion

The formatMoney function simplifies currency formatting for Shopify developers, ensuring consistent price display while providing full control over how prices are presented in your store. By integrating this function into your Shopify theme, you can improve the shopping experience for customers around the world while simplifying your development process.