Documentation
Feedback
Guides
Storefront Development

Storefront Development
Introducing the Headless CMS
In this guide, you will be presented to 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 Setting up the 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:
ProductCategoryResource
CMScmsSee CMS menu on the top-bar
CMScmsSettings
CMSGraphQLCMS 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 successfully completing the FastStore Onboarding process, the app will be installed in your VTEX account. To access it go to the VTEX Admin and navigate to Storefront > Headless CMS. The CMS provides a list of all web pages created with it, which is initially empty but populates as editors create new pages.
Notice that each page created with the Headless CMS is related to a specific URL and is distinguished by the following properties:
Property nameDescription
NameIdentifies 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 Detail 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 modifiedIndicates the last time a given page was edited.
VersionIdentifies the state of a page, if it's draft or published. Notice that editors can have more than one version of the same page with distinct settings and content.

Content Types

Once editors click on Create New in the Headless CMS interface, they'll be able to select a type from a list of Content Types that you, the developer, established.
{"base64":"  ","img":{"width":1373,"height":582,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":38933,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/cms-content-type___ad51b03aa6be86b12b930a6cdb6b3269.png"}}

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.
{"base64":"  ","img":{"width":1643,"height":788,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":50343,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/cms-sections___ccc8b00d73f222d249a009eb195c8e0c.png"}}
Sections can be reused in 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:
{"base64":"  ","img":{"width":1656,"height":619,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":40073,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/headless-example-hero___7cbbc99654d6607f50c013053b1348ca.png"}}
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page