Get rid of Sign up/login links and replace with Icon (Simple theme)

Solved
devbug
Explorer
44 0 14

hey, i'm trying to get rid of the sign up / login links on the website i'm currently working on and replace it with a nice looking svg icon instead! 

here's a screenshot representing what I'm trying to achieve : Capture d’écran 2021-07-08 160723.png

url: https://isole-worldw1de.myshopify.com/

pw: abee

your help would be so much appreciated! thanks! 

0 Likes
Anthony_David_
Trailblazer
214 27 85

This is an accepted solution.

Hello,

Follow the below Step:
1. Login in you store
2. click on theme from left bar
3. Click "Actions" -> Edit code on the theme

Anthony_David1_0-1625753775871.png

 

4. Search Header and click on header.liquid

Anthony_David1_1-1625753875959.png

5. Find {{ 'layout.customer.log_in' | t | customer_login_link }} and  {{ 'layout.customer.create_account' | t | customer_register_link }}

Anthony_David1_2-1625754412993.png

 


6. Now replace { 'layout.customer.log_in' | t | customer_login_link }} with <a href="/account/login" id="customer_login_link">YOUR login SVG HERE</a>
and 
replace  {{ 'layout.customer.create_account' | t | customer_register_link }} with <a href="/account/register" id="customer_register_link">YOUR register SVG HERE</a>

Hope this helps

 

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
Anthony_David_
Trailblazer
214 27 85

@devbug I checked your store. I feel You are not a developer.

This is how the simple svg looks like 

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
devbug
Explorer
44 0 14

thanks a lot this is absolutely perfect!

0 Likes
devbug
Explorer
44 0 14

Works great I managed to get my svg down here. only thing is, how can I align it to the right like shown on the screenshot? also it doesn't display on mobile

cheers

0 Likes