Frontastic component settings

Aside from the General settings that we mentioned in the using the page builder article, the settings will differ on each Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.. It depends on what's been added to a schemaschema - The framework behind a Frontastic component and the fields that are available within the Frontastic studio. of the component and what's been set as editable (see the Frontastic 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 Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code..

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.

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.

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.

Dropdowns

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

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.

Link

A link gives you 2 types to choose from: a Link or a Page folder.

When you select Link, you can input any URL.

When you select Page folder, you get a dropdown with all the available page folders within your site builder. You can choose any of these.

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.

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.

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.

👍

Tip

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

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


Did this page help you?