How can I change the 'Account' text to an icon on my website?

[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]

ok mail me or PM

[CourtneyBaucom]

Hey, I'm having this problem as well, how do I edit this to get it inline? 

[shaggybuddy]

I cant find it. i go to header.liquid, but it is not there. 

I am looking in this area here:

<div class="header-bar__right post-large--display-table-cell">

{% if shop.customer_accounts_enabled %}
<ul class="header-bar__module header-bar__module--list">
{% if customer %}
<li>
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
</li>
<li>
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li>
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li>{{ 'layout.customer.or' | t }}</li>
<li>
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
</ul>
{% endif %}

<div class="header-bar__module">
<span class="header-bar__sep" aria-hidden="true"></span>
<a href="{{ routes.cart_url }}" class="cart-page-link">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
</a>

</div>

<div class="header-bar__module">
<a href="{{ routes.cart_url }}" class="cart-page-link">
{% unless cart.item_count == 0 %}:{% endunless %}
<span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>

</div>

{% if section.settings.header_search_enable %}
{% if section.settings.show_announcement %}
<div class="header-bar__module header-bar__search">
{% include 'search-bar' with 'header' %}
</div>
{% endif %}
{% endif %}

</div>
</div>
</div>

[Jasoliya]

You can see this code is for login link:

{{ 'layout.customer.log_in' | t | customer_login_link }}

Register link:

{ 'layout.customer.create_account' | t | customer_register_link }}

You can replace both with account icon.

[shaggybuddy]

yes, i see. from where can i get the code for the icon?

[Jasoliya]

@shaggybuddy 

Use this svg for account 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>

[TheSeaMarket]

Hi Jas, i would like to also add a login/logout & Signup text beside the account icon. may i know how do i code that in?

[Jasoliya]

HI @TheSeaMarket 

I already mentioned all step in this post you check and let me know from where you get issue. 

[TheSeaMarket]

HI Jasoliya, instead of adding the login icon and removing the "Account" link, i would like to have that added beside the login icon so that my customer would have a clearer idea of what exactly does that icon mean.

for a customer who has login/signup with us, i would like to have the words "Login/Signup" beside the icon and once they have done so, the word "Account" 

[Jasoliya]

You can see this thread and find you account icon in header.liquid file and change, its different base on theme so cant say exact.

[shaggybuddy]

I tried to add the svg code, but i cant find the right place. 

{% if shop.customer_accounts_enabled %}
<ul class="header-bar__module header-bar__module--list">
{% if customer %}
<li>
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
</li>
<li>
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li>
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li>{{ 'layout.customer.or' | t }}</li>
<li>
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
</ul>
{% endif %}

I tried to add it in this area, but i can not find the right place.

[cozza]

Hi Jasoliya. 

Is there a way to switch the cart icon and account icon positioning? 

Below is what I currently have. And I want to switch the positioning of these icons.

Thanks so much for your coding tips, has helped so much.

[Amvisible]

I did it, and it worked, it added an Icon, and removed the "account" buttom but the "Account" word still appears on mobile device in menu.

[Jasoliya]

@Amvisible 

You can find text for account with something "| t"next to added icon.

[shaggybuddy]

I have minimal theme and does not look like the picture above. 

look like this:

<div class="header-bar__module">
<span class="header-bar__sep" aria-hidden="true"></span>
<a href="#swym-wishlist" class="swym-wishlist">
<i aria-hidden="true" focusable="false" role="presentation" class="icon icon-swym-wishlist"></i>
</a>
</div>

<div class="header-bar__module">
<span class="header-bar__sep" aria-hidden="true"></span>
<a href="{{ routes.cart_url }}" class="cart-page-link">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
</a>
</div>

<div class="header-bar__module">
<a href="{{ routes.cart_url }}" class="cart-page-link">
{% unless cart.item_count == 0 %}:{% endunless %}
<span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>



{% if section.settings.header_search_enable %}
{% if section.settings.show_announcement %}
<div class="header-bar__module header-bar__search">
{% include 'search-bar' with 'header' %}
</div>
{% endif %}
{% endif %}

Where exactly place the follow:

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

[Mukuldm]

If we are adding the same code... our icon go next logo instead of right top corner. 

Please suggest the solution

[Zworthkey]

Hii, @Mukuldm 
Kindly share your store URL so,
I can solve your issue.
Thank You.

[Mukuldm]

@Zworthkey 

taoparis.in 

Preview password- fiwayi

[Zworthkey]

You want to delete WhatsApp Chat Option.

[Zworthkey]

hii, @Mukuldm 
Paste this code on top of the style.scss file.

@media only screen and (min-width: 992px) {
a#customer_login_link {
    position: relative !important;
    left: 430px !important;
    top: 5px !important;
}
@media only screen and (max-width: 768px) {
a#customer_login_link {
    margin-right: 95px !important;
}
}
}

Thank You.

[Mukuldm]

@Zworthkey 

Thanks, this works but not dynamically.

[Zworthkey]

@Mukuldm 
Kindly Mark that option you want to hide.

[Mukuldm]

 @Zworthkey

I don't want to hide any icon.. i want to add account and wishlist icon next to add to cart icon.

Everytime when i add these icon in code these go next to logo instead of top right corner.

[Zworthkey]

I can't See Account icon in your Header.

[Mukuldm]

@Zworthkey 

Can you please check it once again? 

[Mukuldm]

@Zworthkey 

Can you please suggest the solution? It's visible near logo instead of top right corner.

[demip01]

Hello,

How do I get these same icons in the Brooklyn theme? I want these three icons, but this code didn't work for me.

Thanks

[Jasoliya]

You have to place this svg in header.liquid file as per your theme code. 

[NoahKaiden]

I did the coding but it ended up not in line with the cart or the other header icons. It looks the same on desktop. I am using narrative theme.

 

[VenusLaFemme]

Hi,

I have the same theme and had the same issue. I solved it by adding it to the following (might seem unorthodox but it does work without any issue!):

Click on enter (return key) at the end of line 216 and just copy and paste the code:

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

Should work, hope it helps! 

[Deeps_Lady]

Thank you! this is very help ful 

[TheNeonLyghts]

Hi jasoliya! I tried this solution but the icon is showing up weird on mobile. Any help for this issue? 

[Jasoliya]

Try to add this code may be help some.

@media only screen and (max-width: 767px) {
    .customer_login_link {padding-right: 0;}
    #SiteNavSearchCart [href="/cart"]{padding-left: 0;}
}

[legswine]

Hi I am using supply theme and cannot figure out how to change this...

Here is the code currently in the header.liquid file:

<div class="grid-item large--two-third text-center large--text-right">
{% if section.settings.show_announcement or shop.customer_accounts_enabled %}
<div class="site-header--text-links{% if section.settings.announcement_text == blank %} medium-down--hide{% endif %}">
{% if section.settings.show_announcement %}
{% if section.settings.announcement_link != blank %}
<a href="{{ section.settings.announcement_link }}">
{% endif %}

<p>{{ section.settings.announcement_text | escape }}</p>

{% if section.settings.announcement_link != blank %}
</a>
{% endif %}
{% endif %}

{% if shop.customer_accounts_enabled %}
<span class="site-header--meta-links medium-down--hide">
{% if customer %}
{% capture first_name %}<a href="{{ routes.account_url }}">{{ customer.first_name }}</a>{% endcapture %}

{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} &middot; {{ 'layout.customer.log_out' | t | customer_logout_link }}
{% else %}
{{ 'layout.customer.sign_in' | t | customer_login_link }}
<span class="site-header--spacer">{{ 'layout.customer.or' | t }}</span>
{{ 'layout.customer.create_account' | t | customer_register_link }}

{% endif %}
</span>
{% endif %}
</div>

any help would be greatly appreciated!

[goodfella]

Hi Jasoliya,

I have added this code to my store (Boundless theme) but the icon is invisible on desktop, but when I click on the blank space it does lead me to the account page.

On mobile the icon is visible but much smaller than the other icons.

How can I change this? On desktop it should be visible and on mobile bigger. Thank you in advance

[Jasoliya]

send me store url

[goodfella]

It's goodfellastore.com, the theme is Boundless.

I've removed the icon for now otherwise visitors would see this glitch.

[goodfella]

Hi Jasoliya, it's goodfellastore.com, the theme is Boundless.

I've removed the icon for now otherwise visitors would see this glitch.

[Jasoliya]

Hi so want to add user icon?

you can add code back and show me whats issue, you can do in development theme and send me preview link so i can check and pm me

[Mukuldm]

@Jasoliya 

i want to add an account and wishlist icon next to add to cart icon.

Every time when I add these icons in code these go next to logo instead of top right corner.

Can you please suggest any solution?

Webiste- taoparis.in
Password preview- fiwayi

[Zworthkey]

Hey,
You have Added Account icon.
Just Go to the icon fille( like account.liquid) which one you have created.
Provide them
or use

@media only screen and (max-width: 1200px) {
 provide class id{
margin-left:100px;
}

}

[Mukuldm]

@Zworthkey 

Hey thanks for your revert,

I just added the below given code in header.liquid file. I am not able to understand how to modify the position.

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

[Jasoliya]

Pm me we have to do some code adjustment need store access 

[Rasleen_Sahni]

I'm using minimal theme, and can't find this text "site-header__link site-header__cart" in header.liquid. Appreciate your help please. 

Thank you.

[Jasoliya]

Send me store url

[Rasleen_Sahni]

www.theattic-dubai.com

[Jasoliya]

find this in section/ header.liquid "customer_login_link'

now remove this like of code 

<a href="/account/login" id="customer_login_link">Log in</a>

and replace with this

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

[Rasleen_Sahni]

Hi,

I don't have this line in my header.liquid.
Log in

I have this:

          {% if shop.customer_accounts_enabled %}
           

              {% if customer %}
               
• 
                    {{ 'layout.customer.account' | t
  }}
                 

               
• 
                    {{ 'layout.customer.log_out' | t |
  customer_logout_link }}
                 

              {% else %}
               
• 
                    {{ 'layout.customer.log_in' | t | customer_login_link }}
                 

               
• {{ 'layout.customer.or' | t }}

               
• 
                    {{ 'layout.customer.create_account' | t |
  customer_register_link }}
                 

              {% endif %}
           

          {% endif %}

[TElvira]

Will this work for the mobile screen? I have a customer log in button on the website screen that is functional, but nothing shows on the mobile. Thanks.

[HERODIC]

How can i reduce the size of the icon?