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/account prefix. 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 src folder.
Create a folder named pages. Inside it, create or open a folder named account.
In the src/pages/pvt/account folder, create a .tsx file for your new My Account page. For example:

src/pages/pvt/account/page-test.tsx
_10export default function PageTest() { _10 return ( _10 <div> _10 <h1>Hello team</h1> _10 </div> _10 ); _10}

Next, enable this new page as a valid route:

Create the myAccount folder in the src directory, or open it if it already exists.
In the src/myAccount folder, create a file named navigation.ts.
In the src/myAccount/navigation.ts file, import the getMyAccountRoutes function from @faststore/core and set the new route as follows:

src/myAccount/navigation.ts
_10import { getMyAccountRoutes } from "@faststore/core"; _10 _10export default getMyAccountRoutes({ _10 routes: [ _10 { _10 route: "/pvt/account/page-test", _10 title: "Page test", _10 }, _10 ], _10});

Once you've completed these steps, the new page will appear as an option in the My Account menu.

${"base64":" ","img":{"width":1999,"height":1524,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":149587,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/new-page___e41daa56a05a4783e974a6c7cec08d59.png"}}$

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, where pageName is one of the default My Account pages. Example: src/myAccount/extensions/orders/.
In the src/myAccount/extensions/{pageName} folder, create two files: before.tsx and after.tsx. Use the before.tsx file to add a section before the existing content of the default page, and use after.tsx to add a section after the existing content.

For example, to add a section after the order details page, you can implement the following:

src/myAccount/extensions/orders/[id]/after.tsx


_10function After() {
_10  return <div>After the default sections, this section is shown :)</div>;
_10}
_10
_10export default After;

Every default page can have before.tsx and after.tsx extension sections.

Based on the example above, the new section will be placed after the current content on the order details page:

${"base64":" ","img":{"width":1999,"height":1378,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":226211,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/new-section___1ff45ac89fb0c8629c705bdc6b5deb36.png"}}$