Customer Account Login Account Icon

[gym_yard]

Hi, I recently turned on the feature where my customers have the option to signup on my website but I want to customize the the text "Account" to an icon and move it along side my cart and search icons. I have looked everywhere and messed around with the code but still I can't change anything. Any help would be great. Thanks!This is what it looks likeI want it like this

[Jasoliya · Accepted solution]

Hi @gym_yard 

Follow this:

1. Go to Online Store->Theme->Edit code
2. Section->header.liquid-> find "site-header__link site-header__cart" class in <a> and add this after this tag

<a href="/account/login" id="customer_login_link" class="site-header__link site-header__cart">
    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>
</a>

so it look like:

<a href="/cart" class="site-header__link site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <span class="site-header__cart-indicator {% if cart.item_count == 0 %}hide{% endif %}"></span>
          </a>
          
    <a href="/account/login" id="customer_login_link" class="site-header__link site-header__cart">
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>
     </a>

[Delbarton_Shopi]

If the theme we are using is older (Brooklyn) and isn't sectioned, so we don't have a header.liquid, then where would you enter this code?

Thanks!

[Jasoliya]

Hi @Delbarton_Shopi 

If you have non-section theme then find template->header.liquid, may be you have in template section or need to check in theme.

[linda_pierre]

I did this and it worked (yeahh!) but the "account" is still there too. How do I remove that? Also is there a way to make it less thick so it fits the other icons right next to it? Can't seem to find where to change the shopping cart icon either. Venture theme. Thank you for any help!

[Jasoliya]

Hi @linda_pierre 

Follow this to hide "Account".

1. Go to Section->header.liquid and find bellow line and comment/remove  whole div:

<div class="grid__item {% if shop.customer_accounts_enabled %}one-fifth{% else%}one-eighth{% endif %} text-right">

For icon thinness we have to create new SVG icon for that.

[linda_pierre]

Hi,

I did that but then the text "Account" only moved slightly to the left...? (see image).

Is there anywhere else I need to take it away?

Regards

Linda

[Jasoliya]

I think you have not completed whole step: 

add {% comment %} on starting of this this and {% endcomment %} on end of div.

So it look like bellow:

   {% comment %}
            <div class="grid__item {% if shop.customer_accounts_enabled %}one-fifth{% else%}one-eighth{% endif %} text-right">
              <div class="sticky-only" id="StickyNavSearchCart"></div>
              {% if shop.customer_accounts_enabled %}
                <div class="customer-login-links sticky-hidden">
                  {% if customer %}
                    <a href="/account">
                      {{ 'layout.customer.account' | t }}
                    </a>
                    {{ 'layout.customer.log_out' | t | customer_logout_link }}
                  {% else %}
                    {{ 'layout.customer.account' | t | customer_login_link }}
                  {% endif %}
                </div>
              {% endif %}
            </div>
            {% endcomment %}

[linda_pierre]

I tried that but it just says error. Changed back to the original code for now. It is not suuuperimportant just thought it would look better if it weren't there. 🙂

This is how it looked when it said "error".

[Jasoliya]

You made mistake add me as staff(jasoliyabrijesh123@gmail.com) i will make it proper.

[linda_pierre]

Thank you that would be great! 

I don’t really understand why the design for the account icon is different from the others? (thicker) Just like in this thread (the screenshot above) I’d also love to have the three icons (search, account and shopping bag) in the same style. Do you know how I can make that happen? Also have no idea how to change the shopping cart to the shopping icon, but maybe I have to create a new thread for that?

Also, I just installed a social login plugin for the account page (Growave) and I then saw that the site performs differently when I click on the icon vs when I click on the ”account”-text. I prefer what happens when I click on the ”account”-text (a pop-page) so if I can’t make that happen in the icon icon on top then maybe I shouldn’t take away the ”account”-text after all… 😕

[Jasoliya]

Icon is not same because its bit different you have to find account icon svg on google and you can change on place of bellow code:

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>

You have to replace new SVG icon on place of above SVG on code.

[czernym]

Hi Jasolyia, I was wondering if you could give me/us more details how to change/upload the account icon? Thank you so much in advance.

[Jasoliya]

You can find account code in section->header.liquid file and replace with this svg for icon

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>

[czernym]

Hi Jasoliya, thank you for your answer. When I insert this code, it works, there comes an account icon. But what if I would like to use my own .svg icon? How do I do that?

Thank you.

[Jasoliya]

You can add your SVG icon code direct instead of my given. or upload  SVG in setting->file and then use it. 

[Breonnamoore]

Hi.

I tried this with my narrative theme and the account icon did show up but below the cart instead of next to it. I think I need more help

[Jasoliya]

That you have to manage by css. 

[czernym]

Hi Jasoliya,

Thank you so much for your answer. Could you be more specific please? If the link to the .svg icon is, for example, "https://cdn.shopify.com/s/files/XYZ", where do I place it in the below code?

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>

Thank you, appreciate your help!

Martin 

[Jasoliya]

you have to place this code in Section->header.liquid file where you find account link or existing icon