Extending My Account
In this guide, you'll learn how to extend the My Account page in your B2B store by creating new pages or adding new sections to the default pages.
Check if the default My Account pages meet your needs. If not, you can create a new page or add a new section to better fit your requirements. These extensions allow you to customize the My Account experience without changing its default structure.
All My Account routes are private and must include the/pvt/accountprefix. Custom routes are validated to ensure this prefix is included, but you should declare it.
Creating new pages
To create a new page for My Account, follow these steps:
-
Open your FastStore project using the code editor of your choice.
-
Open the
srcfolder. -
Create a folder named
pages. Inside it, create or open a folder namedaccount. -
In the
src/pages/pvt/accountfolder, create a.tsxfile for your new My Account page. For example:
Next, enable this new page as a valid route:
-
Create the
myAccountfolder in thesrcdirectory, or open it if it already exists. -
In the
src/myAccountfolder, create a file namednavigation.ts. -
In the
src/myAccount/navigation.tsfile, import thegetMyAccountRoutesfunction from@faststore/coreand set the new route as follows:
Once you've completed these steps, the new page will appear as an option in the My Account menu.

Adding new sections
To add a new section to a default My Account page, follow these steps:
- Open your FastStore project using the code editor of your choice.
- Open the
src/myAccount/extensions/{pageName}folder, wherepageNameis one of the default My Account pages. Example:src/myAccount/extensions/orders/. - In the
src/myAccount/extensions/{pageName}folder, create two files:before.tsxandafter.tsx. Use thebefore.tsxfile to add a section before the existing content of the default page, and useafter.tsxto add a section after the existing content.
For example, to add a section after the order details page, you can implement the following:
Every default page can havebefore.tsxandafter.tsxextension sections.
Based on the example above, the new section will be placed after the current content on the order details page:
