Component settings

Aside from the General settings mentioned in the using the page builder article, a Frontend component can have other configuration options available in its schema. Depending on its code implementation, you can use these configurations to change the component's appearance and behavior.

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.

A text field of a Frontend component with the English language indicator


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.

A markdown field of a Frontend component with edit icon


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.

Two toggle switch fields of a Frontend component to choose content width

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

A dropdown field of a Frontend component to choose theme


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.

Deleting an image from a live page will cause errors on your website.

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.

A image field of a Frontend component to select image, alt text, crop ratio, and crop gravity


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.

A group field of a Frontend component to select category

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.

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.

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

A product list data source filter settings of a Frontend component