How to add account icon to header instead of the login in menu

[Ab52]

Hello everyone,

Can someone  help me get the ‘my account’ icon in header on mobile. I want I as in The attachment. Im using IMPACT theme

https://cdn.shopify.com/s/files/1/0741/4461/2617/files/IMG_9565.jpg?v=1725864550

https://cdn.shopify.com/s/files/1/0741/4461/2617/files/IMG_9564.jpg?v=1725864550

https://cdn.shopify.com/s/files/1/0741/4461/2617/files/IMG_9563.jpg?v=1725864551

https://x9ky5vd41rye611d-74144612617.shopifypreview.com

[namphan · Accepted solution]

Hi @Ab52,

You want this:

please send me the code of header.liquid file, I will check and add it for you

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Ab52 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<script>
window.addEventListener('load', function() {
    let header = document.querySelector(".header__secondary-nav .header__icon-list");
header.innerHTML += `<a href="/account/login/" class="hidden tap-area sm:block" style="top:4px; display: block">
            <span class="sr-only">Zoeken openen</span>
         <svg width="22px" height="22px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="7" r="4" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 21V17C4 15.8954 4.89543 15 6 15H18C19.1046 15 20 15.8954 20 17V21" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>`
})
</script>

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @Ab52 .

[BSS-TekLabs · Accepted solution]

<script>
window.addEventListener('load', function() {
    let header = document.querySelector(".header__secondary-nav .header__icon-list");
header.innerHTML += `<a href="/account/login/" class="hidden tap-area sm:block" style="top:2px; display: block; opacity: 0.8">
            <span class="sr-only">Zoeken openen</span>
<svg class="icon icon-account" width="22px" height="22px" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path class="_no-logged_1toe5_4" d="M12 14C14.76 14 17 11.76 17 9C17 6.24 14.76 4 12 4C9.24 4 7 6.24 7 9C7 11.76 9.24 14 12 14ZM12 5.5C13.93 5.5 15.5 7.07 15.5 9C15.5 10.93 13.93 12.5 12 12.5C10.07 12.5 8.5 10.93 8.5 9C8.5 7.07 10.07 5.5 12 5.5ZM18.75 18V20H17.25V18C17.25 17.31 16.69 16.75 16 16.75H8C7.31 16.75 6.75 17.31 6.75 18V20H5.25V18C5.25 16.48 6.48 15.25 8 15.25H16C17.52 15.25 18.75 16.48 18.75 18Z" fill="var(--_g-icon-fill-color)"></path><path class="_logged_1toe5_1" d="M11.75 14C14.51 14 16.75 11.76 16.75 9C16.75 6.24 14.51 4 11.75 4C8.99 4 6.75 6.24 6.75 9C6.75 11.76 8.99 14 11.75 14ZM5 20V18C5 16.48 6.23 15.25 7.75 15.25H15.75C17.27 15.25 18.5 16.48 18.5 18V20H5Z"></path></svg>
</a>`
})
</script>
<style>
path._logged_1toe5_1 {
    opacity: 0 !important;
}
.is-filled svg.icon.icon-account {
    fill: black !important;
}
</style>

Can you try new code @Ab52 

[BSS-TekLabs · Accepted solution]

{% unless template == 'index' %}
<style>
  svg.icon.icon-account {
    fill: black !important;
}
</style>
{% endunless %}

Add this code to the before tag </head> to show icon account in other tag @Ab52 

[namphan · Accepted solution]

Hi @Ab52,

You want this:

please send me the code of header.liquid file, I will check and add it for you

[Ab52]

Yes, on mobile view. So i get something like this: https://cdn.shopify.com/s/files/1/0741/4461/2617/files/IMG_9563.jpg?v=1725864551

it currently is like this:https://cdn.shopify.com/s/files/1/0741/4461/2617/files/IMG_9564.jpg?v=1725864550 

[namphan]

Hi @Ab52,

Please go to Actions > Edit code > Sections > header.liquid file

Please send me the code, I will check and add it

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Ab52 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<script>
window.addEventListener('load', function() {
    let header = document.querySelector(".header__secondary-nav .header__icon-list");
header.innerHTML += `<a href="/account/login/" class="hidden tap-area sm:block" style="top:4px; display: block">
            <span class="sr-only">Zoeken openen</span>
         <svg width="22px" height="22px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="7" r="4" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 21V17C4 15.8954 4.89543 15 6 15H18C19.1046 15 20 15.8954 20 17V21" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>`
})
</script>

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @Ab52 .

[BSS-TekLabs · Accepted solution]

<script>
window.addEventListener('load', function() {
    let header = document.querySelector(".header__secondary-nav .header__icon-list");
header.innerHTML += `<a href="/account/login/" class="hidden tap-area sm:block" style="top:2px; display: block; opacity: 0.8">
            <span class="sr-only">Zoeken openen</span>
<svg class="icon icon-account" width="22px" height="22px" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path class="_no-logged_1toe5_4" d="M12 14C14.76 14 17 11.76 17 9C17 6.24 14.76 4 12 4C9.24 4 7 6.24 7 9C7 11.76 9.24 14 12 14ZM12 5.5C13.93 5.5 15.5 7.07 15.5 9C15.5 10.93 13.93 12.5 12 12.5C10.07 12.5 8.5 10.93 8.5 9C8.5 7.07 10.07 5.5 12 5.5ZM18.75 18V20H17.25V18C17.25 17.31 16.69 16.75 16 16.75H8C7.31 16.75 6.75 17.31 6.75 18V20H5.25V18C5.25 16.48 6.48 15.25 8 15.25H16C17.52 15.25 18.75 16.48 18.75 18Z" fill="var(--_g-icon-fill-color)"></path><path class="_logged_1toe5_1" d="M11.75 14C14.51 14 16.75 11.76 16.75 9C16.75 6.24 14.51 4 11.75 4C8.99 4 6.75 6.24 6.75 9C6.75 11.76 8.99 14 11.75 14ZM5 20V18C5 16.48 6.23 15.25 7.75 15.25H15.75C17.27 15.25 18.5 16.48 18.5 18V20H5Z"></path></svg>
</a>`
})
</script>
<style>
path._logged_1toe5_1 {
    opacity: 0 !important;
}
.is-filled svg.icon.icon-account {
    fill: black !important;
}
</style>

Can you try new code @Ab52 

[BSS-TekLabs · Accepted solution]

{% unless template == 'index' %}
<style>
  svg.icon.icon-account {
    fill: black !important;
}
</style>
{% endunless %}

Add this code to the before tag </head> to show icon account in other tag @Ab52 

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve: