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 likeHero,HeroImage, andHeroHeader, 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.