How to add a custom page to the account page menu

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.

We 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.

Modify your theme

We are going to modify these existing templates:

• pages/account
• snippets/account/menu
• snippets/header/dropdown/account

We are going to Add these new templates:

• snippets/account/courses
• snippets/courses/index

Step 1: override the account page template

Create 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.

Template Key: pages/account

Add the following code after the orders when case:

{%- when "courses" %}
{% render "account/courses" %}

Example:

{%- layout "account" %}

{%- assign section = current_request.params.section %}
{%- assign identifier = current_request.params.identifier %}

{%- case section %}
{%- when "orders" %}
  {% render "account/orders", identifier: identifier %}
{%- when "courses" %}
  {% render "account/courses" %}
{%- when "subscriptions" %}
  {% render "account/subscriptions", identifier: identifier %}
{%- when "account_credits" %}
  {%- if current_customer.can_use_account_credit? %}
    {% render "account/account_credits", identifier: identifier %}
  {%- else %}
    {% render "account/not_authorised" %}
  {%- endif %}
{%- when "account_points" %}
  {%- if current_customer.can_use_account_points? %}
    {% render "account/account_points", identifier: identifier %}
  {%- else %}
    {% render "account/not_authorised" %}
  {%- endif %}
{%- when "product_approvals" %}
  {% render "account/product_approvals", identifier: identifier %}
{%- when "credentials" %}
  {% render "account/credentials" %}
{%- when "contact" %}
  {% render "account/contact" %}
{%- when "shipping" %}
  {% render "account/shipping" %}
{%- when "billing" %}
  {% render "account/billing" %}
{%- else %}
  {% render "account/profile" %}
{%- endcase %}

What this code is doing:

• Reads the section and identifier from current_request.params.

• Uses a case block to decide which account partial to render based on the current section.

• When the section is "courses", it renders the new account/courses snippet.

• This allows /account/courses to load your courses page within the main account layout.

You can further customize this case block with your own Liquid logic if you need more sections or conditions.

Step 2: override the account menu template

Modify this template to add a new list item to the side menu. Update the existing base template, which is part of the default theme.

Template Key: snippets/account/menu

Add 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:

[Courses](/account/courses)

Example:

{%- if current_customer != blank %}



        {{ "accounts.menu.profile" | t }}


        {{ "accounts.menu.contact" | t }}


        {{ "accounts.menu.credentials" | t }}


        {{ "accounts.menu.shipping" | t }}


        {{ "accounts.menu.billing" | t }}


        {{ "accounts.menu.orders" | t }}


        Courses


        {{ "accounts.menu.subscriptions" | t }}

      {%- if current_account.account_credits.size > 0 and current_customer.can_use_account_credit? %}

          {{ "accounts.menu.account_credits" | t }}

      {%- endif %}
      {%- if current_store.display_points? and current_customer.can_use_account_points? %}

          {{ "accounts.menu.account_points" | t }}

      {%- endif %}
      {%- if current_account.product_approvals.size > 0 %}

            {{ "accounts.menu.product_approvals" | t }}

      {%- endif %}

        {{ "accounts.menu.log_out" | t }}



      {%- render "icons/chevron", width: 12 %}


{%- endif %}

What this code is doing:

• Builds the left-hand account navigation for logged-in customers.

• Adds a new Courses menu item that links to /account/courses.

• Uses current_request.params.section == "courses" to add the is-current class when the Courses section is active, so the tab appears selected.

• The rest of the menu continues to work as before (profile, contact, orders, etc.).

You can update the label “Courses” or wrap it in translations if you need multi-language support.

Step 3: add the page on header dropdown menu

Add to account menu, show all items on hover.

    Courses

Key: snippets/header/dropdown/menu

  {%- if current_customer != blank %}
    {%- require "scripts/nav.js" -%}


      {{ "header.dropdowns.account.heading" | t }}



      {%- if current_customer.account != blank and current_customer.account.name != blank and current_customer.account.name != current_customer.name %}
        {{ current_customer.account.name }}
      {%- endif %}


          {{ "header.dropdowns.account.profile" | t }}




          {{ "header.dropdowns.account.orders" | t }}




          Courses




          {{ "header.dropdowns.account.subscriptions" | t }}


      {%- if current_account.account_credits.size > 0 and current_customer.can_use_account_credit? %}


            {{ "header.dropdowns.account.account_credits" | t }}


      {%- endif %}
      {%- if current_store.display_points? and current_customer.can_use_account_points? %}


            {{ "header.dropdowns.account.account_points" | t }}


      {%- endif %}
      {%- if current_account.product_approvals.size > 0 %}


            {{ "header.dropdowns.account.product_approvals" | t }}


      {%- endif %}


          {{ "header.dropdowns.account.logout" | t }}



  {%- else %}

      {{ "header.dropdowns.account.login" | t }}

  {%- endif %}

What this code is doing:

• Adds a Courses entry to the account dropdown in the header for logged-in users.

• Keeps the existing profile, orders, subscriptions, credits, points, and approvals links unchanged.

• Routes the user directly to /account/courses when they select Courses from the dropdown.

You can reorder or group this menu item with others if you want a different hierarchy.

Step 4: add a new template for the account menu

Key: snippets/account/courses

{%- default identifier: blank %}

{%- if identifier != blank %}
  {% render "courses/show", order: current_customer.courses[identifier] %}
{%- else %}
  {% render "courses/index" %}
{%- endif %}

What this code is doing:

• Defines a new snippet responsible for rendering the Courses section inside the account layout.

• Accepts an optional identifier parameter (defaults to blank).

• If identifier is present, it renders a single course view via courses/show, passing the selected course from current_customer.courses[identifier].

• If identifier is blank, it renders the courses index via courses/index (a list or overview of courses).

Step 5: add a new template for the index

Key: snippets/courses/index

{%- if current_customer != blank %}
  {%- new Map courses_json = current_customer.data['Course_History_Data__c'] | unescape -%}

  {%- render "shared/page_header", heading: "Courses" %}
  {%- if current_customer.data['Course_History_Data__c'].size > 0 %}

      {%- for course_history in courses_json %}

      {%- endfor %}


        Name
        Result
        Letter Grade
        Numeric Grade
        Completed

          {{ course_history['name'] }}
          {{ course_history['result_status'] }}
          {{ course_history['letter_grade'] }}
          {{ course_history['numeric_grade'] }}
          {{ course_history['completed'] }}

  {%- else %}
  No Course History
  {%- endif %}

{%- endif %}

What this code is doing: This 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.

You 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.

Result:

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 {{ "accounts.menu.courses" | t }}, and adding the corresponding translation to your locale files.