How can I format a number field in Webflow's CMS to display the currency symbol and proper commas?

The issue is about formatting a Webflow CMS number field to display a currency symbol and include proper comma delimiters. Webflow doesn’t automatically format numbers as currency, so you need to add custom code for that.

1. Use a Custom Code Embed

• Insert a custom code embed element on the page where your CMS collection list appears.
• Place your JavaScript either in the page’s Footer Code Section or within an Embed Element, making sure it runs after the content is loaded.

2. Write the Formatting Script

• Capture the number value: Use JavaScript to select the element that houses the dynamic number. For example, if you have a span with a class like "price", find it using document.querySelector or jQuery’s $('.price').
• Format the number: Use JavaScript’s toLocaleString function to add commas. For example:
  var num = parseFloat(yourNumberValue);
  var formatted = "$" + num.toLocaleString("en-US");
• Output the formatted value: Replace the inner text of the element with the formatted string.

3. Ensure the Script Runs Correctly

• Test your custom code to verify that the currency symbol and comma delimiters appear correctly.
• Review browser console logs for any errors that could indicate issues with element selection or script execution.

Summary

You handle currency formatting in Webflow’s CMS by embedding custom JavaScript that reads the number field’s value, applies comma delimiters and prepends a currency symbol (using toLocaleString), and then outputs the formatted result in your design.