Adding login icon on header next to cart (narrative theme)

Dyu
Visitor
1 0 0

Hi,

would like to ask how to add login icon next to cart for narrative them by editing code?

https://lagomplace.myshopify.com/

 

anyone can advise a solution?

Thank you

Replies 2 (2)

Jon_Chambers
Excursionist
27 2 2

Hi.

It may be as simple as adding the option in the admin > settings > checkout.

Otherwise here is some code.

 

In the header template find this 

<div class="site-header__section site-header__section--button">

and replace it with the below.

 

<div class="site-header__section site-header__section--button">
    <div style="display: table">
        <div style="display: table-cell; padding: 5px; vertical-align: top; text-align: center">
            <a href="/account/login" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" style="max-height: 26px;" 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>
                <span class="icon__fallback-text">Account</span>
            </a>
        </div>
        <div style="display: table-cell; padding: 5px; vertical-align: top; text-align: center">
            <a href="/cart" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-header-cart" viewBox="0 0 24.3 26"><path d="M22.6 21.5v-2H7.9c-.2 0-.4-.1-.4-.1 0-.1 0-.3.2-.5l2.3-2.1 13.2-1.4 1.1-10h-18L4.6 1 .5 0 0 1.9l3.1.7 5.2 13-2 1.8c-.8.7-1 1.8-.7 2.7.4.9 1.2 1.4 2.3 1.4h14.7zM7.1 7.4H22l-.7 6.2-11.2 1.2-3-7.4z"></path><ellipse cx="8.1" cy="24.4" rx="1.6" ry="1.6"></ellipse><ellipse cx="21.7" cy="24.4" rx="1.6" ry="1.6"></ellipse></svg>
                <span class="icon__fallback-text">View cart</span>
                <span class="site-header__cart-bubble"></span>
            </a>
        </div>
    </div>
</div>

 

Regards,
Jon

Shopify Dev Help: jcbellc.com

 

 

Riz_bangee
Explorer
56 3 16

@Jon_Chambers Hi, 

 

I would like to do the same. I want to add 'log in' icon in the middle of search bar & cart. 

I'm using Dawn Theme. Can I use the same code ? Or is there a way to activate the login icon to show in header ?

 

url: https://pure-dates.com/

password: triwhi

 

Screenshot 2022-01-30 at 13.52.44.png