Filters

Filters enable your site visitors to search more precisely and find what they need.

Filter types in Search Studio:

• Category trees
• Multiple choice filters with two different types of logic:
  • "And" - results should match all selected values
  • "Or" - results should match at least one selected value
• Boolean filters
• Color filters, with icons.
• Range filters, which can be displayed as sliders or buckets.
• Numeric filters, which can be displayed as range sliders, buckets, or single-value checkboxes.

Create custom search filters

Make sure to add Data Points before creating your first filter. Data points will be used for defining the values for the filter.

• Log in to Search Studio.
• Navigate to Filters and Sorting.
• Click on "Add filters".

• Give the filter a name (which will be visible to your visitors). You can update it later.
• Select the filter type (and the filter logic for multi-select filters). If you want to change the type of an existing filter, you'll have to set it up as a new filter, remove the old one, and re-index.
• Choose which data point should be used for the filter.
• Save and re-index your entire site once you've created all your filters.

Create product search filters

For ecommerce projects, filters can be set up based on your product feed. Structured data like Color: Red and Material: Cotton will automatically turn into filter options.

Add filters: Click Add Filters and select attributes like Price, Category, Brand, and Color. Filter options: You will see options for product filters and content filters, allowing different filters for product search results and content search results.

Product filters vs content filters

You can set up different filters for your product search results and your content search results

For example, for the query "power drill," you might have product filters like brand and power source, while your blog result group containing posts like "Best Power Tools for DIY Projects" could have content filters like Publication Date and Topic.

Fine-tune your filters:

• Re-order your filters with a simple drag-and-drop. Filters will be displayed to your users in the same order as arranged in the Control Panel.
• Check your range filter minimum and maximum values to make sure the extraction is valid. If there are some issues here - please modify the data point or product feed that serves as a source of info for the filter.
• Evaluate multiple-choice filter values and remove any unwanted ones.

For product search, consider adding Show above percentages to your filter options. This allows you to set a percentage threshold that must be reached before the filter is shown.

• Go to global filter settings.
• Click the pencil icon next to a filter and find the "Show above" option. For example, if you set your color filter to 50%, it will only show for the query "keyboard" when at least 50% of keyboards in your feed have a color attribute. If only 10% of keyboards have a defined color, the filter will not show. Setting the filter to 0% will show it even if only one product fits.

Advanced fiter settings

Add filters to the JavaScript Plugin

To enable filters for end-users, adjust your zoovuSearchConfig by adding the filters object and setting the enabled property to true (this setting is disabled by default).

var zoovuSearchConfig = {
   /* Your configuration*/,
   filters: {
      enabled: true, // whether to generate and show filter options, default: false
      position: "top", // where to place the filter view, one of the following: "top", "left"; "top" - filters will be shown above the search results, "left" - filters will be shown to the left of search results + "show filter" button will be added for mobile devices
      label: "Filter", // the label of the filter column, will be also used as screen reader text
      showCounts: true, // whether to show result counts for multiple choice filters
      showQuickDelete: true, // whether to show a "Quick Delete" bar summarizing active filter options and providing a "delete all" option
      deleteAllLabel: "Clear All", // the label of the "delete all" option
      settings: {} // range filter settings, e.g. {Price: {unit: '$', step: 1, drawHistogram: false}}
   }
}

Adjust range filters

Range filters, based on numeric values, might lose non-numeric information during extraction. Adjust parameters by adding a settings object to your filters configuration: for example, provide the relevant unit ($, €, etc.), define the step size, or hide the histogram.

A histogram is generated by default. It gives your users a quick overview of how many results are available in a specific range.

To adjust these parameters, add a settings object to your filters configuration. Your range filter can either be referenced by the filter name (displayed in the user interface) or by the generated filter ID:

var zoovuSearchConfig = {
   /* Your configuration */,
   filters: {
      enabled: true,
      settings: {
         Price: { // referenced by view name
            unit: '$', // show $ as the filter unit
            step: 1, // the step size
            drawHistogram: false // don't show the price histogram
         },
         'fid#2': { // referenced by filter key
            step: 10
         }
      }
   }
}