View Password button

[UncleGym]

Hi all, 

I want to have a 'View Password' button on my login page https://unclegym.co.uk/account/login. 

Using Crave theme, so .json files.

Any help would be greatly appreciated, thank you! 

[Sweans · Accepted solution]

Hi @UncleGym ,

To add the "View Password" feature to your login page, some coding knowledge is required.

Please follow these steps:

1. In your Shopify admin, navigate to "Online Store" under Sales Channels. Click the three dots next to the theme you wish to edit, then select "Edit Code".

2. Locate the `main-login.liquid` file in the 'Sections' folder on the right.

Find the password input field as shown in the screenshot.

3. Add the following `<a>` tag where you want the option to show or hide the password:

<a onclick="togglePassword()">Show/Hide</a>

4. Finally, include this script in the same file within a `<script>` tag:

<script>
  function togglePassword() 
  { 
    const passwordField = document.getElementById('CustomerPassword');
    if(passwordField.type === 'password')
     {
       passwordField.type = 'text' ;
     }
     else
     {
       passwordField.type = 'password'; 
     }
    }
 </script> 

Please refer to the screenshot for more details.

If you need further assistance, feel free to ask

Thank you,
Sweans

[UncleGym]

Thank you so much!