Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreCustomizing sections and components
Creating a new section
In this guide, you will learn how to create a new section for your storefront and make it available in the Headless CMS. This solution is useful when your project requires a section not natively available in FastStore.
For this guide, we will create two sections:
  • Call to Action Gets a specific action from the user.
  • OurStores: Indicates the closest store for the user.
    Sections are page components that wrap up other components, enabling you to create cohesive and functional content for your store. For example, the Hero section is a native section that includes the following components: Hero, HeroImage, and HeroHeader.

Before you begin

1. Integrate the store with the Headless CMS

All sections must be available in the Headless CMS so they can be added and managed on your store's pages. To integrate your FastStore project, please refer to the Headless CMS integration track.

2. Knowledge of how sections and content types work on Headless CMS

During the creation of a new section, you will create files such as sections.json and content-types.json, which follow a structure established for the Headless CMS.

3. Install the FastStore CLI

Make sure to install the FastStore CLI to use its commands locally. Refer to the FastStore CLI guide for more information.

Call to Action

  1. In the FastStore root directory, create a folder named cms.
  2. Inside cms, create the faststore folder.
  3. Within the cms/faststore folder, create sections.json file.
  4. In the sections.json file, add the new section that you want to display in the Headless CMS. The schema below defines how the Headless CMS renders a section:
sections.json

_38
[
_38
{
_38
"name": "CallToAction",
_38
"schema": {
_38
"title": "Call To Action",
_38
"description": "Get your 20% off on the first purchase!",
_38
"type": "object",
_38
"required": [
_38
"title",
_38
"link"
_38
],
_38
"properties": {
_38
"title": {
_38
"title": "Title",
_38
"type": "string"
_38
},
_38
"link": {
_38
"title": "Link Path",
_38
"type": "object",
_38
"required": [
_38
"text",
_38
"url"
_38
],
_38
"properties": {
_38
"text": {
_38
"title": "Text",
_38
"type": "string"
_38
},
_38
"url": {
_38
"title": "URL",
_38
"type": "string"
_38
}
_38
}
_38
}
_38
}
_38
}
_38
}
_38
]

This new section receives a title and a link pointing to a specific location.

Step 2: Creating the new section

To render the CallToAction section you created in the previous step, you need to create this section component.
  1. If you don't already have it, create a folder named components inside the src directory.
  2. Inside the components folder, create a file named CallToAction.tsx and add the following code:
src/components/CallToAction.tsx

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

This section will receive the link and title defined previously in the sections.json file.
  1. Create a file named index.tsx inside the components folder.
The index.tsx file provides an entry point for importing and using the CallToAction component. It acts as a container for all the components within the components folder and allows for easier organization and reusability of code.
Open the index.tsx file and add the following code:
src/components/index.tsx

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

Step 3: Synchronizing the new section with the Headless CMS

  1. In the terminal, run faststore cms-sync. This command will synchronize the new section you created with the CMS.
  2. Go to the VTEX Admin and access Storefront > Headless CMS.
  3. Click on the Page content type.
{"base64":"  ","img":{"width":3824,"height":1360,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":321106,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/create-new-section-cms___51aed56fb1be8d73c2fee14e54151c3d.png"}}
  1. In the Sections tab, click the +, search for the new Call to Action section, and add it to your page.
{"base64":"  ","img":{"width":1898,"height":736,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":928366,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/create-new-section-cms-component___994587c4fa77d99a04fda72524266d4d.gif"}}

OurStore

  1. After creating the files and folders, In the sections.json file, add the new section that you want to display in the Headless CMS. The schema below defines how the Headless CMS renders the OurStores section that we will use in the example:
sections.json

_23
[
_23
{
_23
"name": "OurStores",
_23
"schema": {
_23
"title": "Our Stores",
_23
"description": "Search stores near to the users",
_23
"type": "object",
_23
"required": ["title", "description"],
_23
"properties": {
_23
"title": {
_23
"title": "Title",
_23
"type": "string",
_23
"default": "Explore Nearby Stores"
_23
},
_23
"description": {
_23
"title": "Link Path",
_23
"type": "string",
_23
"default": "Discover the closest store to you and pay us a visit."
_23
}
_23
}
_23
}
_23
}
_23
]

  1. Inside the components folder, create a file named OurStores.tsx and add the following code:
src/components/OurStores.tsx

_45
import React from 'react'
_45
import { Button, Icon, SelectField } from '@faststore/ui'
_45
_45
export interface OurStoresProps {
_45
title: string
_45
description: string
_45
}
_45
_45
export default function OurStores(props: OurStoresProps) {
_45
return (
_45
<section>
_45
<h2>{props.title}</h2>
_45
<p>{props.description}</p>
_45
<div>
_45
<SelectField
_45
id="select-state-store"
_45
label="State:"
_45
options={{
_45
newYork: 'New York',
_45
arizona: 'Arizona',
_45
massachusetts: 'Massachusetts',
_45
hawaii: 'Hawaii',
_45
}}
_45
/>
_45
<SelectField
_45
id="select-city-store"
_45
label="City:"
_45
options={{
_45
newYorkCity: 'New York City',
_45
phoenix: 'Phoenix',
_45
boston: 'Boston',
_45
honolulu: 'Honolulu',
_45
}}
_45
/>
_45
<Button
_45
variant="secondary"
_45
icon={<Icon name="ArrowRight" />}
_45
iconPosition="right"
_45
>
_45
Find Store
_45
</Button>
_45
</div>
_45
</section>
_45
)
_45
}

For this section, we will use the following components from the Faststore UI: Button, Icon and SelectField.
  1. Create a file named index.tsx inside the components folder, and add the following code:
src/components/index.tsx

_10
import OurStores from './OurStores'
_10
_10
export default { OurStores }

  1. Repeat the steps in Step 3: Synchronizing the new section with the Headless CMS, and you should see the new section but without styles as in the example below:
{"base64":"  ","img":{"width":1144,"height":175,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":24240,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/section-structure-without-styles___7be40088d6137bdd63cbb4940c2fa599.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