Product filters are a must-have element for every eCommerce site, big and small and can bring you more sales without wasting money on paid advertising. However, we cannot apply a single product filter’s template for all eCommerce niches, since each one has its own specifications.
This article will take you through the importance of product filters, as well as how to customize them for your eCommerce niche and improve your sales performance. After reading this, you should find it much easier to set up a product filter that helps you leverage your online store.
There are four essential steps to designing a product filter for your niche site that works, including:
- Defining the necessary search fields
- Additional requirements/elements
- Knowing where to put the product filter
- Testing and improving
Defining the necessary fields for your niche
In order to find the necessary fields for a product filter, you need to think about your target customer, then list all the questions they might think of when doing a search on your site.
“I’m searching for a dress in size S. Does X site have this size for me?”
“Is there a pair of shoes in size 38 in black?”
“I just want to buy a sports bra ranging from $25 to $36.”
“No. I don’t care about brands. I buy only what I find interesting only”
“Is there any wooden puzzle sets for kids from 2 to 4 in your toy store?”
Then from that list, choose questions that most of your target customers may ask. From there you need to define the necessary fields that appear on your product filter.
In this article, we will go through four niches:
Toys and games
For the best customer experience, you should customize fields based on product categories and subcategories, not just for the site overall. For example, you cannot put search fields for audio products in the laptop and computer category. Keep your search fields relevant and usable.
There are three must-have elements on a product filter for a fashion eCommerce site:
Price range (or custom price input)
Optional elements may include
Zalora is an online fashion eCommerce site that has a standard eCommerce platform, including product filters.
In this product filter, you can see the following elements:
The price range is from SGD4 to SGD549. Moreover, as you change the price range, you can see the available number of items that match your price requirements.
On this section, sizes are placed in squares so that you can easily pick up a site that fits with you. Zalora even goes further by including a size converter. This size converter (which displays in the tabs) helps international customers choose their suitable size more easily (without using another size converter tool), and reduce the percentage of drop-offs from the product filter.
You can either type your favorite clothing brand, or pick up a brand from the below list.
Choose a color for your item. You can also see how many items in a particular color from this list.
Let’s get into more details of a subcategory on Zalora Singapore, to see how it optimizes product filters for specific product niches.
Here I chose “sunglasses” (under the “accessories” category)
In this category, you can see that beyond general fashion filters like Price or Brand, there are also specific filters for sunglasses only, including:
With this product filter, customers who are intent on buying a pair of sunglasses find it much more convenient to find their favorite item, which leads to more conversions.
By optimizing search fields for both whole categories and subcategories like this, we can assist our customers to find their favorite items among hundreds or even thousands, which shortens their path to purchase.
FreePeople is another fashion site that optimizes product filters for fashion items. Contrary to Zalora Singapore, they’ve simplified their product filter by including just two elements: color and size.
The color field on FreePeople is more visual than that of Zalora Singapore. Here they use color dots to display their colors.
Another niche in which product filters are a must-have element to drive sales is hotel booking sites
On this product filter, you can see that there are 8 basic elements:
Number of rooms
Number of guests
Number of stars
On search results pages, you can see that there are more advanced filters like freebies, amenities, nearby locations,etc. Based on this product filter, your customers can easily find the hotel rooms that best fit with their trips. In other words, by using this product filter on your hotel booking site, you can capture more customers versus a site that only has a general product filter.
Which criteria do parents care about when looking for toys for their kids? If you can answer this question, you have found essential fields for the product filter on your online toy store.
In general, parents are looking for toys that match following criteria:
Pick up toys that are suitable for each age range (example: toys for kids from 0-18 months, or for those from 18 to 36 months?)
For girls or boys?
Types of toy
Dolls or dollhouses for girls, cars for boys, or puzzle games for both boys and girls?
How much are they willing to pay? $50, $500, or $5,000?
The Toy Shop has done well with their “Present Finder” on their online store (on the top sidebar, next to the slider on the homepage, and on the product category page).
The present finder already includes the basic elements mentioned above. Besides, this finder also shows you how many toy items available based on your chosen criteria.
For example, I want to buy toys for my 20-month old daughter, with budget from £10 to £45.
It saves the customer a lot of time empowering them to pick the best item for them, a lot easier.
Flair – another online toy store – has an advanced “Gift Finder” with a field for “favorite character”.
For multi-functional products like digital items, advanced product product filters are vital to help customers find the item that they actually need.
A basic product filter for digital products must have the following five elements
Including specifications for that product line (for example, laptop computers must have features on RAM, disk drive space, etc.)
If your site sells products from more than one brand
Drag style or custom range options
What colors the product is available in
(if your site sells both new and used products) new, used, etc.
BestBuy – a well-known electronic retail store is a typical example of using product filters to gain more sales.
In the above product filter, I am looking for headphones. Here I can choose to browse through hundreds of headphone products with following criteria:
Shop by use
NewEgg provides a little bit more detail by adding more specifications of product items on their product filters.
Besides basic search fields for specific niches, you should also note additional requirements that can enhance your product filter. Below are some suggestions from us, including:
Allow me to start it again
Use AJAX for instantly loading
Keep it visible
Allow me to start it again
Product filters should include a button to clear field options or clear all options, so that customers can instantly start their search back without wasting too much time to delete each option.
Use AJAX product filter
You can use AJAX product filter to sort products easier without reloading the whole page.
If you are using WooCommerce for your site, YITH WooCommerce AJAX Product Filter might be a great choice for you.
Keep it visible
Always keep the color of the product filter contrast with the surrounding area, so that customers can find the product filter easier.
For example, the color of the product filter on Amazon always contrasts with that of the overall top sidebar. This design makes the product filter easy to spot.
Moreover, the size of the product filter needs to be easy to read. A product filter with text size that is too small or too big can be annoying, and may lead to drop-offs.
Know where to put the product filter
Whatever your niche, there are three basic positions for a product filters
Here you can put a simplified product filter on either top-right or top-center. When customers do a search, they will be redirected to the search results page, which includes the advanced product filter.
This is the most popular position for product filter. You can choose to display product filters on left, right, or top sidebar on product category page. In order to gain the best exposure via product filters, please carefully choose to display only fields that are suitable for each product category/subcategory.
Search results page
After do a search via product filter on top sidebar, customers will be redirected here. On this page, you can put the product filter with fields that the category or subcategory that contain that search keyword. For example, after searching for “nectar sunglasses”, I will be redirected to a search result page with search fields for “nectar sunglasses” subcategory.
Additional information: for more detailed tips on improving eCommerce product filter, you can read the research series of Baymard here.
Test and improve
To utilize product filters for the highest conversion rate, you need to continually apply new changes to it. A popular tip to track the performance of product filters is to make a small change, then track the conversion rate it’s generating before and after that change.
Whichever niche your online business is, remember to ask yourself what questions are going through your target customer’s mind when doing a search. The purpose of this is to understand the criteria in their mind when searching for product items. When you actually get into their shoes, you can easily customize your product filter to help them find their products faster and more conveniently.
Interested in more WooCommerce articles on eCommerce niches like this? Read more articles here and check out their ThemeForest portfolio