How do I add a number field in Webflow?
Add a Webflow number field for a price or quantity, show it on a text element, and keep symbols out of a CSV import.
In Collection settings, add a field and choose Number. The field stores a number, including a decimal, and you can connect it to a text element. Help text and Required are optional. A schema change needs a full site publish before the live site shows it. In a CSV, a value with letters, a dollar sign, or a comma, such as $100 or 10,000, cannot be mapped to this field.
Use a number field when the value is a number
A number field stores a number on each Collection item. Webflow describes it as any kind of number, including a decimal, and says you can connect it to a text element. A price, a quantity, a floor, or a sort position fits. A headline does not. Plain text is for words. Rich text is for a formatted article.
The Ecommerce Price field is not this control. Ecommerce Collections include default fields, and Webflow's example is Price. Those fields cannot be added as custom fields on a Collection that is not Ecommerce, and they cannot be removed from an Ecommerce Collection. On a blog or a plans Collection, add a number field of your own.
Add the field in Collection settings
Open the CMS panel, hover the Collection, and click the settings icon. Click Add Field in the custom fields, or click Add New Field, and choose Number. Name the field for what it holds, such as Monthly price or Seat count.
Help text and Required are optional. Help text is the line editors see under the label, such as 'Digits only. No dollar sign.' Turn Required on when every item must have a number. Save the field, then save the Collection.
Example: a Plans Collection has three items. Add Monthly price as a number field. Starter is 99, Team is 240, and Studio is 480. The dollar sign will sit in the card design, next to the text that reads the field, so the stored value stays a number.
A schema change needs a full site publish before the live site reflects it. Publish the whole site after the field exists. Put the number on each item before you rely on the live card.
Show the number on the template
On a Collection list or on the Collection page, select a text element and connect it to the number field. The visitor then sees the value stored on that item. A text element that sits outside the list, on a static page with no item, has nothing to read.
Keep the currency or the unit in the layout. A text element that says $ can sit beside the bound number. Type the digits on the item. The field is for the number itself.
You can use the same field on the card and on the item page. Both read Monthly price. You do not add a second field to show the number twice.
Import digits, not a formatted price
A CSV can fill the field. Webflow says a number field accepts any number, and it will not map a value that contains letters, a symbol, or a comma. The documented examples are 100 USD, $100, and 10,000. Write 100 or 99.5 in the cell instead.
Map that column to the number field when you import, or create the field from the column during import. The CSV import guide is the upload, the header row, and the choice to update matching items. Fix the cells before you import. A later edit on the live site is slower than a clean column.
Sort by the number when order matters
A dynamic Collection list can sort on this field, smallest to largest or largest to smallest. That is the right control when the cheapest plan should lead, or when you have typed a position into each item.
A plain text field that happens to start with digits is a different sort. Use the number field when the order should follow the value. The sort guide is the place for stacked rules and a handmade sequence.
Publish the site after the list is sorted, then check one cheap item and one expensive item on the live page. The card should show the number you stored, with the dollar sign coming from the layout rather than from the field.
Adding the field and connecting the card is ordinary CMS work on an existing site. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Your Webflow subscription and hosting stay in your own account.
Questions & answers
Can I store $99 in the number field?
Enter 99 on the item, and put the dollar sign in the layout beside the text. A CSV value of $100, 100 USD, or 10,000 cannot be mapped to a number field. 100 and 100.5 can.
Where is the Ecommerce Price field on a normal Collection?
Price is a default Ecommerce field. Webflow says those fields cannot be added as custom fields on a Collection that is not Ecommerce, and they cannot be removed from an Ecommerce Collection.
The new field is in the Designer and missing on the live site. What should I publish?
Publish the whole site. Webflow says a schema change needs a full site publish before the live site reflects it.
Can I sort the list by this field?
Yes. On a dynamic Collection list, sort by the number field from smallest to largest or the other way. The sort guide covers a custom order that uses one number per item.
Sources & further reading
Need a hand with your Webflow site?
View membership
View membership