Using overrides does not significantly impact performance. FastStore's handling of props and design tokens is designed for good performance.

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 sections folder. You can run the following command to create them:

   The naming of the sections folder is arbitrary, as overrides can be created in any file, since the import is made in the src/components/index.tsx file.

   macOS and Linux

   Windows

   bash copy mkdir src/components src/components/sections

1. Inside the components folder, create a file named CustomBuyButton.tsx.
   macOS and Linux

   Windows

   
   

   _10

   touch src/components/CustomBuyButton.tsx

   
   

   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:
   CustomBuyButton.tsx

   
   

   _15

   import React from "react";

   _15

   import { Button as UIButton } from "@faststore/ui";

   _15

   _15

   export function CustomBuyButton() {

   _15

   return (

   _15

   <UIButton

   _15

   variant="primary"

   _15

   onClick={() => {

   _15

   alert("Hello User!");

   _15

   }}

   _15

   >

   _15

   New Buy Button

   _15

   </UIButton>

   _15

   );

   _15

   }

   
   

1. In the sections folder, create a new file for your customized section. For example, create a new file named ProductDetailsWithCustomButton.tsx under the src/components/sections directory.
2. Open the ProductDetailsWithCustomButton.tsx file and update it with the following code:
   ProductDetailsWithCustomButton.tsx

   
   

   _14

   import {

   _14

   ProductDetailsSection,

   _14

   getOverriddenSection,

   _14

   } from "@faststore/core";

   _14

   import { CustomBuyButton } from "./CustomBuyButton";

   _14

   _14

   const ProductDetailsWithCustomButton = getOverriddenSection({

   _14

   Section: ProductDetailsSection,

   _14

   components: {

   _14

   BuyButton: { Component: CustomBuyButton },

   _14

   },

   _14

   });

   _14

   _14

   export default ProductDetailsWithCustomButton;

   
   

Step 4 - 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. In the components folder, if you don't have already the index.tsx file, create the file and add the following:
   components/index.tsx

   
   

   _10

   import ProductDetailsWithCustomButton from "./sections/ProductDetailsWithCustomButton";

   _10

   _10

   export default { ProductDetails: ProductDetailsWithCustomButton }

   
   
3. Open the terminal, and run yarn dev to sync the new custom component to your store preview.
4. Open the localhost available after running yarn dev.
5. Open a PDP and click New BuyButton. An alert with Hello user message will appear.

1. Publish your branch with the custom components files.
2. Open a pull request in the store's GitHub repository.
3. Review the pull request
4. Merge the changes from this branch to the main one and the new component will be available in the live store.