Customer Account Login Account Icon

Solved
gym_yard
Tourist
6 0 1

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 likeThis is what it looks likeI want it like thisI want it like this

 

 

Accepted Solution (1)

Accepted Solutions
Jasoliya
Shopify Expert
4519 586 1131

This is an 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>

 

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 102 (102)
Jasoliya
Shopify Expert
4519 586 1131

This is an 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>

 

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Delbarton_Shopi
Tourist
12 0 2

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
Shopify Expert
4519 586 1131

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.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
linda_pierre
Excursionist
40 0 2

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
Shopify Expert
4519 586 1131

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.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
linda_pierre
Excursionist
40 0 2

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

Skärmavbild 2019-11-13 kl. 15.29.30.png

Jasoliya
Shopify Expert
4519 586 1131

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 %}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
linda_pierre
Excursionist
40 0 2

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".Skärmavbild 2019-11-13 kl. 15.54.21.png

Jasoliya
Shopify Expert
4519 586 1131

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
linda_pierre
Excursionist
40 0 2

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
Shopify Expert
4519 586 1131

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.

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
czernym
Tourist
18 0 2

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
Shopify Expert
4519 586 1131

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>
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
czernym
Tourist
18 0 2

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
Shopify Expert
4519 586 1131

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Breonnamoore
New Member
2 0 0

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
Shopify Expert
4519 586 1131

That you have to manage by css. 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
czernym
Tourist
18 0 2

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
Shopify Expert
4519 586 1131

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here