# Use data source filter editor

Learn how to use the data source filter editor.

The data source filter editor lets you manage the data source filters associated to page folders, dynamic pages, component groups, and Frontend components.

## Open the data source filter editor

You can open the data source filter editor from:

- The [**Site builder**](/frontend-studio/using-the-site-builder.md) area: hold the pointer over a page folder, click the **Settings** icon, and expand the **Data source** section. Then, click the **Edit** icon of an existing data source or click **+ Add data source filter**.
- The [**Dynamic pages**](/frontend-studio/dynamic-pages.md) area: select a dynamic page to open the **Dynamic page rules** pane. In the **Page rules** section, click the **Settings** icon of a page rule, expand the **Data source** section, and click **+ Add data source filter**. You can also open the editor to manage the [**Data source for preview**](/frontend-studio/using-dynamic-pages.md#preview-a-page-version-for-a-dynamic-page) by clicking **Add data source**/**Edit data source**.
- The [**Templates**](/frontend-studio/component-groups.md) area: click **Component groups**, click the **Settings** icon of a component group, and expand the **Data source** section. Then, click the **Edit** icon of an existing data source or click **+ Add data source filter**.
- The page builder when [editing a page version](/frontend-studio/page-versions.md#edit-a-page-version): add a Frontend component to your page version that has a data source, then click \*\*+ Add data source filter \*\*

![The Create page folder dialog with its sections and the Add data source filter button highlighted](https://docs.commercetools.com/frontend-studio/images/site-builder-add-data-source-filter.png)

## Data source filter editor interface

The data source filter editor consists of two sections:

- **Settings**: contains the data source input fields specified in the data source schema. You can edit the data source filter settings by editing these fields.
- **Preview**: displays the preview data returned by the data source for the current configuration without having to check the preview of the entire page.

  To display the data source preview, you must [add preview data for the Studio](/frontend-development/developing-a-data-source-extension.md#add-preview-data-for-the-studio).

![Data source filter editor layout with settings and preview](https://docs.commercetools.com/frontend-studio/images/data-source-filter-editor-new.png)

For further information on configuring data sources, see [Developing a data source extension](/frontend-development/developing-a-data-source-extension.md) and [Schemas](/frontend-development/schemas.md).

## Add multiple data sources

You can add multiple data source filters to your page folder and configure each with a different name and filters to display different information inside your Frontend components.

Each data source filter is independent of the other, so you can configure each individually and use it in different Frontend components.

For example, you can have two instances of a product slider Frontend component using two different data source filters: one configured to show only Red shirts and the other to show Blue shirts.

## Related pages

- [Area overview page with navigation](/frontend-studio.md)
- [Previous page: Locales and translations](/frontend-studio/locales-and-translations-in-the-studio.md)
- [Next page: Use market permissions](/frontend-studio/market-permissions.md)
- [Search documentation and API specs](/search.md)