Customer Account Login Account Icon

Solved
Highlighted
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

 

 

0 Likes
Highlighted
Shopify Expert
3464 543 816

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
10 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!

 

0 Likes
Highlighted
Shopify Expert
3464 543 816

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Excursionist
40 0 1

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!

0 Likes
Highlighted
Shopify Expert
3464 543 816

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Excursionist
40 0 1

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

0 Likes
Highlighted
Shopify Expert
3464 543 816

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Excursionist
40 0 1

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

0 Likes
Highlighted
Shopify Expert
3464 543 816

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes