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

Creating a new section in the CMS

4 min read
This guide applies only to stores using the CMS with FastStore versions 3 or 4. For stores using Headless CMS (legacy), refer to Creating a new section (Headless CMS legacy).
When your store requires a layout or behavior not natively available, you can create a new section component tailored to your brand or business rules. A section component gives you full control over the structure and content while integrating with the CMS.
In this guide, you'll learn how to create a new CallToAction section in your FastStore project.
{"base64":" ","img":{"width":1183,"height":625,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":30745,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/call-to-cation___e74ef106c68c9e8d1e99edb2e9840d7b.png"}}
A section is a type of component that contains other components and acts as a dynamic container in page layouts. For more details, see Understanding components and sections.

Before you begin

  • The CMS must be installed and enabled in your VTEX account. The CMS provides the Admin interface to configure and publish the CallToAction section you build in this guide.
  • The Content plugin must be installed on your machine.

Instructions

Step 1 - Create the component

  1. Open your store project in a code editor.
  2. In the src/components folder, create the CallToAction.tsx file.
  3. Add the following code to CallToAction.tsx:

    _20
    import React from 'react'
    _20
    _20
    export interface CallToActionProps {
    _20
    title: string
    _20
    link: {
    _20
    text: string
    _20
    url: string
    _20
    }
    _20
    }
    _20
    _20
    export default function CallToAction(props: CallToActionProps) {
    _20
    return (
    _20
    <section>
    _20
    <h2>{props.title}</h2>
    _20
    <a href={props.link.url}>{props.link.text}</a>
    _20
    </section>
    _20
    )
    _20
    }
    _20
    _20
    CallToAction.$componentKey = 'CallToAction'

  4. Export the CallToAction component in src/components/index.tsx:

    _10
    import CallToAction from './CallToAction'
    _10
    _10
    export default {
    _10
    CallToAction,
    _10
    }

  5. In cms/faststore/components, create the cms_component__CallToAction.jsonc file.
  6. Add the following schema to cms_component__CallToAction.jsonc:

    _30
    {
    _30
    "$extends": ["#/$defs/base-component"],
    _30
    "$componentKey": "CallToAction",
    _30
    "$componentTitle": "Call To Action",
    _30
    "title": "Call To Action",
    _30
    "description": "Get your 20% off on the first purchase!",
    _30
    "type": "object",
    _30
    "required": ["title", "link"],
    _30
    "properties": {
    _30
    "title": {
    _30
    "title": "Title",
    _30
    "type": "string"
    _30
    },
    _30
    "link": {
    _30
    "title": "Link Path",
    _30
    "type": "object",
    _30
    "required": ["text", "url"],
    _30
    "properties": {
    _30
    "text": {
    _30
    "title": "Text",
    _30
    "type": "string"
    _30
    },
    _30
    "url": {
    _30
    "title": "URL",
    _30
    "type": "string"
    _30
    }
    _30
    }
    _30
    }
    _30
    }
    _30
    }

Step 2 - Verify the component locally

Before syncing your changes with the CMS, run the storefront locally to confirm your new component compiles without errors. This catches typos, missing imports, and invalid schemas before you sync with the CMS.
  1. In the project root, start the FastStore development server:

    _10
    yarn dev

  2. Open the development server in your browser and check the terminal output for compilation errors related to CallToAction.
The section won't render visually yet because it hasn't been added to any page in the CMS. This is done in Step 4. At this point, you're only verifying that the development server starts and that your component code, schema, and registration are valid.
If the development server starts successfully and reports no compilation errors, you're ready to sync your changes with the CMS.

Step 3 - Sync the changes with the CMS

Before syncing, make sure you're logged in to your VTEX account by running vtex login {accountName} in the terminal. Replace {accountName} with your store account, for example, vtex login mystore.
From the root of your FastStore project, run:

_10
vtex faststore cms-sync

This command detects your store's content source, generates the schema from the cms/faststore/components and cms/faststore/pages folders, and uploads it to the CMS, prompting you to confirm the store ID and the schema version before publishing.
This command is available from FastStore v4.4.0. Stores on earlier versions must upgrade first. See Local setup and development for details on the version prompt and best practices for choosing a version number.

Sync manually

If you prefer to run each step separately, for example, to preview the generated schema before uploading or automate the upload in a CI/CD pipeline, use the individual Content plugin commands instead:
  1. Generate the schema:

    _10
    vtex content generate-schema cms/faststore/components cms/faststore/pages -o cms/faststore/schema.json

  2. Open schema.json and check whether the section was added to the section list. It should look similar to this:

    _10
    {
    _10
    "$ref": "#/components/CallToAction"
    _10
    }

  3. Upload the schema:

    _10
    vtex content upload-schema cms/faststore/schema.json

Step 4 - Add the component to the CMS

  1. In the Admin, go to Storefront > Content, and open an entry, such as Home, to check whether the component was added.
    {"base64":" ","img":{"width":1999,"height":766,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":95574,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/call-to-cation-admin___39afe92cbcd5c59606b7fa1db4ceb492.png"}}
  2. Add the component and complete its fields.
  3. Click Save.
  4. With the FastStore development server still running from Step 2, refresh the page to preview the CallToAction section rendered with the values you configured.