# Component settings

Learn about configurable field types for Frontend components.

Each Frontend component has a [schema](/frontend-development/schemas.md) created by developers that determines its structure and the fields to configure it from the page builder. Following is a description of the field types you can find when [editing](/frontend-studio/using-the-page-builder.md#edit-a-component) a Frontend component's settings.

## Text

Text fields let you enter either one-line text or multi-line text. To edit the text, click the field and enter your text.

The language label indicates for which project language the text will be displayed. If more than one language is set for your project and the field is set to translatable in the schema, multiple text fields are displayed. For more information, see [locales and translations](/frontend-studio/locales-and-translations-in-the-studio.md#component-level-translations).

![A text field of a Frontend component with the English language label](https://docs.commercetools.com/frontend-studio/images/migrated/fe8fce9-text_fields.png)

## Markdown

Markdown fields let you enter text with [Markdown syntax](https://www.markdownguide.org/cheat-sheet/). To open the Markdown editor, click the **Edit** icon next to the Markdown field.

![A Markdown field of a Frontend component with the edit icon](https://docs.commercetools.com/frontend-studio/images/markdown-field-edit-icon.png)

In the Markdown editor, you can enter your text in the left pane and see a preview in the right pane. If more than one language is set for your project, you can enter the text for the different languages. To save your changes, click **Done**, the Markdown editor closes and you will return to the [page builder](/frontend-studio/using-the-page-builder.md).

Changes in the Markdown editor do not save automatically, remember to click **Done** to save.

![The Markdown editor with same sample text and its preview](https://docs.commercetools.com/frontend-studio/images/markdown-editor-preview.png)

## Toggle

Toggle fields let you activate or deactivate the related setting. The setting is active when the toggle is on the right and inactive when it is on the left.

![Toggle field of a Frontend component to show rounded borders](https://docs.commercetools.com/frontend-studio/images/component-settings-toggle-field.png)

## Drop-down

Drop-down fields let you choose between the available options.

![A dropdown field of a Frontend component to choose theme](https://docs.commercetools.com/frontend-studio/images/component-settings-dropdown-field.png)

## Image

Image fields let you add images to a Frontend component. To add an image, click **Select image** and select an image available in your project or upload a new one by clicking **Add media**.

In the **Alt text** field, you can enter the [alternative text](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt) associated with your image.

From the **Crop ratio** and **Crop gravity** drop-downs, you can select the cropping settings for the image.

To edit or delete an image in the component, click the **Edit** or **Delete** icon.

Deleting an image from a component that is used on a live page version will cause errors on your website.

![A image field of a Frontend component to select image, alt text, crop ratio, and crop gravity](https://docs.commercetools.com/frontend-studio/images/migrated/bb4ceb5-Image_component_setting.png)

## Link

Link fields let you create links of two types: **Link** or **Page folder**. 
If you select **Link**, you can add both internal links within your website and external links:

- To add an internal link, you must enter the [path](https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname#examples) to the page (for example, `/new-arrivals`).
- To add an external link, you must enter the absolute URL (for example, `https://www.example.com`).

![A link field of a Frontend component with an external link](https://docs.commercetools.com/frontend-studio/images/link-field-external-url.png)

If you select **Page folder**, you can choose a [page folder](/frontend-studio/page-folders.md) to link to from the ones available in your project.

![A link field of a Frontend component with a page folder link](https://docs.commercetools.com/frontend-studio/images/link-page-folder.png)

## Group

[Group](/frontend-development/schemas.md#group) fields are sets of fields of different types which are used to create an element of the UI. For example, to create tiles with product images, it could be necessary to enter the tile name, upload a product image, add a link, and configure other settings. In such case, it is possible to bundle the configuration fields in the same group.

![A group field of a Frontend component to select category](https://docs.commercetools.com/frontend-studio/images/tile-group-fields.png)

You can duplicate, edit, and add a group. You'll see a warning on the group if some required information is missing.

To learn more about group fields, see [Group](/frontend-development/schemas.md#group) field type.

## Data source filters

Data source filters lets you to select the data sources from which to retrieve data to display through the Frontend component.

You can create a new data source filter or select an existing one.
When creating a filter, you should give it a descriptive name so that you can
easily find it again in the future.

You can preview the data retrieved from the data source according to the filters you set, 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).

To learn more about data source configuration, see [Developing a data source extension](/frontend-development/developing-a-data-source-extension.md) and [Schemas](/frontend-development/schemas.md).

![A product list data source filter settings of a Frontend component](https://docs.commercetools.com/frontend-studio/images/component-settings-data-source-filter-preview-new.png)

## Related pages

- [Area overview page with navigation](/frontend-studio.md)
- [Previous page: Manage the page builder](/frontend-studio/using-the-page-builder.md)
- [Next page: Create anchor points](/frontend-studio/creating-anchor-points.md)
- [Search documentation and API specs](/search.md)