diff --git a/apps/site/pages/docs/building-sections/overrides/override-component.mdx b/apps/site/pages/docs/building-sections/overrides/override-component.mdx
index 045f45cf96..5395a9777e 100644
--- a/apps/site/pages/docs/building-sections/overrides/override-component.mdx
+++ b/apps/site/pages/docs/building-sections/overrides/override-component.mdx
@@ -4,27 +4,31 @@ import {Tab, Tabs} from 'nextra-theme-docs'
# Overriding a native component
-Overriding a section's component allows you to customize a component's behavior from scratch.
+Now that you know how to [override a component's prop](LINK), learn how to override a native component to use a custom component.
-> ⚠️ 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.
+For example, you may want to replace the current `BuyButton` component from the `ProductDetails` section to meet your business needs.
+
+Currently, when the [`BuyButton`](https://developers.vtex.com/docs/guides/faststore/molecules-buy-button) is clicked, it opens the `CartSideBar` as its default behavior:
+
+
-For this guide, we'll use the [Buy Button](https://developers.vtex.com/docs/guides/faststore/molecules-buy-button) component to make the customization.
+For this guide we will create a custom Buy Button that once you click on it, it displays an `alert` for the customer.
+
+> ⚠️ 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.
---
## Before you begin
-1. Make sure your `@faststore/core` package has the 3.x version or above. If you need to update
+Make sure your `@faststore/core` package has the 3.x version or above. If you need to update
it, refer to this [release note](https://github.com/vtex/faststore/releases/tag/v3.0.0).
-2. 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.
-
---
## Step by step
### Step 1 - Setting up the component file
-1. After choosing a native section to be customized from the [list of available native sections](/tbd), open your FastStore project in any code editor of your preference.
+1. After choosing a native section to be customized from the [list of available native sections](https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-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.
@@ -34,33 +38,27 @@ it, refer to this [release note](https://github.com/vtex/faststore/releases/tag/
```bash copy mkdir src\components src\components\sections ```
-3. In the `sections` folder, create a new file for your customized section. For example, create a new file named `CustomBuyButton.tsx` under the `src/components/sections` directory.
+3. 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.
-4. Copy and paste the following code snippet into the file:
+4. Open the `ProductDetailsWithCustomButton.tsx` file and update it with the following code:
-```tsx filename="CustomBuyButton.tsx"
-// src/components/CustomBuyButton.tsx
-import React from 'react';
-import { BuyButton } from '@faststore/ui'
-
-const CustomBuyButton: React.FC<{ onClick: () => void }> = ({ onClick }) => {
- const handleClick = () => {
- // Add your custom logic here, e.g., displaying a warning message
- alert('Warning: This action is not available.');
- };
-
- return (
-
- );
-};
-
-export default CustomBuyButton;
+```tsx filename="ProductDetailsWithCustomButton.tsx" {8-9}
+import { ProductDetailsSection, getOverriddenSection } from '@faststore/core'
+const ProductDetailsWithCustomButton = getOverriddenSection({
+ Section: ProductDetailsSection,
+ components: {
+ BuyButton: { Component: CustomBuyButton },
+ },
+})
```
-The code above this code creates a custom buy button component that when clicked, the custom buy button displays an alert with a custom message.
+#### Step 2 - Overriding the component
-5. In the `components` folder, if you don't have already the `index.tsx` file, create the it file and add the following:
+1. Choose a component to override from the [list of overridable components of each native section](https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections).
+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:
```tsx filename="components/index.tsx" copy
import CustomBuyButton from "./sections/CustomBuyButton";
@@ -84,7 +82,7 @@ To integrate the section into the [Headless CMS](https://developers.vtex.com/doc
```json filename="sections.json" copy
[
{
- "name": "CustomBuyButton",
+ "name": "ProductDetailsWithCustomButton.tsx",
"requiredScopes": ["pdp"],
"schema": {
"title": "Custom Buy Button",
@@ -224,7 +222,7 @@ yarn cms-sync
10. Click `Save`.
-> ⚠️ Remember: props changed via Headless CMS overlap the changes made through [overrides](/tbs).
+> ⚠️ Remember: props changed via Headless CMS overlap the changes made through [overrides](LINK).
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.
@@ -233,9 +231,7 @@ yarn cms-sync
To see your changes locally you need to set the Headless CMS preview to the development mode.
Refer to the [How to preview Headless CMS changes in development mode](/docs/how-to-preview-headless-cms-changes-in-development-mode) guide for more information.
-Once you have set the preview for development mode, you should see your new Buy Button in a Product Details Page (PDP):
-
-
+Once you have set the preview for development mode, you should see your new Buy Button in a Product Details Page (PDP).
### Step 5 - Publishing your changes