This guide is for stores using Section overrides v1. For instructions on how to use Section overrides v2, refer to the Section overrides v2

We highly recommend considering overriding props or utilizing the theming tools provided by @faststore/core to achieve the desired behavior. Overriding a component inside a section will compromise the existing integration developed in @faststore/core by losing updates for that component.

Step 1 - Setting up the overrides folder

1. After choosing a native section to be customized from the list of available native sections, open your FastStore project in any code editor of your preference.
2. Go to the src folder, create the components folder and inside it, create the overrides folder. You can run the following command to create them:

3. Inside the overrides folder, create a new file named after the chosen 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.

4. Copy and paste the following code snippet into the file:

Change the value of the SECTION variable to the name of the section you want to override. In the given example, we set the SECTION variable to ProductDetails to override this specific section.

5. Save your changes.

Step 2 - Setting up the override

1. Open the ProductDetails.tsx file created in the Setting up the overrides folder step and add the following code:

2. Run yarn dev in the terminal to start the development server. Access the provided localhost URL in your browser and go to the product details page to see the updated BuyButton component:

Remember: 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.

Step 1 - Create your custom component

1. Inside the components folder, create a file named CustomBuyButton.tsx. If you haven't created the components folder yet, see the Setting up the overrides folder step.

When creating a custom component, it's important to choose a name that distinguishes it from the native component. For example, Custom{ComponentName} = CustomBuyButton.

2. Add the following code into CustomBuyButton.tsx file:

Step 2 - Overriding the component

1. Choose a component to override from the list of overridable components of each native section. In this example, we are overriding the BuyButton component in the ProductDetails section.
2. Navigate to src/components/overrides that we've created before.
3. Open the ProductDetails.tsx file and update it with the following code:

4. Run yarn dev in the terminal to start the development server. Access the provided localhost URL in your browser. Navigate to the product details page, you should see the CustomBuyButton component in place of the previous BuyButton component.

1. After Setting up the overrides folder, inside the components folder, create the CustomProductTitle.tsx file.
2. Add the following to the file:

3. In the overrides folder, create the ProductDetails.tsx file.
4. Add the following code to the ProductDetails.tsx file to render the new CustomProductTitle component.

4. Run yarn dev in the terminal to start the development server and access the provided localhost URL in your browser.

Note that this will only work if your custom component's props are compatible with the overriding component. We encourage using FastStore UI components to leverage existing features, basic styles, and better props compatibility.