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

 

 

Replies 101 (101)
czernym
New Member
15 0 0

Hi Jasoliya, thank for your answer.

 

I find the header.liquid and place the code there. The account icon appears, that's great. And now, I would like to change this account icon to one that I will upload to Files. So, where do I have to place the link to the file?

 

Thank you for your time.

Martin

Jasoliya
Shopify Expert
4382 574 1103

If you found place and uploaded svg in file then use code like that:

<img scr="svg_url_from_file" width="30">

Note: chaneg src to svg link.

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

I'm not sure what css is but I did email you for further help.

Jasoliya
Shopify Expert
4382 574 1103

ok mail me or PM

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
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
4382 574 1103

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 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
Amvisible
New Member
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.

shaggybuddy
Tourist
6 0 1
yes, i see. from where can i get the code for the icon?

cozza
New Member
1 0 0

Hi 

 

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>