Filters Configuration

The ability to filter search results is crucial for e-commerce sites because it helps users locate products more efficiently, leading to an improved user experience and potentially increasing sales by assisting customers in finding what they are looking for quickly and easily.

The 'Filters' functionality is used to narrow down search results based on the fields of your data feed. These filters can include attributes like price, product category, brand, size, color, and various other product-specific characteristics.

Filter Types

There are several types of filters:

  • Visual Filter: Displays colors or images in a grid or list format.
Color Filter
Image Filter
  • Frame Filter: Displays info in labels, such as size, gender etc.
Frame Filter
  • Range Filter: Displays as numeric range sliders. Represented by a small range selector. Note that only numeric fields will be displayed as range sliders.
Range Filter
  • Terms Filter: Displays info as a list of terms/categories.
Terms Filter

Not all fields are good for filtering. For example, a field that stores product references is not good because it's very difficult to find a set of items sharing the same reference, and you would get a long list of filter references. However, brands, colours, sizes and genres are good options to filter.

Once configured, they will appear in your Doofinder layer automatically, so it would be best if you had your data feed indexed before configuring your filters.

How to Configure Filters

In your admin panel go to Search Engine > Settings > Filters. To add a new filter, click on the 'Add Filter' button and a pop-up box will appear.

Admin Filters

Click on the dropdown menu and select the field you want to apply as a filter. You will find the available fields that Doofinder obtained from your data feed. For example: categories, brand and best_price. For the purposes of this exercise, we will choose 'brand'.

select filter field


🗒️ Note:You can only add up to 10 fields in the filters. This will help maintain the speed of the search function.

Now, write a custom name for your filter, such us: 'Brand' (this is the name that will be displayed on your layer, so you can write what you want to be visible to your customers). To show the filter in the Doofinder layer, enable the "visible" checkbox at the top.

In addition, you can arrange the number of TERMS you want to display to customize the appearance of the filters by changing the default numbers.

  • Minimum: Number of terms that will be shown initially.
  • Maximum: Number of terms that will be shown when click on "see more".
  • Hide all terms by default: To show the terms of the filter hidden by default.
complete filter fields

Once you are done, hit the 'Save' button. This is what your screen will look like when you have created your filters:

filter screen

To remove a filter, simply click on the trash icon located on the right-hand side.

Create a Frame Filter

The appearance of this filter is oriented to be used with "size" fields, but it also applies to many other fields, such as ram memory, screen inches, storage, watts, wheel diameter and much more.

filter frame

It is very easy to configure. When creating or editing a filter, you can customize its appearance by choosing the "Frame" option. In addition, you will be able to sort the values and give a custom name to each of them.

filter frame

Create an Image Filter

You can use an image as a filter to make its appearance more appealing. Take a look at these brands example!

filter frame

To select this option, when creating or editing the filter simply choose visual and image.

image filter

Then, you need to upload the images you wish to display in your filter section.

image filter

🗒️ Note:Supported file types are .jpg, .png. Recommended file size is less than 50kB.

This type of appearance can not only be used with the "Brand" field. Take a look at these possibilities and use your imagination!

  • Grid layout by dress shape:
image filter
  • List layout by fabric type:
image filter

Create a Color Filter

Another way to enhance the appearance of filters is to use colors instead of plain text. Take a look at this example:

Color filter example

To configure the Color filter, add the filter and choose 'color' from the dropdown menu. Then complete the fields according to your needs. For example, type a filter custom name, let's say 'Color'. Then select the appearance, such as visual, and more options will be displayed for you to customize your filter.

Select between Type, Layout and Content.

  • Type: Color / Image

  • Layout: Grid /List

  • Content: With labels / Without labels

color filter

Each value within the selected field's feed can be assigned a custom name, allowing for text translation when the original feed is in English. Additionally, you can specify an HTML color code for each value. Certain common colors (e.g., white, black, gray, blue, red) already have generic color assignments in place.

🗒️ Note:The "multicolor" value is displayed as the first option when the field is empty.

Group filter by color code

You can group values from the feed to show them under the same color in your filter. Let's say you have a product in a range of beige in your store, and you don't want your color filter to show light beige, medium beige, dark beige, etc. You can group in your filter all those beige colors into one and still show the range in the results. Take a look at this example:

 group color filter

How to group colors

Go to Search Engines > Settings > Filters and click on add filter if you are creating it for the first time or click on the existing color filter to edit it.

1- Enter the same HTML color code for the values you want to group.

2- We recommend writing the same custom name for all terms grouped under the same color. Otherwise, the layer will display the first of them. If no custom name exists, the layer will show the default value of the feed.

3- Remember to Save changes!

color group filter

Best_price filtering field

In the data feed, you have the option to provide both a regular price and a sale price. However, when it comes to filtering the results, you typically want to filter by the final price, which could be either the regular price or the sale price. To facilitate this, Doofinder mandates consolidating the price information into a single field, which is why the 'best_price' field serves this purpose.