> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Editor - Filter section

> Style the filter sidebar shown on collection pages.

<Frame caption="Theme Editor > Filter section">
  <img src="https://mintcdn.com/twicecommerce/cJlH0EnJIdVT0BaS/images/theme-editor-filter-section.webp?fit=max&auto=format&n=cJlH0EnJIdVT0BaS&q=85&s=59b75de642ad7dd30d9a7becc1471331" alt="Filter section settings panel in the theme editor" width="1920" height="1080" data-path="images/theme-editor-filter-section.webp" />
</Frame>

The Filter section panel controls the appearance of the filter controls customers use to narrow a collection. Found under **Cards** in the theme editor. Whether filters appear is set on the [Collection page](/docs/sales-channels/online-store/theme-editor/pages/collection).

## Colors

| Setting | Default   | Description                                                        |
| ------- | --------- | ------------------------------------------------------------------ |
| Border  | `#E4E6EB` | Border colour separating the filter section from the listing grid. |

## CSS variables

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-filter-section-border-color: #E4E6EB;
  }
  ```
</CodeGroup>

## Related

<CardGroup cols={2}>
  <Card title="Collection page" icon="grid-2" href="/docs/sales-channels/online-store/theme-editor/pages/collection">
    Enable filtering and sorting on collections.
  </Card>

  <Card title="Colors" icon="palette" href="/docs/sales-channels/online-store/theme-editor/settings/colors">
    Define the storefront colour palette.
  </Card>
</CardGroup>