Call Us: 888-867-5309

Using and Customizing the Property Filtering Module

The Property Filtering Module comes with the Redwood FreeHold theme, which is geared towards real estate. This module is used on the blog listing template built for listing real estate properties using the blog framework, and adds very customizable filtering for that page! You can filter your properties based on number of bedrooms, square footage, location, price and many other options!

Now, as the Redwood FreeHold theme can be used for anything, not just real estate, we've built this filtering module to be super customizable. Not only can you make adjustments around the real estate defaults, but you can modify it for any other type of usage.

Check out this video for a demo of the property listing page and this filtering module:

Now, let's get into how this module and works and how to get it setup on your site! First, you'd of course add the module to your page, just like any other module. Click the + icon on the left, search and find the "Property Filtering" module, then drag it on to your page! Now, if you're using our blog property listing template, this module will already be in place.

Initial Module Setup Options

property-filter-settingsFirst, you will select your blog that you are using to manage your properties. That is your "Blog ID".

Second, you'll find a multi-select field "Filter Options". This has a number of options to select from all of the real estate elements that you can filter by. The default setup will come with the 5 items selected that you see in the screenshot here.

You can click the X on an item to remove it from filtering, and you can click in the box to open up the list of available options.

NOTE: While you can change these labels in this module and in the property template, you'll select here based on the original field labels.

 

property-filter-resize

Reordering the Filter Options

Once you have your desired filters selected, click the "Reorder options" link to open a window as seen here. You can drag-n-drop each of the fields to put them in the order that you'd like them to show in your filter. They will show left to right, and then wrap to a new row as needed.

When finished, click "Confirm".

The image below is what the filter module looks like by default.

property-filter-module

 

Filter Labels and Ranges

property-filter-labelsNext, you can modify the labels and field ranges. You will find Filter A-L, each showing the default label (like "Bedrooms") in parenthesis. 

Some items, like Filter A (City), simply contain a title field to change the text label that is seen on the frontend. You can change it to something entirely different, or maybe you just need to translate it into a different language.

Then other filters, like Filter C (Bedrooms), have the title AND a Range Min, Range Max, and Input Width field. These are for fields that contain a number value, like the number of bedrooms, acreage, price, etc. This is where you can control the range that a user can select in your filter for each item. For example, if you never have properties with more than 5 bedrooms, you don't need a user to search for up to 20 bedrooms, so you might change the Range Max to 5.

The Input Width is the size of the input fields where the numbers show. If you make changes and are using larger number values, you may want to make the input field wider so numbers do not get cut off.

NOTE: You'll find that fields that default as bedrooms and bathrooms have smaller range options built in... where fields like price have larger range options. So if you are modifying this for a different use, pick the field to update based on one that has a similar range value. For example, if you are modifying this to post listings of local egg suppliers (weird example, I know), you'd pick a field like "bedrooms" to swap out for "Number of Eggs" since a range of 5-20 would be easier to customize than choosing the price field where the minimum range option is 500.

property-filter-label-edits

Field Label Customization

In the module, you will see text items like "View All", "Keywords" or "Reset Filters", which are used in the module display. If you need to change any of these or translate them, you do not have to do so at a code level! The last group of field options on the left side panel is "Labels". Click to expand the group and you'll see that you can easily update any of the labels found there!

Deeper Customization

In most cases, you'll be able to dial in this module to get what you need without having to modify any code! However, if you need to make big changes to field range options or anything else, you can. As you are unable to modify any assets from a Marketplace theme, you would have to create a child theme and then clone this filter module into your child theme. Then from there, you can modify the module as needed in the design manager.

Styles Tab

Finally, you'll find a Styles tab like you see in all of our modules. Here, you can modify various visual elements of the module from spacing to colors to buttons! Any changes made here will only apply to that instance of the module... so if you're using it on more than one page, it doesn't have to be the same everywhere that it is used.

Further Customization and Support

If you would like any customization work done with your implementation of this module or would like more hands-on support, we are here and available to help! Fill out the help form on THIS PAGE to initiate that request.

About the author

Nathan Gifford

Nathan is the Director of Website Services at Growth and has been in web development for nearly 20 years... spending much of that in PHP open source CMS worlds and eventually landing in the HubSpot CMS realm. He is the lead developer of our Redwood themes and Marketplace efforts.