Overriding Native Section Components

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.

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

1. Choose the native section to be customized from the list of available native sections.

2. 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.

3. Copy and paste the following boilerplate on the file:

const SECTION = 'ProductDetails'
 
const overrides: SectionOverride[SECTION] = { name: SECTION, components: {} }
 
export default overrides

Step 2 - Choosing a component to override

1. Choose a component to override from the list of overridable components for each native section. In this example, we are overriding the Price component.

2. Add an object with the name of the component you wish to override to the components property inside the overrides object.

const SECTION = 'ProductDetails'
 
const overrides: SectionOverride[SECTION] = {
  name: SECTION,
  components: {
    Price: {},
  },
}
 
export default overrides

Step 3 - Overriding or Passing additional props to a component

In this step, you will learn how to enhance the functionality or appearance of a component by overriding or passing additional props to it.

Overrinding the Component

1. Inside the Price object, add a property called Component. This property value should be defined as a React component created by you, that will be used to replace every instance of the Price component inside the ProductDetails section.

import CustomPrice from 'src/components/custom/CustomPrice'
 
const SECTION = 'ProductDetails'
 
const overrides: SectionOverride[SECTION] = {
  name: SECTION,
  components: {
    Price: {
      Component: CustomPrice,
    },
  },
}
 
export default overrides

2. Once you've finished the previous step, you should be able to see your CustomPrice component replacing the native Price component inside every ProductDetails section in your store.

Passing Additional Props to the Component

1. Inside the Price object, add a property called props. In addition to the default props this component receives from the section it is contained, every property defined inside the props object will also be passed to it. If a prop you passed has the same name as an already existing prop being received by the component, yours will override the default definition.

const SECTION = 'ProductDetails'
 
const overrides: SectionOverride[SECTION] = {
  name: SECTION,
  components: {
    Price: {
      props: {
        variation: 'listing',
      },
    },
  },
}
 
export default overrides

2. Once you've finished the previous step, you should be able to see the new behavior present wherever the ProductDetails is present.

Additional resources

Coming Soon