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

To display a currency symbol and comma formatting for a number field in Webflow's CMS, you need to configure the text element’s settings or use custom formatting via the built-in Element Settings panel.

1. Bind the Number Field to a Text Element

• Add a Text Block, Text Span, or Text Link inside your CMS item.
• Click the element, then in the Element Settings panel (D shortcut), bind it to the number field from your CMS collection.

2. Enable Number Formatting

• In the same Element Settings panel, check “Format as” and choose “Currency” from the dropdown.
• Webflow will display options like:
• Currency symbol position (before or after)
• Number of decimal places
• Thousands separator (i.e., commas)

3. Select the Correct Currency

• Pick your desired currency symbol (e.g., $, €, ¥) from the dropdown.
• Webflow does not convert exchange rates—it simply applies the symbol and formatting.

4. Optional: Use Custom Code (If Needed for Locale-Specific Formatting)

If Webflow’s built-in options don’t support a specific locale format, you can:

• Add custom JavaScript in the Page Settings or Before tag in Site Settings.
• Use Intl.NumberFormat to format currencies dynamically across the site, but only when necessary.

Summary

Use the text binding and "Format as → Currency" option in the Element Settings panel to format CMS number fields with currency symbols and commas. This ensures your numbers display cleanly and professionally on the front end.