Menu
Guides
API Reference
App Development
Storefront Development
VTEX IO Apps
Troubleshooting
Release Notes
Storefront Development
Getting started with storefront solutions
FastStore
Store Framework
CMS Portal (Legacy)
Storefront best practices

Setting up the Headless CMS (legacy)

Set up and sync Headless CMS (legacy) files so you can add custom Sections to FastStore's native Content Types.

3 min read
Set up the CMS folder so editors can manage native FastStore pages and custom Sections in the VTEX Admin.
FastStore v2 and v3 don't support custom Content Types. Use the Content Types provided by @faststore/core. For informational or other custom pages, use the native Landing Page Content Type.

What you'll accomplish

By the end of this guide, you will have:
  • Created the CMS folder structure in your project
  • Created a file for custom Section definitions
  • Synced the native Content Types and your Section definitions with Headless CMS (legacy)
  • Verified the native Content Types in the Headless CMS interface

Before you begin

This guide assumes you are starting without CMS-related files. If your project already includes cms/faststore/sections.json, use the existing file instead of replacing it.

Instructions

Step 1: Creating the CMS folder

  1. Open the terminal and change to the root directory of your FastStore project.
  2. Create a new folder named cms at the root of your FastStore project and a subfolder named faststore inside the cms folder. Run the following command to create them:
macOS and Linux
Windows

_10
mkdir -p cms/faststore

  1. Create sections.json inside cms/faststore:
macOS and Linux
Windows

_10
echo "[]" > cms/faststore/sections.json

The sections.json file contains the content schemas for custom frontend Sections that editors can add to compatible native Content Types.
  1. Run yarn dev to enable the FastStore CLI watch mode. The CLI monitors your project and merges your custom Sections with the default CMS definitions from @faststore/core.

Step 2: Syncing the CMS definitions

  1. Open another terminal and log in to your VTEX account.
  2. Create or select a development workspace:

_10
vtex use {workspace}

Use a development workspace to test your Section definitions before syncing them with the VTEX master workspace.
  1. Change to the root directory of your FastStore project.
  2. Sync the CMS definitions with the Headless CMS (legacy) app:

_10
yarn cms-sync

The command syncs the native Content Types from @faststore/core and the custom Sections in your project. Once the synchronization finishes, the terminal displays CMS synced successfully....
If you have @vtex/cli-plugin-cms@1.0.7 installed, you can use the {builderName} argument to synchronize a specific builder: vtex cms:sync {builderName}.

Step 3: Checking the native Content Types

  1. Access the VTEX Admin using the workspace you created in Step 2 - Syncing the CMS definitions by navigating to the following path: https://{workspace}--{account}.myvtex.com/admin. Make sure to replace {workspace} with the designated workspace name and {account} with your VTEX account.
  2. Go to Storefront > Headless CMS.
  3. Click Create document.
The menu displays FastStore's native Content Types, such as Landing Page, Product Page, and Product List Page. Custom Sections become available after you define them with scopes that match these Content Types.

Next step

Learn how to structure Sections for native Content Types.