Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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>
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>
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!
If you have non-section theme then find template->header.liquid, may be you have in template section or need to check in theme.
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!
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.
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
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 %}
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".
You made mistake add me as staff(jasoliyabrijesh123@gmail.com) i will make it proper.
Thank you that would be great!
I don’t really understand why the design for the account icon is different from the others? (thicker) Just like in this thread (the screenshot above) I’d also love to have the three icons (search, account and shopping bag) in the same style. Do you know how I can make that happen? Also have no idea how to change the shopping cart to the shopping icon, but maybe I have to create a new thread for that?
Also, I just installed a social login plugin for the account page (Growave) and I then saw that the site performs differently when I click on the icon vs when I click on the ”account”-text. I prefer what happens when I click on the ”account”-text (a pop-page) so if I can’t make that happen in the icon icon on top then maybe I shouldn’t take away the ”account”-text after all… 😕
Icon is not same because its bit different you have to find account icon svg on google and you can change on place of bellow code:
<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>
You have to replace new SVG icon on place of above SVG on code.
Hi Jasolyia, I was wondering if you could give me/us more details how to change/upload the account icon? Thank you so much in advance.
You can find account code in section->header.liquid file and replace with this svg for 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>
Hi Jasoliya, thank you for your answer. When I insert this code, it works, there comes an account icon. But what if I would like to use my own .svg icon? How do I do that?
Thank you.
You can add your SVG icon code direct instead of my given. or upload SVG in setting->file and then use it.
Hi Jasoliya,
Thank you so much for your answer. Could you be more specific please? If the link to the .svg icon is, for example, "https://cdn.shopify.com/s/files/XYZ", where do I place it in the below code?
<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>
Thank you, appreciate your help!
Martin
you have to place this code in Section->header.liquid file where you find account link or existing icon
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
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.
Hi Jasoliya, thank you. when I apply this code there is no change in the account icon size, and on the mobile site the "Account" text still visible in the hamburger menu. please help
Hi @UKPKARL
So what do you want to do? want to hide icon?
Thank you for your immediate response. I want the account icon and color the same as the cart icon on the mobile and desktop site. Also want to remove the login text on the mobile site hamburger menu.
Send your store url
Hi, hii! I managed to put the icon, but it direct me to home page, is it because I'm already logged in or should I change sth? Thanks!
You have to add link "/account/login" to redirect on login page
and if logged in then "/account"
you can check condition like:
{% if customer %}
//add this link "/account"
{% else %}
//add this link "/account/login"
{% endif %}
Can you write me how the whole link would be, please?
I mean, with this one:
<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>
it would be like:
{% if customer %}
<a href="/account/" 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>
{% else %}
<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>
{% endif %}
Note: change your both icon if you want
Somehow, it still redirecting to the Home. Could it be that I'm already logged in?
Then check may be your account is disabled from shopify admin
Setting->checkout->Customer accounts-> enable "Accounts are optional"
It worked!!! Thank you so much! ♥
I tried this code but for some reason it's a little funky for my website. I use the theme boundless.
1) It's not aligned with the search and cart icons, nor is it matching the same color on different pages.
2) When I log in, the account icon become invisible. The icon doesn't show up but if I click in its supposed spot, it brings me to the "my account" page. If I go to any other page on the site, the icon still doesn't show up but I'm logged in.
Send me storeurl will check possible solution
Hi ,
i have added the account icon , and its also in mobile site. but in mobile site in hamburger menu showing the link of LOG IN . I want to remove that LOGIN Link from menu from mobile site. below i am attaching the screen shot please check it. don't want to remove the icon from both site only need to remove the Login link from mobile site.
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss Or theme.css-> paste bellow code in bottom of file
#qikify-tmenu-megamenu-0 [href="/account/login"] { display: none; }
Hi Jasoliya,
Its worked perfectly. thank you so much.
try this
{% if shop.customer_accounts_enabled %}
{% if customer %}
{{ 'layout.customer.account' | t }}
{{ 'layout.customer.log_out' | t |
customer_logout_link }}
{% else %}
<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>
{{ 'layout.customer.create_account' | t |
customer_register_link }}
{% endif %}
{% endif %}
Hello, your tutorial has been so helpful and I was able to add the account icon next to the other icons but I would like to hide the "account" button that is still there. I tried the end comment advice you gave but it still isn't working for me.
Send your store url
On prestige theme and i'm having the same problem
I want to want to make it look like this site
This is mine
What a have to do ? Thanks in advance
Send me store password here or pm me.
as i can see you have added direct account link, we have to code it bit different with css. so cant manage it just by some css need to change bit html too
Ok so... how can i do that?
How can I do this for Boundless theme? This code doesn't match the style of the other icons.
You can upload your logo for that you no need to copy all thing.
Hi.
I tried this with my narrative theme and the account icon did show up but below the cart instead of next to it. I think I need more help
That you have to manage by css.
I'm not sure what css is but I did email you for further help.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024