Component settings

Aside from the General settings that we mentioned in the using the page builder article, the settings will differ on each Frontend component. It depends on what's been added to a schema of the component and what's been set as editable (see the schemas article for more information).

The best way to understand how each setting works without looking into the code is to open a page within the staging environment and open the Preview, then you can watch how it affects the site as you make each setting change.

In this article, we'll go through how the field types appear in the configuration of a Frontend component.

Text field

Text fields always appear with the language indicator on the right of the text box. If you have multiple languages in your project and the field has been set to translatable, you'll have multiple text fields with the different languages in your project.

These should be used for shorter text items on your site, like buttons, headers, and so on.

Click anywhere in the text field to write your text.

fe8fce9 text fields

You can use multiple languages for a text field. See the locales and translations article for more information.

Markdown

The text will appear greyed out in a Markdown content field. You can click anywhere on this text or on the edit icon to open the Markdown editor. There, you can write as much Markdown as you want.

7892a2a Markdown

See the using the markdown editor article for more information.

Toggle

A toggle can either be enabled or disabled. When the toggle is to the left and grey, it's disabled. When the toggle is to the right and blue, it's enabled.

Click anywhere in the toggle to enable or disable it.

f32d225 toggles

You can click anywhere on the dropdown to choose between the options provided.

90930c7 dropdowns

Image

An image always has a selector, a title, a crop ratio, and a crop gravity.

To choose an image, click the Select button. This opens the media selector. You can click on an existing image or upload a new one. It works the same as the media area, but you can't edit any existing images.

To replace an image, click the Select button again. You can use the trash can icon to remove an image but if your page is published, this will cause errors on your site.

The title is the ALT title for your image and is a free text field.

The crop ratio and the crop gravity are both dropdowns that you can select from.

bb4ceb5 Image component setting

Groups

A group will appear as a list with an edit icon and an add button.

You'll see a warning if there's required information needed in your group and it hasn't been inputted.

Category component group setting

When you click the edit icon (or add button), a pop-up will open that with more fields, but they'll have the same types as we've gone through already. Use the toggle arrows at the top right to go between the items in your group.

Category component group setting pop-up

Data sources

In this section, you can add filters and decide what you want to display to your customers. You can search for existing data source filters, select one that's already there, or create a new one.

When adding a new data source filter, edit the name, so it's easy to find in the future.

f18476f data source configuration

See the using the data source filter editor article for more information.

Composable Commerce
Getting StartedMerchant CenterTutorialsHTTP APIGraphQL APIImport & ExportSDKs & Client LibrariesCustom Applications
Frontend
Getting StartedStudioDevelopingHTTP API
Sign upLog inSupportStatusOfferingTech BlogIntegrationsUser Research Program
Copyright © 2023 commercetools
Privacy PolicyImprint