How to add a custom link in the login menu in Shopify

How to add a custom link in the login menu in Shopify

  1. Open your Shopify admin panel and navigate to Online Store -> Themes. Click the Edit HTML/CSS button near your template.

     

  2. Locate and open theme.liquid file and find the following code on lines 82-93:
    <ul class="header_user">
        {% if customer %}
            <li><a href="/account"><i class="fa fa-user"></i>{{ customer.first_name | truncate:15 }}</a></li>
            <li><a href="/account/logout"><i class="fa fa-unlock-alt"></i>{% assign X = 'layout.header.logout' | t %}{% if X.size > 0 %}{{ X }}{% else %}Log out{% endif %}</a></li>
        {% else %}
            <li><a href="/account/login"><i class="fa fa-unlock-alt"></i>{% assign X = 'layout.header.login' | t %}{% if X.size > 0 %}{{ X }}{% else %}Log in{% endif %}</a></li>
            {% if shop.customer_accounts_optional %}
                <li><a href="/account/register"><i class="fa fa-user-plus"></i>{% assign X = 'layout.header.create_account' | t %}{% if X.size > 0 %}{{ X }}{% else %}Create an account{% endif %}</a></li>
            {% endif %}
        {% endif %}
    </ul>
  3. Before the closing:
    </ul>

    tag add a list item with your link inside of it, for example:

    <li><a href="https://www.google.com">Custom link</a></li>
  4. After editing the code will look as follows:
    <ul class="header_user">
        {% if customer %}
            <li><a href="/account"><i class="fa fa-user"></i>{{ customer.first_name | truncate:15 }}</a></li>
            <li><a href="/account/logout"><i class="fa fa-unlock-alt"></i>{% assign X = 'layout.header.logout' | t %}{% if X.size > 0 %}{{ X }}{% else %}Log out{% endif %}</a></li>
        {% else %}
            <li><a href="/account/login"><i class="fa fa-unlock-alt"></i>{% assign X = 'layout.header.login' | t %}{% if X.size > 0 %}{{ X }}{% else %}Log in{% endif %}</a></li>
            {% if shop.customer_accounts_optional %}
                <li><a href="/account/register"><i class="fa fa-user-plus"></i>{% assign X = 'layout.header.create_account' | t %}{% if X.size > 0 %}{{ X }}{% else %}Create an account{% endif %}</a></li>
            {% endif %}
        {% endif %}
        <li><a href="https://www.google.com">Custom link</a></li>
    </ul>
  5. Now your custom link has appeared in the Account menu.

     

Thank you for watching our tutorial. Now you know how to add a custom link in the login menu in Shopify.

Was this article helpful?

Related Articles

Leave A Comment?