Structuring Sections for native Content Types

Structure custom Sections with JSON Schema and make them available in FastStore's native Content Types.

4 min read

Now that you have created your cms folder, learn how to structure custom Sections and make them available in FastStore's native Content Types.

FastStore v2 and v3 don't support custom Content Types. Use the native Content Types provided by @faststore/core. For informational or other custom pages, use Landing Page.

What you'll accomplish

By the end of this guide, you will have:

Understood how to define Sections with JSON Schema for editor forms
Gained knowledge of widgets and UI schemas for rich content editing
Learned how to associate Sections with native Content Types

This knowledge enables you to customize content editing while keeping FastStore's supported page structure.

Step 1: Automatically syncing your changes

Before creating or editing Section definitions, go to the root of your FastStore project and run yarn dev to enable the FastStore CLI watch mode. Make sure to use a development workspace.

This command will monitor any changes in the project, including the new section you have created, and automatically merge it with the default sections available in faststore/core.

Open another terminal and run faststore cms-sync to automatically sync your changes in the cms folder with the Headless CMS (legacy) app.
Open the VTEX Admin, access Storefront > Headless CMS and keep it next to your code to see your changes while editing the cms folder. Refreshing the Admin may be necessary to see your changes.

Step 2: Choosing a native Content Type

Choose the native Content Type that matches the page you want to customize. For example, use Product Page for PDP content, Product List Page for PLP content, and Landing Page for informational or other custom pages.

Each native Content Type provides scopes. In the next step, you will use these scopes to control where a custom Section is available.

Step 3: Adding Sections to the Headless CMS

Now, let's make some of our frontend components available for editing at the Headless CMS by writing the content schemas that represent them.

These components are referred to as Sections, and to create them, you can follow the instructions provided in the guide Creating a new section. The guide offers detailed information on the process of creating Sections and integrating them into the Headless CMS (legacy) for easy editing and management.

Use the Section's requiredScopes property to control which native Content Types can use it. For example, the following definition makes a Section available on Landing Pages because the native Landing Page Content Type includes the custom scope:

copy


_17[
_17  {
_17    "name": "CallToAction",
_17    "requiredScopes": ["custom"],
_17    "schema": {
_17      "title": "Call to Action",
_17      "description": "Encourage shoppers to take a specific action.",
_17      "type": "object",
_17      "properties": {
_17        "title": {
_17          "title": "Title",
_17          "type": "string"
_17        }
_17      }
_17    }
_17  }
_17]

For the complete list of supported scopes, see Managing content with scopes and requiredScopes.

The `schema` property

The schema will always be unique for each of your Sections as they create the form that editors will use to submit data and change the content of a given React component.

Notice that you must always declare the following properties inside the schema object:

Key	Description
`title`	The name that identifies your component in the Headless CMS (legacy) app.
`description`	A brief description that helps editors understand the behavior of your component.
`type`	The data type of your schema. Possible values are `string`, `object`, `array`, `number`, `integer`, `boolean`.

Depending on the type of your schema, you may need to define particular fields related to your component structure. For example, for a schema of the object type, you'll need to determine properties that map key-value pairs. For a schema of the array type, you'll need to define the items of that array.

For more information on each property of a schema, check the JSON Schema Reference.

Using widgets

When defining your Section schema, you can also use the uiSchema along with widgets to specify which UI widget should be used to render a given field of your schema. Common widgets are draftjs-rich-text, image-uploader, and block-select. Refer to the Widgets guide for more information.

Next step

Once you're satisfied with your Section definitions, promote your changes to production.

What you'll accomplish.css-17dhml5{min-width:18px;min-height:18px;width:18px;height:18px;}