Customer "My Account" Navigation Menu

• Overview
• Creating the My Account Menu Template
• Removing the Old Account Menu

Overview

Here at Cart.com, we spend countless hours making the building and growing process for your website easy. As part of that process, we have made improvements to the template and theme system for the customer My Account pages. For example, we have updated and improved saved payment methods, previous orders, account details, and more. Previously, if you wanted to change the order, enable or disable a page, you were required to manually update the links on each page. In our new version of Foundation, you have the ability to update the menu in a single place!

Depending on which version of Foundation is currently installed, you may need to manually update your templates to utilize this functionality. Newer versions already have this functionality built in. If you are not sure which theme you have, please send in a support ticket and we will help you determine if an update is needed!

Creating the My Account Menu Template

1. Sign into your Cart.com Storefront and use the left menu navigation to go to the Themes section.
2. In the Active on Current Store section, below the template preview, click on the gear icon and click Clone. Enter a name for your cloned theme, for example, SITENAME - My Account Menu Update. And then click the Clone button in the upper right corner.
3. Once the cloning process is complete, you will see that theme below the Active on Current Store theme section, in the Recently Installed Themes section. Click the Edit button under the cloned theme.
4. Expand the Templates section, click on the LeftAndRightColumns template, then in the top left right corner, click More Actions and then Templates.
5. At the top right corner of the Templates menu, click the New button. Ensure you are creating a new template by clicking the radio button labeled Create New. Add a Layout Name (for example, My Account Template), then add “MyAccountMenu” as the file name.
6. Click the edit icon under Template Type (it should say none selected). This will open the Template Starters menu.
7. In the Template Starters menu, click Account Menu then click the Select button in the upper right corner. You should now see Account Menu (HTML5) in the Template Type.
8. Click Save in the upper right corner of the Template Creation menu. You will now have a template that can be placed in the correct places.
9. Once the template is saved, click on Account Menu in the Theme section. Click on the Widgets section. Then click Add Widget in the top section.
10. In the Theme Widget menu, click Add in the Account Menu widget to add the Account menu widget to the top section.
11. Click Save in the top right corner to save the widget in the Account Menu.

Removing the Old Account Menu

1. In the left theme menu, expand the Pages section, then the Customer Account section.
2. Click on the Customer Address (Billing) template, then select the HTML Editor.
3. Find this line of code: <ac:layoutarea id="Menu">. Click on the line and it should highlight the line in BLUE.
4. Do not click off of that line. Scroll down, you should see another line highlighted in the same blue. The line will say </ac:layoutarea>.
5. Using your cursor, highlight ALL of the code, including the opening layoutarea tags (<ac:layoutarea> and </ac:layoutarea>), and delete the code.
6. If there is an additional <div> container, remove that <div> opening and closing tags as well.
7. These <div>s may have different classes, but they will generally include the div class profMenu.
8. Generally speaking, there should be no code in between <!-- Menu --> and <!-- END Menu -->
9. Save the template by clicking on the Save button in the upper right corner.
10. In the Customer Address (Billing) section, click on Basic Settings. Then select My Account Template. Click Save in the top right corner.
11. Confirm the new menu template works by clicking on the Preview button in the upper right corner and then logging into a customer account.
12. When you have confirmed this change works on the Customer Address (Billing) page, return to the admin and remove the same section of code from the following Customer Account templates:
    • Customer Address (Billing)
    • Customer Address (Shipping)
    • Customer Edit Login
    • Customer Edit Details
    • Customer My Account
    • Order History
    • Order List
    • Order Payment History
    • Order Statement
    • Payment Method
    • Profile Edit
    • Reviews
    • Saved Carts
    • Subscriptions
    • User Company
    • User Company Reports
    • User Management
13. Once you have finished removing all of the menu code from the templates, click on Preview in the upper right corner and log in as a customer. Review all customer account pages to make sure they all work as intended, including any company association or company management pages.
14. Once you have confirmed all pages are working as intended, navigate to the Themes section again.
15. Find the version of your theme you have been modifying in the Recently Installed Themes section. Click on the gear icon, and then click Activate. Follow the prompts to activate the theme immediately. This will activate the theme you have been modifying and it will now be your active theme.
16. We recommend now doing another round of Quality Assurance by logging in as a customer again and confirming the menu is working as intended in the live theme.