Laura Niebel Headshot | Laura Niebel Web Design

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

It's time for another short Webflow tutorial! 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!

This might also interest you...

Tuesday, December 31, 2019

Matterport: What it is and how you can integrate it into your next Webflow project

Ever heard of Matterport? The service allows you to place virtual walkthroughs on your client's website. This could be especially useful for real estate agents and tourism businesses. Let me show you how to easily integrate this feature into your next Webflow project.

Read more...
Thursday, December 26, 2019

How to source a background video from the Webflow CMS

Would you like to use a dynamic background video on your site? Maybe even use it on your CMS collection page? I show you how this is done in just 8-9 steps! Let's get started...

Read more...
Tuesday, December 24, 2019

How to create a cool slide in out hover interaction with Webflow

Want to do a fun hover animation with slide in text for your next project? I've made a short video to show you how it's done and there's also a link to the cloneable example project.

Read more...

Join the newsletter for Webflow & Web Design updates.

Thanks for subscribing! Your first newsletter will arrive in your inbox soon.
Oops! Something went wrong! Try again or get in touch via the form below, so I can add you manually!

Have questions or want to talk about a project idea?

Just send an email to laura.s.niebel@gmail.com or fill out the form below. I'm looking forward to hear from you!

Thanks! I'll get back to you as soon as possible!
Oops! Something went wrong while submitting the form. Please try again or contact me via email.