Overriding Native Section Components

⚠️

This documentation is currently under development.

Native sections are made up of different components that can be customized or overridden to improve their functionality or appearance in the storefront. For example, you might want to change the behavior of a Price component to meet your business needs. In this guide, you'll learn how to customize native section components by overriding them or adding extra props.

⚠️

By overriding a component, you lose all the integration developed on @faststore/core for that component. We strongly recommend that you pass additional props and use our theming tools to achieve the desired behavior without compromising the existing integration implemented in @faststore/core. You can find the available props for each component on the Components UI (opens in a new tab).

ℹ️

The @faststore/core package provides default native sections.

Before you start

Before you begin, make sure you have a functioning Evergreen store.

Also, take in to consideration the following:

This feature is experimental: The feature may not function as expected.
Some sections contain multiple instances of the same component: When overriding a component or passing additional props to it, consider that all instances will be affected by this.

Step by step

Step 1 - Choosing a Native Section

Choose the native section to be customized from the list of available native sections.
In your store repository, navigate to src/components/overrides and create a new file named after the native section. For example, if you chose the ProductDetails section for customization, create a new file named ProductDetails.tsx under the src/components/overrides directory.
Copy and paste the following boilerplate on the file:

import { SectionOverride } from '@faststore/core/src/typings/overrides'
 
const SECTION = 'ProductDetails'
 
const overrides: SectionOverride[SECTION] = { name: SECTION, components: {} }
 
export default overrides

⚠️

Change the value of the SECTION variable to the name of the section you want to override. In this case, we used the ProductDetails example.

Step 2 - Choosing a component to override

Choose a component to override from the list of overridable components for each native section. In this example, we are overriding the Price component.
Add an object with the name of the component you wish to override to the components property inside the overrides object.

import { SectionOverride } from '@faststore/core/src/typings/overrides'
 
const SECTION = 'ProductDetails'
 
const overrides: SectionOverride[SECTION] = {
  name: SECTION,
  components: {
    Price: {},
  },
}
 
export default overrides

Creating a Component List of available native sections