Liquid, JavaScript, themes, sales channels
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
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
@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 ?
password: triwhi
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024