Customer Login Account icon

Solved
Highlighted
Excursionist
20 0 7

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! 

Highlighted
Shopify Partner
9272 1180 3266

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
Highlighted
Excursionist
20 0 7

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! 

Highlighted
Shopify Partner
9272 1180 3266

@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
Highlighted
Shopify Partner
9272 1180 3266

This is an accepted solution.

@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
Highlighted
Excursionist
20 0 7

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>

 

Highlighted
Shopify Partner
9272 1180 3266

@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
Highlighted
New Member
7 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
Highlighted
Excursionist
20 0 7

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
Highlighted
New Member
7 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