Filters Configuration

The ‘Filters’ functionality is used to filter results based on the fields of your data feed. Once configured, they will appear in your Doofinder layer automatically. In case you use our API directly, you will be able to add filters to your queries.

📌 Note: Filters, as the name indicates, are used to filter results. It would be best if you had your data feed indexed before configuring your filters.

Types of Filters

There are several types of filters:

Visual: displayed with colors or images that can be selected.(Includes layout grid or list).

Frame: displayed with labels, such as size, etc.

Ranges: displayed as numeric range sliders. Represented by a small range selector. Note that only numeric fields will be displayed as range sliders.

Terms: displayed in the Doofinder layer as a list of terms/categories. This has an icon representing a list next to the field.

Filter Types

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.

How to Configure the Filters

To configure the filters feature, log in to your Admin account and go to Search Engines > Settings > Filters.

Filters screen

To add a new filter, click on the 'Add Filter' button and a pop-up box will appear. 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’.

Filter Fields

📌 Note: that 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.
Name your filter

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

filters screen

Categories and best_price Fields

When Doofinder processes your data feed, it transforms the product type field (or the Google product category) and optimises it as categories. Hence, Doofinder needs to create that field for you.

The same happens with the best price field. In the data feed, you can submit a regular price and a sale price, but when you filter results, you usually want to filter by the final price, and it can be the regular price or the sale price. Doofinder will require the price in a single field to make the filtering, hence why the best_price field exists.

Once you’ve selected some fields, you can edit the filter "Label" that will be used in the Doofinder layer, but you cannot edit the "Field" information. You can also sort the filters. Just click, drag and drop. Then hit the Save button.

Color Filters

Color filter example

When you select a filter, you can choose its appearance in the layer:

Terms: equivalent to traditional checkboxes.

Visual: colors or images are shown and can be selected.

Frame: displayed with labels, such as size, etc.

Simply add the filter from the dropdown menu and complete the fields according to what you want.

You can type a filter custom name, let's say 'Color'. Then select the appearance, e.g.: visual, and more options will be displayed for you to customize your filter.

These options are:

  • Type: Color / Image

  • Layout: Grid /List

  • Content: With labels / Without labels

Add a visual filter

Finally, each value available in the feed of the selected field can be assigned a custom name (this is needed to translate the text if the values in the feed are in English) and an HTML color code. Some basic colors (white, black, gray, blue, red, etc.) are already given a generic color.

📌 Note: The "multicolor" value appears first when the field is empty.

Group 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 by color example

How to configure it?

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!

configure the color filter

Image Filter

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

Add an image to your filter

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

choose visual and image

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

upload images

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

grid layout image filter

List layout by fabric type:

List layout image filter

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.

Frame filter example

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.

configure frame filter

When will the filters appear in the Doofinder Layer?

Depending on your users’ browser, it may take up to 1 hour to be up-to-date on their computers. Layer options served from Doofinder are not intended to be constantly changing, and they’re cached to improve performance.

If you’re developing some changes that you want to test immediately, you can disable your browser’s cache. For instance, Chrome lets you do this from the Network tab in the Dev Tools by enabling Disable Cache. That will take effect only while the Dev Tools panel is open.

Also, filters are sorted by the number of products with the highest number at the top. If you prefer to order them differently, say by size, colour and so on, you can follow the directions given here. Note that you will require some programming experience to make the changes. (This applies to V7 Layers only).