Storefront Development

Storefront Development
FastStoreCustomizing sections and components

Section override

Overrides allow you to replace native components within sections with custom ones. This maintains the core functionalities of native components while allowing you to adjust their appearance and behavior to suit the needs of your store.
All component customizations happen within sections. You can create multiple overrides for native sections, creating a new React component representing the overridden section.
Sections are native components that group other components to create specific parts of your store page, such as Hero, which includes components like Hero, HeroImage, and HeroHeader, simplifying the process of building cohesive layouts.

Override options

There are three options to customize your component through overrides:
  • Overriding component props: Change a component's behavior by passing additional props to it in your store code.
  • Overriding a section: Build a new section based on its native equivalent to achieve the desired functionality.
  • Overriding section styles: Customize the look and feel of a section without changing its functionality by overriding its styles.

Available sections for overrides

Check the available sections and their components in the List of native sections guide. Also, check the sections equivalent Headless CMS schemas.
Once you define the section you want to change, you can choose to override only its props or the whole section structure.

__experimental components

Some sections may contain components labeled with __experimental. These components are being migrated to FastStore UI and may present limitations. While they are not yet fully migrated, __experimental components are available for use but not for overriding options.

Headless CMS customization and overrides

Keep in mind that customizations made directly in the VTEX Admin through the Headless CMS take priority over code-based overrides.
Photo of the contributor
+ 1 contributors
Was this helpful?
Suggest edits (Github)
Photo of the contributor
+ 1 contributors
On this page