Component settings

Text field

Text fields let you input the text for short text items on your website, such as buttons, headers, etc. To edit the text, click the text field and input your text.

The language indicator on the right of the text field shows the text language. If you have multiple languages in your project and the field is set to translatable, you'll have multiple text fields with different languages in your project. For more information, see locales and translations.

Markdown

Markdown fields let you input text in markdown.

By default, the text will appear greyed out in a markdown content field. To open the markdown editor, click the text or the Edit icon. For more information, see using the markdown editor.

Toggle

A toggle can either be on (set to the right) or off (set to the left).

Click the toggle to turn it on or off.

Drop-down

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

Image

To add an image, click Select image: the media selector opens, where you can select an existing image or upload a new one. The media selector works like the media area, but you can't edit existing images.

To edit or delete an existing image, click the Edit or Delete icon.

In the Alt text field, you can enter the alternative text associated with your image.

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

Link

Links can be of two types: Link or Page folder.

If you select Link, you can enter any URL.

If you select Page folder, you can choose a page folder from the ones available in your project.

Groups

Groups are a set of input fields of different types which are used to create an element of the UI. For example, to create product cards, it could be necessary to upload an image, enter some text, and add a link. You can bundle the image, text field, and link field in the same group.

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 inputs for frontend components.

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.

To learn more about data source configuration, see Developing a data source extension and Schemas.