Add eye icon into password field

Shopify Discussion
1

Hey i wanted to ask, how can i add an eye icon into the password field of the login and register page?

site link: https://f43459.myshopify.com/

theme: dawn theme

thanks in advance

2

Hey Rylie,

You can achieve this by modifying your password fields in code.
Depending on the theme, the file should be called something with login (e.g. Dawn uses “main-login.liquid”)

This is the code you want to modify:


  
  
  
  
  ️

In this example, the :eye: and :see_no_evil_monkey: emojis are being used as stand-ins for open and closed eye icons. You should replace these with your actual icons.

When the eye button is clicked, the JavaScript code checks if the password input field’s type is currently ‘password’. If it is, it changes it to ‘text’ (which makes the password visible), and changes the eye icon to the “closed” version. If the type is not ‘password’, it changes it back to ‘password’ and changes the eye icon back to the “open” version.

This message assumed you are comfortable making code changes. Otherwise, I can break it down a little more. :slightly_smiling_face:

Best,
Flo

3

hey thanks for coming back to me. if u could break it down a bit more it would be much appreciated

4

i managed to add the icon to the field, but the field’s size now differs from the other one. please check attatched image

Screenshot 2023-06-21 at 1.19.50 PM.png
Screenshot 2023-06-21 at 1.19.50 PM.png884×276 8.04 KB

5

Hi @rylie1 ,

Thanks for reaching out here!

I found a number of tutorials and accepted solutions here on Community and some of the most simple ones are shared **here **and here.

Keep in mind before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes and start again if you need to.

If you don’t feel comfortable editing the template code yourself, you can always reach out to our Support team. Our team may be able to customise this for you if you use Shopify free theme and your store has enough complimentary design time left.

You can reach out to our Contact Us page on this link. Then log in to your store. It will allow us to verify you as the store owner securely. Once you have successfully logged in, you should be able to reach out to a Support Advisor and discuss the customisation request as there are specific customisations supported.

Otherwise, you can post a job on the Shopify Experts Page and see what feedback and quotes you get.