Introducing the Headless CMS
In this guide, you will be presented with Headless CMS, the solution for content management in FastStore projects. By using the Headless CMS, you can empower editors to create, edit, and publish web content independently through the VTEX Admin.
As a developer, you are responsible not only for creating custom frontend solutions for your client's store but also for defining which content of the storefront will be editable via a Content Management System (CMS). A CMS allows others to edit the frontend content of your store without having to touch your code at all.
Before you begin
Before you proceed, please ensure the following:
Access to a VTEX account
Ensure you have a VTEX account to set up the Headless CMS with a FastStore project.
Set up your FastStore project
If you do not have a FastStore project, refer to the Starting a new FastStore project guide.
Set up CMS resources with your VTEX user role
You must have the following resources associated with your VTEX Admin user role to be able to manage the Headless CMS:
| Product | Category | Resource |
|---|---|---|
| CMS | cms | See CMS menu on the top-bar |
| CMS | cms | Settings |
| CMS | GraphQL | CMS GraphQL API |
To associate a role with the resources mentioned above, you can create a custom role, add the resources to it, or add them to an existing role by editing it.
Headless CMS
Headless CMS is a headless content management system that allows users to store content in a decoupled data layer and deliver it as structured data to their FastStore project via an API.
After onboarding through FastStore WebOps, users can manage their FastStore project on VTEX Admin by navigating to Storefront > Headless CMS under the Projects feature.
Each project lists all web pages created within it, starting empty and filling as editors add new pages. Each page corresponds to a unique URL and is identified by the following properties:
| Property name | Description |
|---|---|
| Name | Identifies a given page. This name is not available elsewhere and is used only internally in the Headless CMS for identification purposes. |
| Type (a.k.a., Content Type) | Determines the nature of a page. For example, the Type can be a Landing Page, a Product Listing Page (PLP), a Product Details Page (PDP), etc. You, as a developer, are the one responsible for defining which content types will be available for the editors of your store. |
| Last modified | Indicates the last time a given page was edited. |
| Status | Identifies the state of a page:
|
Content Types
Once editors click Create Document in the Headless CMS interface, they'll be able to select a type from a list of Content Types that you, the developer, established.
Sections
For each Content Type, different Sections will be available to compose that page. Sections represent the content structure of a React component, for example, the Alert.
Sections can be reused on different pages of an ecommerce. You are the one who will choose which Sections will be available at the CMS. Check the following example of the Hero Section being used:
