Solved

Customer Account Login Account Icon

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)

Jasoliya
Shopify Expert
4808 621 1217

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 106 (106)
Jasoliya
Shopify Expert
4808 621 1217

ok mail me or PM

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
CourtneyBaucom
Visitor
1 0 0

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

shaggybuddy
Tourist
6 0 1

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
Shopify Expert
4808 621 1217

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.

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
shaggybuddy
Tourist
6 0 1
yes, i see. from where can i get the code for the icon?

Jasoliya
Shopify Expert
4808 621 1217

@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>
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
TheSeaMarket
Tourist
32 0 1

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
Shopify Expert
4808 621 1217

HI @TheSeaMarket 

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
TheSeaMarket
Tourist
32 0 1

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
Shopify Expert
4808 621 1217

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.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
shaggybuddy
Tourist
6 0 1

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
Visitor
1 0 0

Hi 

 

Amvisible
Visitor
2 0 0

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
Shopify Expert
4808 621 1217

@Amvisible 

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
shaggybuddy
Tourist
6 0 1

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
Shopify Partner
29 0 4

Capture.PNG

 

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

Please suggest the solution

Zworthkey
Shopify Partner
5581 642 1565

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

Mukuldm
Shopify Partner
29 0 4

@Zworthkey 

Zworthkey
Shopify Partner
5581 642 1565

You want to delete WhatsApp Chat Option.

Zworthkey
Shopify Partner
5581 642 1565

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
Shopify Partner
29 0 4

@Zworthkey 

 

Thanks, this works but not dynamically.

Mukuldm_0-1630923296423.png

 

Zworthkey
Shopify Partner
5581 642 1565

@Mukuldm 
Kindly Mark that option you want to hide.

Mukuldm
Shopify Partner
29 0 4

 @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
Shopify Partner
5581 642 1565

I can't See Account icon in your Header.

Mukuldm
Shopify Partner
29 0 4

@Zworthkey 

Can you please check it once again? 

Mukuldm
Shopify Partner
29 0 4

@Zworthkey 

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

demip01
Tourist
4 0 1

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
Shopify Expert
4808 621 1217

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
NoahKaiden
Visitor
1 0 0

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.

 

CA382EA2-AD29-4691-8962-72A6ADF99D5A.jpeg

VenusLaFemme
Visitor
1 0 1

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
Explorer
48 2 7

Thank you! this is very help ful 

TheNeonLyghts
Visitor
1 0 0

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

Jasoliya
Shopify Expert
4808 621 1217

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;}
}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
legswine
Visitor
3 0 0

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
Tourist
22 0 1

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
Shopify Expert
4808 621 1217

send me store url

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
goodfella
Tourist
22 0 1

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

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

goodfella
Tourist
22 0 1

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

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

Jasoliya
Shopify Expert
4808 621 1217

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Mukuldm
Shopify Partner
29 0 4

@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

capture1.png

Zworthkey
Shopify Partner
5581 642 1565

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
Shopify Partner
29 0 4

@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
Shopify Expert
4808 621 1217

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Rasleen_Sahni
Tourist
7 0 4

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
Shopify Expert
4808 621 1217

Send me store url

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Rasleen_Sahni
Tourist
7 0 4
Jasoliya
Shopify Expert
4808 621 1217
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>
 
 
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Rasleen_Sahni
Tourist
7 0 4
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
Visitor
1 0 0

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
Excursionist
14 0 2

How can i reduce the size of the icon?