How to optimize product filters for eCommerce niches

Originally published at: https://community.envato.com/utilize-product-filter-specific-ecommerce-niches/

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.

For example:

“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:

Fashion

Hotel bookings

Toys and games

Digital products

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.

Fashion stores

There are three must-have elements on a product filter for a fashion eCommerce site:

Size

Price range (or custom price input)

Colors

Optional elements may include

Brands

Size converter

Petite size

Plus size

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:

Price range

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.

Size

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.

Brand

You can either type your favorite clothing brand, or pick up a brand from the below list.

Color

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:

Style

Frame shape

Frame filter

Lens treatment

Lens color

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.

Hotel booking

Another niche in which product filters are a must-have element to drive sales is hotel booking sites

Here is the product filter of Kayak - a travel booking site. Here we only discover a hotel booking bar.

On this product filter, you can see that there are 8 basic elements:

Destination/Hotel name

Check-in

Check-out

Number of rooms

Number of guests

Number of stars

Price ranges

Guest ratings

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.

Toy stores

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:

Age

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?)

Gender

For girls or boys?

Types of toy

Dolls or dollhouses for girls, cars for boys, or puzzle games for both boys and girls?

Price

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".

Digital products

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

Features

Including specifications for that product line (for example, laptop computers must have features on RAM, disk drive space, etc.)

Brand

If your site sells products from more than one brand

Price range

Drag style or custom range options

Color

What colors the product is available in

Condition

(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:

Headphone style

Brand

Features

Shop by use

Color

Price

Condition

Offers

Collection

Customer ratings

NewEgg provides a little bit more detail by adding more specifications of product items on their product filters.

Additional requirements/elements

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.

clear one or all - zalora (1)

Use AJAX product filter

You can use AJAX product filter to sort products easier without reloading the whole page.

ajax (1)

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.

amazon search (1)

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

Top sidebar

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.

Product category

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.

simplified search (1)

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.

To conclude

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

 
2 Likes

Hey! Nice article, every new user that wants to go into eCommerce should read it! If you use WooCommerce you can check this filter http://codecanyon.net/item/woocommerce-product-filter/8514038 it is packed with features, versatile and is documented very well, you can check that here http://mihajlovicnenad.com/product-filter/documentation-and-full-guide-video/ Also check the demos at this link http://mihajlovicnenad.com/product-filter Thank you!

Hi Folks!

For filtering WooCommerce products exists flexible and powerful WooCommerce Products Filter - WOOF. And everybody can use it even for free: https://wordpress.org/plugins/woocommerce-products-filter/

The plugin has big documentation as for customers so for developers: http://www.woocommerce-filter.com/codex/

Premium version of the plugin can be found here: https://codecanyon.net/item/woof-woocommerce-products-filter/11498469

1 Like

Hey, that’s a cool and helpful article. Great job!

Product filters are indeed really effective when customers already know what they want and all they need is a quick way to find what they’re looking for. However, I often catch myself not really knowing what exactly I’m looking for when browsing online stores. In such a situation, I don’t find filters very helpful but rather confusing. Instead, I came across a store really did it in a smart way and made it easy for me to find the right product. They used a solution called “Zuvoo” to create some sort of interactive product selector (think of a step-by-step assistant that finds the right product for you). It’s super simple: I had to answer a few simple questions and it took me to a page with personalized recommendations. Just as if I talked to a consultant in a store! Perhaps that’s also helpful for some of you! Here are some of their examples: https://zuvoo.com/examples.

Hi,
I am using woocommerce in my website. It’s not an online store but just a mobile based news portal. I have more than 2000 products. But I need more UX in my website, so that visitors can easily filter products by price limits and category. This one is my website http://muthophonebd.com/

Excellent article on product filters for eCommerce which are explained in detail. Each and every aspect is comprehensively explained very easily. I am glad to see this valuable information.