Sort a CMS collection list by price (and solve Webflow's comma issue)

It's time for another short Webflow tutorial! Haven't heard of Webflow before? You can check it out and sign up for an account here (yes, that's an affiliate link). This time I'm showing you how to filter a collection list (in my case a real estate listings page) by price and how to solve a small but annoying issue with commas in Webflow. This allows you to display the properties either from the most expensive one to the most affordable one or the other way around. While you might know that this can be achieved by using the filter feature in Webflow, you might not know that keeping a comma in your price can be quite tricky. Especially for real estate listings it's important to have keep a comma in your price for better readability and to allow visitors to scan the prices on the "for sale" page more quickly.

‍

Either a comma or filtering – can't I have both?

However, that's where the problem starts. Webflow currently doesn't allow you to include a comma in your "numbers" field in the CMS collection item. But you need the "numbers" field to be able to sort your properties by price – having the price as a "plain text" field (which allow commas) removes the ability to filter by price. Very annoying! So how do you get around this?

This is how I solved the issue:

1. I created both a numbers field, as well as a plain text field in my CMS collection
2. The numbers field contains the property price without a comma (e.g. 500000)
3. The plain text field contains the property price with a comma (e.g. (500,000)
4. Both fields don't include the dollar (or whatever currency you're listing), the dollar sign is placed as a separate non-CMS text field on the page, net to the price
5. After you've finished entering the values in your CMS and set up your CMS collection on the page, you place two text fields next to each other on the page (use inline block to make them stay next to each other)
6. Connect one text field to your numbers field in your CMS collection, connect the other text field to the plain text field in your CMS collection
7. You should now have to prices, one with comma and one without a comma on your page
8. Now set your text field without the comma to "display: none"
9. Lastly select your collection list on the page, go to the sorting options on the right hand side of the screen in the Webflow Designer, select your CMS numbers field and sort either from low to high or high to low
10. That's it! You should now be able to sort your property list by price, while still keeping the comma in the price. Yay!

‍

Don't want to read? Watch my short video tutorial

‍

Want to know how to set up filtering options so your site visitors can actually filter by price or by newest/oldest properties? I'll do a brief tutorial about this soon. Stay tuned!