Customer Login Account icon

Ivanov1
Excursionist
32 0 13

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
Shopify Partner
16967 1838 6345

Hello, @Ivanov1 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Ivanov1
Excursionist
32 0 13

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
16967 1838 6345

@Ivanov1 

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 Expert | 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
16967 1838 6345

@Ivanov1 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Ivanov1
Excursionist
32 0 13

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
16967 1838 6345

@Ivanov1 

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

 

0 Likes
Ivanov1
Excursionist
32 0 13

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.

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

 

0 Likes