Creating a Component

In this guide, you'll learn how to create a component from scratch and use it in your FastStore project. For the purpose of this guide, we'll create a Price component to display the price of a product in the Product Details component.

The FastStore Price component displays the price of a given product, discount and total values	The custom Price component created can display any information that you set. In this case it renders the name Price

Step by step

Step 1: Create the Price file

1. Open your FastStore project in a code editor and navigate to src folder.
2. Create a new folder called components inside the src folder.

4. Inside the components folder, create a new file called Price.tsx.
5. Export the following function in the Price.tsx file:

 
export default function Price(props: any) {
  return <div>Price</div>;
}
 

To use the new Price component, you need to override the default Price component by following the next step.

Step 2: Override the default Price component

Now, let's override the component to render it in the Product Details page.

1. Inside the components folder, create a new folder called overrides.
2. In the overrides folder, create a new file called, for example, CustomPrice.tsx.
3. Export the following function in the CustomPrice.tsx file to override the Price component:

import CustomPrice from '../Price'
 
export default {
  name: "ProductDetails",
  components: {
    Price: CustomPrice,
  },
};

4. Save the changes and the new Price component will be rendered in the browser with the content defined in the Price.tsx file (in this case, the text Price).