Building and Customizing sections
This documentation is currently under development.
FastStore offers the ability to extend and customize your store components in three ways:
Content customization with Headless CMS
Change the behavior of specific components by changing their props in the Headless CMS. In the VTEX Admin, go to Storefront > Headless CMS and select the section where the desired component is located. From there, you can customize the component by modifying its props. Find the available props in each native section for customization in the Headless CMS in list of available native sections.
The props changed via Headless CMS overlap the changes made through override. For example, if you change a prop through override and also change it using Headless CMS, the final prop's value will be the one added using CMS.
Theming customization
Change the store theme and component styling using theming and design tokens. For detailed instructions on customizing through these methods, refer to the Store Theme and Styling a Component documentation.
Components and sections customization
You have the following customization options for components and sections:
- Override native component's props: Modify the behavior of a specific component by passing additional props to it in your store code.
- Override a native component: Create a new component and override its native equivalent to achieve the desired functionality.
- Create a new section: If the available FastStore native sections do not meet your business requirements, you can create a new section and make it available in the Headless CMS.
Consider using overrides when FastStore design tokens (theming tools) (opens in a new tab) or Headless CMS props alone cannot achieve the customization you need. Overrides are suitable for making changes in component behavior or replacing components entirely.
Best practices for overrides
- Working with an experimental feature
Keep in mind that this is an experimental feature and may undergo updates that could render your current overrides as legacy code without ongoing support. To keep up with every change, check the release notes (opens in a new tab) for any updates.
- Considering the impact in the store performance
Using overrides does not significantly impact performance. FastStore's handling of props and design tokens is designed for good performance. However, your customizations may introduce additional work, so consider overall store performance by checking Lighthouse reports on GitHub logs and Pull Requests.
- Styling custom components
When styling custom components created for overrides, follow the guidelines provided in Customizing a new component when using override (opens in a new tab). These guidelines will help you maintain consistency and ensure your custom components integrate seamlessly with the rest of the FastStore ecosystem.
- Organizing files and folders
For effective organization, follow the steps in the Setting up the overrides folder (opens in a new tab) section. This will help you organize, create, and name the overrides and ensure they are properly integrated into your project.