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

[Oliver_Blake]

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! 

[KetanKumar]

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.

[Oliver_Blake]

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

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

[KetanKumar]

@Oliver_Blake 

Good one

yes i can help you 

sorry but your store is password protect.

[KetanKumar]

@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;
}

[Oliver_Blake]

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]

@Oliver_Blake 

Thanks for the update and support.

[bohobebe]

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]

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

[bohobebe]

Hello I just disable the password Ketan!

Could you please help me?

Thank you so much in advance!! 

[KetanKumar]

@bohobebe 

[bohobebe]

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]

@bohobebe 

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

[hiyaJoyce]

Hi Ketan,

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

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

Thank you so much in advance!

[KetanKumar]

@hiyaJoyce 

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

[hiyaJoyce]

Thank you for your quick response! I have ready enabled it. Can log in from
the sidebar.

[KetanKumar]

@hiyaJoyce 

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

[AngelGuillebe]

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]

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]

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

[Akkoustic]

Hi Ketan,

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

it shows it like this:

[KetanKumar]

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

[Akkoustic]

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]

@Akkoustic 

thank for store url but its password protect 

[Akkoustic]

Kandou2020 should be the password! 

[KetanKumar]

@Akkoustic 

thanks 

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

[AngelGuillebe]

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]

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

@AngelGuillebe 

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

[AngelGuillebe]

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

[KetanKumar]

@AngelGuillebe 

yes, please

[dannys14]

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]

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]

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]

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

[dannys14]

https://auricleshop.myshopify.com/

thank you

[KetanKumar]

@dannys14 

can you please give me screenshot 

[dannys14]

[KetanKumar]

@dannys14 

Thanks what do you like both are changes?

[dannys14]

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]

@dannys14 

Thanks 

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

also account link it's proper work

[Petit_Papa]

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]

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

[KetanKumar]

@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