# Catalog Filter Bar

A horizontal toolbar that sits above your catalog. It shows how many products are showing (e.g. *24 of 320*), gives the user a one-click view-mode toggle (grid / list / gallery), and exposes a row of quick-filter chips you configure.

## Available in

* Catalog modules

## When to use

* Above a **Catalog Display** when users need an at-a-glance count of filtered results.
* Anywhere you want pre-baked filter shortcuts (e.g. *In Stock*, *On Sale*, *New This Week*) — chips toggle the corresponding catalog filter with one click.
* Catalog pages where users frequently switch between view modes — the toggle is faster than a separate Catalog View Select block.

For deep filtering (colour, size, price ranges, free-text search), use **Dynamic Filters** in the sidebar instead — Catalog Filter Bar is for shortcuts, not full filter panels.

## Settings

| Setting                | Description                                                                                                                                                                                                          |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show Results Count** | Whether to show *N of M items* on the left of the bar. Default: Yes.                                                                                                                                                 |
| **Show View Toggle**   | Whether to show the grid / list / gallery toggle on the right. Default: Yes.                                                                                                                                         |
| **Chips**              | A list of `{label, filterField, filterValue}` entries. Each one becomes a clickable chip that applies the named filter when clicked. The first chip is treated as "All" and clears chip-driven filters when clicked. |

## How it works

The bar reads the active catalog and currently-filtered list from the page state — it doesn't have its own filter logic. When a chip is clicked, the bar updates the active boolean filters in the catalog state and the catalog re-renders.

The view-mode toggle drives the same `activeCatalogView` state that **Catalog View Select** uses, so both blocks stay in sync if both are on the page.

## Examples

**Stock-status shortcut.** Two chips: *All Products* (no filter) and *In Stock* (filterField=`stock`, filterValue=`inStock`). Now the user can flip between full and stocked views instantly.

**Promotional badges.** Chips for *New*, *On Sale*, *Clearance* — each tied to a custom boolean field on the product record.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Catalog Display</strong></td><td>The catalog block this filter bar sits above.</td><td><a href="/pages/dAjRJ2GOz4uRXrOSvCJA">/pages/dAjRJ2GOz4uRXrOSvCJA</a></td></tr><tr><td><strong>Dynamic Filters</strong></td><td>Full attribute-driven sidebar filters.</td><td><a href="/pages/WmtioBx6PPBCaAd164X8">/pages/WmtioBx6PPBCaAd164X8</a></td></tr><tr><td><strong>Catalog View Select</strong></td><td>Standalone view-mode toggle.</td><td><a href="/pages/XfnKszbW3hwwMbJ5UCbc">/pages/XfnKszbW3hwwMbJ5UCbc</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/catalog-components/catalog-filter-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.