{"title":"How to add a custom page to the account page menu","slug":"how-to-add-a-custom-page-to-the-account-page-menu","url":"https://support.storeconnect.com/articles/how-to-add-a-custom-page-to-the-account-page-menu","url_markdown":"https://support.storeconnect.com/articles/how-to-add-a-custom-page-to-the-account-page-menu.md","subtitle":null,"summary":"Add a custom page like Courses to the account navigation by modifying Liquid templates for the account menu, header dropdown, and page routing.","type":"Help_Documentation","video_url":"","keywords":"account page menu, custom page, account navigation, liquid templates, theme customization, account menu, header dropdown, customer portal, courses page, snippets, account section routing","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"Adding custom pages to the account page menu enhances user navigation by providing quick access to personalized content or custom features. Leveraging Liquid templates you can add a new menu item into the account page navigation without requiring CSS styling or JavaScript. By updating the relevant Liquid files, you can create and link to your custom page.\n\nWe are going to show you how to add a link to a Courses page where you could then add a list of all courses the customer has purchased and show status or grade for each.\n\n![Custom Courses page added to the account navigation menu](https://res.cloudinary.com/hzkr6fi81/image/upload/v1763435160/knowledge/How_to_add_a_Custom_Page_to_the_Account_Page_Menu_cs2jdz.png)\n\n## Modify your theme\n\nWe are going to modify these existing templates:\n\n-   pages/account\n-   snippets/account/menu\n-   snippets/header/dropdown/account\n\nWe are going to Add these new templates:\n\n-   snippets/account/courses\n-   snippets/courses/index\n\n### Step 1: override the account page template\n\nCreate a new record for each of the following templates (if they don’t already exist) in your theme, then paste the provided code from this guide into the corresponding templates.\n\n**Template Key: pages/account**\n\nAdd the following code after the orders when case:\n\n\n```liquid\n\n{%- when \"courses\" %}\n{% render \"account/courses\" %}\n```\n\n\nExample:\n\n\n```liquid\n\n{%- layout \"account\" %}\n\n{%- assign section = current_request.params.section %}\n{%- assign identifier = current_request.params.identifier %}\n\n{%- case section %}\n{%- when \"orders\" %}\n  {% render \"account/orders\", identifier: identifier %}\n{%- when \"courses\" %}\n  {% render \"account/courses\" %}\n{%- when \"subscriptions\" %}\n  {% render \"account/subscriptions\", identifier: identifier %}\n{%- when \"account_credits\" %}\n  {%- if current_customer.can_use_account_credit? %}\n    {% render \"account/account_credits\", identifier: identifier %}\n  {%- else %}\n    {% render \"account/not_authorised\" %}\n  {%- endif %}\n{%- when \"account_points\" %}\n  {%- if current_customer.can_use_account_points? %}\n    {% render \"account/account_points\", identifier: identifier %}\n  {%- else %}\n    {% render \"account/not_authorised\" %}\n  {%- endif %}\n{%- when \"product_approvals\" %}\n  {% render \"account/product_approvals\", identifier: identifier %}\n{%- when \"credentials\" %}\n  {% render \"account/credentials\" %}\n{%- when \"contact\" %}\n  {% render \"account/contact\" %}\n{%- when \"shipping\" %}\n  {% render \"account/shipping\" %}\n{%- when \"billing\" %}\n  {% render \"account/billing\" %}\n{%- else %}\n  {% render \"account/profile\" %}\n{%- endcase %}\n```\n\n\n**What this code is doing:**\n\n-   Reads the section and identifier from current\\_request.params.\n\n-   Uses a case block to decide which account partial to render based on the current section.\n-   When the section is \"courses\", it renders the new account/courses snippet.\n-   This allows /account/courses to load your courses page within the main account layout.\n\nYou can further customize this case block with your own Liquid logic if you need more sections or conditions.\n\n### Step 2: override the account menu template\n\nModify this template to add a new list item to the side menu. Update the existing base template, which is part of the default theme.\n\n**Template Key: snippets/account/menu**\n\nAdd the following code after the orders tag, specifying the relative URL in the href attribute and the title \"Courses\" between the tags. Include the parent object template \"courses\" in the params.section request as shown:\n\n  `[Courses](/account/courses)`\n\nExample:\n\n\n```liquid\n\n{%- if current_customer != blank %}\n\n\n\n        {{ \"accounts.menu.profile\" | t }}\n\n\n        {{ \"accounts.menu.contact\" | t }}\n\n\n        {{ \"accounts.menu.credentials\" | t }}\n\n\n        {{ \"accounts.menu.shipping\" | t }}\n\n\n        {{ \"accounts.menu.billing\" | t }}\n\n\n        {{ \"accounts.menu.orders\" | t }}\n\n\n        Courses\n\n\n        {{ \"accounts.menu.subscriptions\" | t }}\n\n      {%- if current_account.account_credits.size \u003e 0 and current_customer.can_use_account_credit? %}\n\n          {{ \"accounts.menu.account_credits\" | t }}\n\n      {%- endif %}\n      {%- if current_store.display_points? and current_customer.can_use_account_points? %}\n\n          {{ \"accounts.menu.account_points\" | t }}\n\n      {%- endif %}\n      {%- if current_account.product_approvals.size \u003e 0 %}\n\n            {{ \"accounts.menu.product_approvals\" | t }}\n\n      {%- endif %}\n\n        {{ \"accounts.menu.log_out\" | t }}\n\n\n\n      {%- render \"icons/chevron\", width: 12 %}\n\n\n{%- endif %}\n```\n\n\n**What this code is doing:**\n\n-   Builds the left-hand account navigation for logged-in customers.\n\n-   Adds a new Courses menu item that links to /account/courses.\n-   Uses current\\_request.params.section == \"courses\" to add the is-current class when the Courses section is active, so the tab appears selected.\n-   The rest of the menu continues to work as before (profile, contact, orders, etc.).\n\nYou can update the label “Courses” or wrap it in translations if you need multi-language support.\n\n### Step 3: add the page on header dropdown menu\n\nAdd to account menu, show all items on hover.\n\n```text\n\n\n    Courses\n```\n\n**Key: snippets/header/dropdown/menu**\n\n\n```liquid\n\n  {%- if current_customer != blank %}\n    {%- require \"scripts/nav.js\" -%}\n\n\n      {{ \"header.dropdowns.account.heading\" | t }}\n\n\n\n      {%- if current_customer.account != blank and current_customer.account.name != blank and current_customer.account.name != current_customer.name %}\n        {{ current_customer.account.name }}\n      {%- endif %}\n\n\n          {{ \"header.dropdowns.account.profile\" | t }}\n\n\n\n\n          {{ \"header.dropdowns.account.orders\" | t }}\n\n\n\n\n          Courses\n\n\n\n\n          {{ \"header.dropdowns.account.subscriptions\" | t }}\n\n\n      {%- if current_account.account_credits.size \u003e 0 and current_customer.can_use_account_credit? %}\n\n\n            {{ \"header.dropdowns.account.account_credits\" | t }}\n\n\n      {%- endif %}\n      {%- if current_store.display_points? and current_customer.can_use_account_points? %}\n\n\n            {{ \"header.dropdowns.account.account_points\" | t }}\n\n\n      {%- endif %}\n      {%- if current_account.product_approvals.size \u003e 0 %}\n\n\n            {{ \"header.dropdowns.account.product_approvals\" | t }}\n\n\n      {%- endif %}\n\n\n          {{ \"header.dropdowns.account.logout\" | t }}\n\n\n\n  {%- else %}\n\n      {{ \"header.dropdowns.account.login\" | t }}\n\n  {%- endif %}\n```\n\n\n**What this code is doing:**\n\n-   Adds a Courses entry to the account dropdown in the header for logged-in users.\n\n-   Keeps the existing profile, orders, subscriptions, credits, points, and approvals links unchanged.\n-   Routes the user directly to /account/courses when they select Courses from the dropdown.\n\nYou can reorder or group this menu item with others if you want a different hierarchy.\n\n### Step 4: add a new template for the account menu\n\n**Key: snippets/account/courses**\n\n\n```liquid\n\n{%- default identifier: blank %}\n\n{%- if identifier != blank %}\n  {% render \"courses/show\", order: current_customer.courses[identifier] %}\n{%- else %}\n  {% render \"courses/index\" %}\n{%- endif %}\n```\n\n\nWhat this code is doing:\n\n-   Defines a new snippet responsible for rendering the Courses section inside the account layout.\n\n-   Accepts an optional identifier parameter (defaults to blank).\n-   If identifier is present, it renders a single course view via courses/show, passing the selected course from current\\_customer.courses\\[identifier\\].\n-   If identifier is blank, it renders the courses index via courses/index (a list or overview of courses).\n\n### Step 5: add a new template for the index\n\n**Key: snippets/courses/index**\n\n\n```liquid\n\n{%- if current_customer != blank %}\n  {%- new Map courses_json = current_customer.data['Course_History_Data__c'] | unescape -%}\n\n  {%- render \"shared/page_header\", heading: \"Courses\" %}\n  {%- if current_customer.data['Course_History_Data__c'].size \u003e 0 %}\n\n      {%- for course_history in courses_json %}\n\n      {%- endfor %}\n\n\n        Name\n        Result\n        Letter Grade\n        Numeric Grade\n        Completed\n\n          {{ course_history['name'] }}\n          {{ course_history['result_status'] }}\n          {{ course_history['letter_grade'] }}\n          {{ course_history['numeric_grade'] }}\n          {{ course_history['completed'] }}\n\n  {%- else %}\n  No Course History\n  {%- endif %}\n\n{%- endif %}\n```\n\n\n**What this code is doing:**\nThis code displays the Courses page header and shows the customer’s course history in a table format. It reads the course data from the customer record, converts it from JSON, and outputs each course with its name, result, grades, and completion status. You can replace or extend this layout with your own Liquid to show additional details or customize the design as needed.\n\nYou can add your own Liquid inside this template to display whatever additional content you need, such as extra course fields, custom formatting, conditional messages, or completely customized layouts. This section is fully flexible, allowing you to tailor the Courses page to your exact requirements.\n\n**Result:**\n\n  **![Custom Courses page added to the account navigation menu](https://res.cloudinary.com/hzkr6fi81/image/upload/v1763435160/knowledge/How_to_add_a_Custom_Page_to_the_Account_Page_Menu_cs2jdz.png)**\n\n**Localization Support**: If your store supports multiple languages, ensure that the \"Courses\" menu label in snippets/account/menu is translatable by replacing the static text with a translation key, such as missing translation: `accounts.menu.courses` for locale: `en`, and adding the corresponding translation to your locale files."}