Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreCustomizing sections and componentsSection override
Overriding a native component
Now that you know how to override a component's prop, learn how to override a native component to use a custom component.
For example, you may want to replace the current BuyButton component from the ProductDetails section to meet your business needs. Currently, when the BuyButton is clicked, it opens the CartSideBar as its default behavior:
{"base64":"  ","img":{"width":1435,"height":778,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1562201,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/overrides-buy-button-open-cart___a5853a88238fa31610a93e8a1333bb00.gif"}}
For this guide, we will create a custom BuyButton that displays an alert once the user clicks on it.
Using overrides does not significantly impact performance. FastStore's handling of props and design tokens is designed for good performance.

Before you begin

Make sure your @faststore/core package has the 3.0.0 version or above. If you need to update it, refer to this release note.

Instructions

Step 1 - Setting up the component file

  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

Step 2 - Create your custom component

  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
    }

Step 3 - Setting up the custom section

  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

    _10
    import { ProductDetailsSection, getOverriddenSection } from '@faststore/core'
    _10
    _10
    const ProductDetailsWithCustomButton = getOverriddenSection({
    _10
    Section: ProductDetailsSection,
    _10
    components: {
    _10
    BuyButton: { Component: CustomBuyButton },
    _10
    },
    _10
    })
    _10
    _10
    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 { 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.
{"base64":"  ","img":{"width":935,"height":716,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":173470,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/custom-buybutton___85eef62d606c75d7d9a206635979a050.gif"}}

Step 5 - Publishing your changes

If your changes are working locally and you want to publish them in production, follow the steps below:
  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.
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page