Boost your store’s capabilities with unlimited custom endpoints, flexible content management, and role-based visibility. Modify the My Account page with custom endpoints and reorder them as you wish to improve customer experience. You can elevate user experience to a new level with the Customize My Account module.
Customize My Account #
This module has 3 different sections: General, Endpoint, and Styles.
1. General #
Click on the General tab.
1.1 Enable Customize My Account?: Switch on this option to enable customizing my account. This is mandatory.
Now, click on the “Save Changes” button to save the update.
2. Endpoints #
Below is a list of all My Account endpoints available for customization. Users can customize these endpoints, including their slugs, icons, and content. Additionally, users can rearrange the order in which they are displayed on the My Account page. They can create custom endpoints or links by clicking the “Add New Endpoint / Link” button at the bottom.
Click on the Endpoint tab.
Here are the default available endpoints. These default items cannot be deleted but can be edited.
- Endpoint – Dashboard
- Endpoint – Orders
- Endpoint – Downloads
- Endpoint – Addresses
- Endpoint – Payment methods
- Endpoint – Account details
- Endpoint – Log out
2.1 Click on “Add New Endpoint / Link” if you want to create a new add point.
2.2 Endpoint- My Custom Endpoint: Options for editing my custom endpoint will appear.
2.3 Show in Navigation Menu: Toggle the switch to show or hide the menu item within the ‘My Account’ navigation menu.
2.4 Endpoint Type: In this section, two options are available—‘Endpoints’ and “Custom Link.” Use ‘Custom Link’ to add any custom link to the menu as needed. ‘Endpoints’ are similar to ‘My Account’ and other predefined endpoints.
- Endpoint Custom URL: This field appears only if the Endpoint Type is set to ‘Custom Link.’ Enter the custom URL here.
- Open in New Tab: This field appears only if the Endpoint Type is set to ‘Custom Link.’ Choose whether the link should open in a new browser tab or window.
2.5 Endpoint Label: Insert the text to display for the menu item.
2.6 Endpoint Slug: The Endpoint Slug functions similarly to a menu item slug. It provides a unique URL for the endpoint.
2.7 Endpoint Icon: Users can choose the icon from the following options: None, Select Icon, Upload Icon
- None: No icon will be displayed.
- Select Icon: Choose an icon from the available set.
- Upload Icon: Upload a custom icon to use for the endpoint.
- Select Endpoint Icon: Select an icon to represent the endpoint visually. This icon will be displayed alongside the menu item.
- Upload Custom Icon: Upload a custom image file to use as the icon for the endpoint. Supported formats include PNG, JPG, and SVG.
2.8 Endpoint Visibility: Choose whether the endpoint should be visible to All Users or Only Users With Specific Roles.Select User Roles: If you select “Only Users with Specific Roles”, you can choose multiple roles from the drop-down.
2.9 Endpoint Content: Define the content or information that you want to display when the endpoint is accessed. This can include text, images, or other media relevant to the endpoint.
Example: Review the content and the menu item.
Now, click on the “Save Changes” button to save the update.
3. Styles #
Select the Style settings tab of Customizing My Account. This setting controls the style of the front-end appearance.
3.1 Font Size: Insert the font size of Menu Items.
3.2 Font Weight: Choose font weight as your preference for Menu Items.
3.3 Icon Size: Select the icon size of Menu Items as your choice.
3.4 Item Text Color: Select the item text color of the navigation menu text.
3.5 Item Background Color: Choose the item background color for the navigation menu text.
3.6 Item Icon Color: Select the icon color of your choice.
3.7 Item Hover Text Color: Select the item hover text color for navigation menu text.
3.8 Item Hover Background Color: Choose the item hover background color for the navigation menu.
3.9 Item Hover Icon Color: Select the icon color of your choice.
3.7 Item Hover Text Color: Select the item hover text color for navigation menu text.
3.8 Item Hover Background Color: Choose the item hover background color for the navigation menu.
3.9 Item Hover Icon Color: Select the icon color of your choice.
3.10 Active Item Text Color: Choose the active item text color for navigation menu text.
3.11 Active Item Background Color: Choose the active item background color for the navigation menu.
3.12 Active Item Icon Color: Select the active item icon color as your choice.
3.13 Item Border Width: Enter the border width of the menu items.
3.14 Item Border Color: Select the navigation menu border color.
3.15 Item Padding: Insert your preferred padding size.
3.16 Left Spacing for Icon: modify left spacing size as your preference.
3.17 Padding for Item with Icon: personalize padding for item with icon.
3.18 Item Margin: Insert item margin as your choice.
Now, click on the “Save Changes” button to save the updates.
Customized My Account Dashboard #
Below, you can see the front end appearance of Customized My Account Dashboard.
