Re: Customer Login Account icon

How can I add a customer login icon on the Narrative Theme?

Oliver_Blake
Excursionist
42 0 17

Hi everyone,

 is there any way to add customer login account icon on Narrative Theme, I found quite a few people asking the same question, but couldn't find a solution.

Guess it's just a few lines in the header.liquid that have to be changed or added.

Thanks! 

Replies 43 (43)

KetanKumar
Shopify Partner
36932 3642 11998

Hello, @Oliver_Blake 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Oliver_Blake
Excursionist
42 0 17

Hi Ketan,

 Thanks for the fast reply,

my store link is - https://muave.co.uk/

I have managed to get the icon on the header, but can't place it properly.

I was using the following code:

<a href="/account/login" id="customer_login_link" class="site-header__link site-header__cart ajax-cart__toggle">
        <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>

 The whole line looks like this:

</div>
      <div class="site-header__section site-header__section--button">
        <a href="{{ routes.cart_url }}" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
          {%- assign icon = 'icon-header-' | append: section.settings.icon %}
          {% include icon %}
          <span class="icon__fallback-text">{{ 'general.header.view_cart' | t }}</span>
          <span class="site-header__cart-bubble{% if cart.item_count > 0 %} site-header__cart-bubble--visible{% endif %}"></span>
        </a>
        
       <a href="/account/login" id="customer_login_link" class="site-header__link site-header__cart ajax-cart__toggle">
        <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>

 

 

The final result is:
aa

 

It would be great if you're able to help, to move it on the left side of the cart icon. Thanks! 

KetanKumar
Shopify Partner
36932 3642 11998

@Oliver_Blake 

Good one

yes i can help you 

sorry but your store is password protect.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
36932 3642 11998

@Oliver_Blake 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-header__section--button {
    display: flex;
    align-items: center;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Oliver_Blake
Excursionist
42 0 17

Hi Ketan,

 Thank you so much for that!

For anyone wanting to the same thing the accurate line is the one bellow, the one above loads the cart, does not lead to the account log in page.

Fix:

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

 

KetanKumar
Shopify Partner
36932 3642 11998

@Oliver_Blake 

Thanks for the update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
bohobebe
Tourist
4 0 2

Hi Ketan,

 

could you please help me to show account logo on the left of my shhopping bag too please?

 

my website is : www.bohobebe.shop 

 

Thank you so much in advance!

KetanKumar
Shopify Partner
36932 3642 11998

@bohobebe 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

your store is password protect can you  Please share,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
bohobebe
Tourist
4 0 2

Hello I just disable the password Ketan!

Could you please help me?

Thank you so much in advance!! 

KetanKumar
Shopify Partner
36932 3642 11998

@bohobebe 

KetanKumar_0-1612188509457.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
bohobebe
Tourist
4 0 2

Hello Ketan

Sorry yesterday I forgot to save.

For sure now you can see the website.

Thank you! And let me know if anything. 

KetanKumar
Shopify Partner
36932 3642 11998

@bohobebe 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hiyaJoyce
Visitor
2 0 2

Hi Ketan,

I have the same problem on Venue Theme. Could you please help me to add account icon?

hiyaJoyce_0-1614322100322.png

 

My website is : https://chandelierias.com/ 

Thank you so much in advance!

KetanKumar
Shopify Partner
36932 3642 11998

@hiyaJoyce 

can you please first enable account login on Shopify admin fi not so let me know

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hiyaJoyce
Visitor
2 0 2
Thank you for your quick response! I have ready enabled it. Can log in from
the sidebar.
KetanKumar
Shopify Partner
36932 3642 11998

@hiyaJoyce 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AngelGuillebe
Tourist
3 0 1

Hello, Thanks @Ivanov1 and @KetanKumar for this thread, I able to put the login icon beside the cart icon, however @KetanKumar, I would like to add the same else condition if the customer is already logged into the site, it should proceed to the account page instead. I'm just not sure where exactly to put it. 

Akkoustic
Tourist
5 0 2

Hello.

I've have the same issue at the moment. I would like to change the Log In and Create account text into an icon. I've tried the following code in the header bar right liquid code but it was way to big and blacked outline as icon instead of a white icon. Could you help me with this?

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

I've tried to PM you but for some reason Im not able to do so. 

This is the website: https://www.lesbrutes.com/ 

 

 

KetanKumar
Shopify Partner
36932 3642 11998

@all 
sorry for the late reply can you please share exactly issue after added  code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Akkoustic
Tourist
5 0 2

Hi Ketan,

Whenver I add the code under the <div class="header-bar__right post-large--display-table-cell"> 

it shows it like this:

Akkoustic_0-1617701516348.png

 

KetanKumar
Shopify Partner
36932 3642 11998

@Akkoustic 

Sorry, you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Akkoustic
Tourist
5 0 2

Hi Ketan,

Thanks for the warm welcome.

This is the site URL: https://www.lesbrutes.com/  

The icon I showed should be replacing the text of "Login or Create Account"

To make it a bit cleaner and align with the other icons.

 

thanks for your dedication! 

KetanKumar
Shopify Partner
36932 3642 11998

@Akkoustic 

thank for store url but its password protect 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Akkoustic
Tourist
5 0 2

Kandou2020 should be the password! 

KetanKumar
Shopify Partner
36932 3642 11998

@Akkoustic 

thanks 

sorry i can't see the now icon if you are not able to this so please sent a personal message 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AngelGuillebe
Tourist
3 0 1

Hi @KetanKumar, here's the added code for the login icon beside the cart in the header:

 <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" width="50px" 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>

 I would just like to add the same else condition if the customer is already logged into the site, it should proceed to the account page instead. I'm just not sure how to construct it properly.

<ul class="navigation__links">
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="navigation__link navigation__link--secondary navigation__entrance-animation">
{% if customer.first_name != blank %}
{% capture first_name %}{{ customer.first_name }}{% endcapture %}
<a href="{{ routes.account_url }}">{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}</a>
{% else %}
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
{% endif %}
</li>
<li class="navigation__link navigation__link--secondary navigation__entrance-animation">
<a href="{{ routes.account_logout_url }}">{{ 'layout.customer.log_out' | t }}</a>
</li>
{% else %}
<li class="navigation__link navigation__link--secondary navigation__entrance-animation">
<a href="{{ routes.account_login_url }}">{{ 'layout.customer.log_in' | t }}</a>
</li>
<li class="navigation__link navigation__link--secondary navigation__entrance-animation">
<a href="{{ routes.account_register_url }}">{{ 'layout.customer.create_account' | t }}</a>
</li>
{% endif %}
{% endif %}
{% for link in linklists[section.settings.secondary_navigation].links %}
<li class="navigation__link navigation__link--secondary navigation__entrance-animation{% if link.active %} navigation__link--active{% endif %}">
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>

Thanks!

Akkoustic
Tourist
5 0 2

@KetanKumar hi. I've re-added the icon. Its pretty huge. can you help me out now? 

It has been visible on the website now.

KetanKumar
Shopify Partner
36932 3642 11998

@AngelGuillebe 

can you please add me staff account so i will quick fix 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AngelGuillebe
Tourist
3 0 1

Hi @KetanKumar, sure, is this your email add? bamaniyaketan.sky@gmail.com

KetanKumar
Shopify Partner
36932 3642 11998

@AngelGuillebe 

yes, please

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dannys14
Tourist
10 0 1

Hi there i'm trying to do the same thing.... i actually just asked the same question. Can you tell me where to paste this code? Thanks!

 

Got it! Is there a way to

 

1. adjust the stroke width of the icon (it is very wide)

2. make it an if logged in then go to account page

 

Oliver_Blake
Excursionist
42 0 17

Hi Dannys,

 

 you can follow the instructions above and paste the code in header.liquid section. Hope it works well for you! If you need anything else just let me know.

dannys14
Tourist
10 0 1

Hi there

Yeah i've got that now - see my edits: I still have questions...

Edit questions:

 

is there a way to:

1. adjust the stroke width of the icon (it is very wide)

2. make it an if logged in then link to account page

 

KetanKumar
Shopify Partner
36932 3642 11998

@dannys14 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dannys14
Tourist
10 0 1
KetanKumar
Shopify Partner
36932 3642 11998

@dannys14 

can you please give me screenshot 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dannys14
Tourist
10 0 1

Screenshot 2020-11-20 at 18.23.55.png

KetanKumar
Shopify Partner
36932 3642 11998

@dannys14 

Thanks what do you like both are changes?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dannys14
Tourist
10 0 1

I don't understand the question.

 

I'd like to 

1. adjust the stroke width of the logon icon (it is very wide)

2. i'd like the icon to go to "my account" if the person has already logged in. so, if they are visiting the site and would first like to login, they click that. then, if they are browsing and would like to return to their customer account then i'd like the icon to send them to their account, rather than the login page.

KetanKumar
Shopify Partner
36932 3642 11998

@dannys14 

Thanks 

yes, icon is svg file also if you like new icon change 

also account link it's proper work

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Petit_Papa
Shopify Partner
27 0 9

Hi @KetanKumar  ! Thanks for providing a solution for the login icon alignment.

How can I change the SVG file ? The current login Icon is great but it's too thick.

Many thanks!

dannys14
Tourist
10 0 1

That is exactly what I'm trying to figure out too...

KetanKumar
Shopify Partner
36932 3642 11998

@Petit_Papa @dannys14 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing