Skip to main content

Filters

Filters let your site visitors search more precisely and find what they need faster. Set them up under Filters and Sorting in the Control Panel. Once created, filters display automatically — and you can fine-tune how they look and behave in your ss360Config when you need finer control.

Site Search 360 has two filter systems, and this page covers both:

  • Content filters are built from data points and work on every project.
  • Product filters are built from your product feed and need ecommerce search.

Each section below says which of the two it applies to.

Filter Types​

The filter types available depend on whether you build content filters or product search filters.

Available on every project:

  • Multiple choice filters, with two logic options:
    • "And" — results must match all selected values
    • "Or" — results must match at least one selected value
  • Range filters for numeric values, displayed as a slider, as buckets (a histogram), or as a checkbox list of individual values
  • Date filters, displayed as a date range

Available with ecommerce search (Content + Product Search):

  • Category trees
  • Boolean filters
  • Color filters with icons

Content Filters​

Content filters are based on data points.

Create content filters​

  1. Open Filters and Sorting in the Control Panel.
  2. Create a data point if you don't have one yet — data points supply the values for the filter.
  3. Click Create new filter.
  4. Give the filter a name. This is visible to your visitors and can be changed later.
  5. Select the filter type and, for multi-select filters, the filter logic. To change the type of an existing filter, set it up as a new filter, remove the old one, and re-index.
  6. Choose which data point the filter should use.
  7. Save, then re-index your entire site once you've created all the filters you need.

Re-index again any time you update the source data point.

The filter type available for a content filter depends on the data point type: NUMBER data points become Range filters, DATE data points become Date filters, and all other data point types become Multiple Choice filters.

Restrict a content filter to specific result groups​

By default, a content filter shows for every result group. To scope it, turn off Show in every Result Group and select the result groups the filter applies to. For example, show a Publication Date filter only on your Blog result group.

Product Filters​

Available with ecommerce search

This is a Product Search feature, available on ecommerce (Content + Product Search) projects, and in the Site Search 360 apps and extensions for Shopify, Shopware, Adobe Commerce, Oxid, and Modified. To use it, explore ecommerce search, start a trial, or contact support.

On an ecommerce project, the Filters and Sorting section shows two options: Filters (your product filters) and Content Filters — so you can set up different filters for product and content results. For example, the query "dress" might use product filters like color, material, and dress length, while a Blog result group containing posts like "Summer Dress Trends" could use content filters like Publication Date and Theme.

Create product search filters​

Product search filters don't require data points — they're built from your product feed. If your feed contains structured data such as Color: Red or Material: Cotton, these become filter options automatically when you upload the feed.

Click Add Filters and select which attributes to turn into filters. For example, choosing Price, Category, Brand, and Color:

Global Filter Settings​

These settings apply to all of your product search filters at once.

Order Filters By​

Choose how the filters themselves are ordered in the search interface: Alphanumeric (by name) or Usage (most-used first). This is separate from the order of values within a single filter.

Compute Filter Counts​

Filter counts show visitors how many results match each filter value. Computing them adds processing time, so you can choose how much to compute:

ModeEffect
Do not computeFastest — no counts shown
Only compute up to 1,000 countsCounts for the first 1,000 matches
Do not compute for range filtersCounts everywhere except range filters
Always computeCounts for all filters (slowest)

Generate filter options based on head results​

Build filter options from the top (head) results only, rather than the entire result set. This speeds up filter generation on large catalogs.

Hide universal filter options​

Hide filter options that match every result in the set. A value shared by all results does not help narrow the search, so hiding it keeps the filter list focused. A separate option hides these options within head results as well.

Fine-tune Your Filters​

Once your filters are set up, review the following to put everything in its place:

  • Reorder filters with drag-and-drop. Filters display to users in the same order as in the Control Panel.
  • Check range filter values. Confirm the minimum and maximum are valid. If not, adjust the data point or product feed the filter draws from.
  • Review multiple-choice values and remove any you don't want.

Order and curate filter values​

Open a filter with the pencil icon to control which values appear and in what order:

  • Value order. Sort a filter's values Alphanumerically or by Occurrence Count (how many results match each value), or set a Custom order by drag-and-drop. Product filters can also sort by Product Count.
  • Pin and exclude values. Promote specific values to the top of a filter, or exclude values you don't want visitors to see (product filters). On content filters, use the Custom value order to promote values and clear a value's checkbox under Customize Values to hide it.
  • Limit Maximum Filter Options (ecommerce search only). Cap how many values a filter renders, so long value lists stay manageable.

Type-specific options​

  • Boolean filters (ecommerce search only): turn on Show False Boolean to also show the "false" state as a filter option.
  • Category trees (ecommerce search only): turn on Display as flat tree to show all categories at one level, or Disable children automatically to collapse single-child branches.
  • Range filters (buckets): set the Maximum Bucket Count (3–15) and Bucket Fraction Digits (0–10) to control how bucketed ranges are grouped and rounded.

Control when a filter appears​

Two threshold settings keep low-value filters and values out of the way. Both accept a percentage from 0 to 99:

  • Show Above (filter level, ecommerce search only) — show the filter only when the share of results that have this attribute is above the set percentage. For example, at 50% the color filter appears only when at least half of the matching products have a color defined; at 0% it appears if even one result qualifies. Set this with the pencil icon on the filter.
  • Show Values Above (value level, content multiple-choice filters) — show an individual filter value only when the share of results that have that value is above the set percentage.

To fine-tune how filters look and behave in your search interface, see Configure How Filters Display below.

Filter Groups​

Filter groups organize related filters under a shared heading, so visitors can scan a long filter list more easily. Create a group, give it a name, and assign filters to it.

Configure How Filters Display​

Once your filters are set up, they display automatically — no code changes required. On the current Site Search 360 script (v15), the Control Panel enables filters for you, so you don't need to set filters.enabled in your ss360Config.

To fine-tune how filters look and behave, add or edit the filters object under Plugin Configuration in the Advanced Configuration tab of Design & Publish. The most commonly adjusted parameters:

var ss360Config = {
   /* Your configuration */,
   filters: {
      position: 'left', // where to place the filter view: 'top' (above results) or 'left' (beside results, adds a 'Show filter' button on mobile); default: 'left'
      label: 'Filter', // the label of the filter column, 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 with a 'Reset All' button
      deleteAllLabel: 'Reset All', // the label of the button that clears all selected filters
      settings: {} // range filter settings, e.g. {Price: {unit: '$', step: 1, drawHistogram: false}}
   }
}

This is a small selection — filters expose many more options, including mobile behavior, multi-select search thresholds, and slider labels. See the full, current list of filters parameters in Advanced Parameters.

For most projects, the Search Designer already covers common filter adjustments like position and labels without touching ss360Config directly. Reach for these parameters when you need finer control than the Search Designer provides.

Adjust Range Filters​

Range filters are based on a numeric value, so non-numeric information such as a price unit can get lost during extraction.

Add entries to the filters.settings object to provide the relevant unit ($, €, etc.), define the step size, or hide the histogram. A histogram is generated by default and gives users a quick overview of how many results are available in a given range.

Reference a range filter by its display name or its generated filter id:

var ss360Config = {
   /* Your configuration */,
   filters: {
      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
         }
      }
   }
}

Each range filter in filters.settings accepts several more options:

  • label — override the range filter's display label.
  • prefix / postfix — text placed before or after each value (distinct from unit).
  • showSlider — show or hide the slider UI for that filter.
  • decimalPlaces — how many decimal places to display.
  • disableSearch — disable the search input for that filter.

See Advanced Parameters for the full, current set of range filter settings.

Legacy v13 Setup​

The steps below apply only to v13 of the Site Search 360 script. If you're on v14 or later, the Control Panel enables filters for you and the parameters above are all you need — skip this section. We recommend upgrading to the latest version.

On v13, filters do not generate or display by default. To enable them, add a filters object to your ss360Config and set enabled to true:

var ss360Config = {
   /* Your configuration*/,
   filters: {
      enabled: true, // whether to generate and show filter options, default: false
      position: 'top',
      label: 'Filter',
      showCounts: true,
      showQuickDelete: true,
      deleteAllLabel: 'Clear All',
      settings: {}
   }
}

See Filters in Action​

See the filters example for code snippets, or watch these demos:

search filters on top search filters on the left search filter on mobile