Extending My Account

In this guide, you'll learn how to extend the My Account page 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 the default structure.

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 and, within it, create another folder named account, or open it if it already exists.
In the src/pages/account folder, create a .tsx file for your new My Account page. Take the following example:

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

Next, you must 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 in the following example:

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

Once you finish 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 insert a section after the existing content.

For example, to add a section after the order details page, you would 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 given, 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"}}$