Customer Account Login Account Icon

Solved
New Member
6 0 0

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!shop_is.PNGThis is what it looks likeshop_is2.PNGI want it like this

 

 

0 Likes

Success.

Shopify Expert
2490 417 525

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
0 Likes
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
Shopify Expert
2490 417 525

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
Excursionist
36 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
Shopify Expert
2490 417 525

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
Excursionist
36 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
Shopify Expert
2490 417 525

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
0 Likes
Excursionist
36 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
Shopify Expert
2490 417 525

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