How to add show password feature in login and sign up page

[Abhishek_Singh]

Hi,

I am using default spotlight theme and want to add a show password feature in my login and sign up page. The links to the pages are mentioned below:

https://ausfin.in/account/login

https://ausfin.in/account/register

[flareAI · Accepted solution]

Hello @Abhishek_Singh,

I am Gina from flareAI app - free sales machine, and I am here to support you.

To add a show password feature to the login and sign-up page of your Shopify store using the default Spotlight theme, you can follow these steps:

1. Open your Shopify Admin Panel and go to the Online Store section.

2. Click on the Actions dropdown menu and select Edit code.

3. In the left-hand sidebar, navigate to the Snippets folder and click on the Add a new snippet button.

4. Name the new snippet "show-password.liquid" and paste the following code into the file:

<span class="show-password">
<input type="checkbox" class="show-password-toggle">
Show password
</span>
<script>
var showPasswordToggle = document.querySelector('.show-password-toggle');
var passwordFields = document.querySelectorAll('[type="password"]');
showPasswordToggle.addEventListener('change', function() {
for (var i = 0; i < passwordFields.length; i++) {
if (passwordFields[i].type === 'password') {
passwordFields[i].type = 'text';
} else {
passwordFields[i].type = 'password';
}
}
});
</script>

5. Save the new snippet.

6. In the left-hand sidebar, navigate to the Templates folder and click on the customers/login.liquid file.

7. Find the password input field and add the following code after it:

{% include 'show-password' %}

8. Save the customers/login.liquid file.

9. Repeat steps 6-8 for the customers/register.liquid file.

10. Preview your store and test the show password feature on the login and sign-up pages.

This code will add a "Show password" checkbox next to the password input field on the login and sign-up pages of your Shopify store. When the checkbox is checked, the password field will display the password in plain text, allowing the user to verify that they have entered it correctly. When the checkbox is unchecked, the password field will display masked characters, as usual.

Let me know if you have any further questions.

Gina

[flareAI · Accepted solution]

Hello @Abhishek_Singh,

I am Gina from flareAI app - free sales machine, and I am here to support you.

To add a show password feature to the login and sign-up page of your Shopify store using the default Spotlight theme, you can follow these steps:

1. Open your Shopify Admin Panel and go to the Online Store section.

2. Click on the Actions dropdown menu and select Edit code.

3. In the left-hand sidebar, navigate to the Snippets folder and click on the Add a new snippet button.

4. Name the new snippet "show-password.liquid" and paste the following code into the file:

<span class="show-password">
<input type="checkbox" class="show-password-toggle">
Show password
</span>
<script>
var showPasswordToggle = document.querySelector('.show-password-toggle');
var passwordFields = document.querySelectorAll('[type="password"]');
showPasswordToggle.addEventListener('change', function() {
for (var i = 0; i < passwordFields.length; i++) {
if (passwordFields[i].type === 'password') {
passwordFields[i].type = 'text';
} else {
passwordFields[i].type = 'password';
}
}
});
</script>

5. Save the new snippet.

6. In the left-hand sidebar, navigate to the Templates folder and click on the customers/login.liquid file.

7. Find the password input field and add the following code after it:

{% include 'show-password' %}

8. Save the customers/login.liquid file.

9. Repeat steps 6-8 for the customers/register.liquid file.

10. Preview your store and test the show password feature on the login and sign-up pages.

This code will add a "Show password" checkbox next to the password input field on the login and sign-up pages of your Shopify store. When the checkbox is checked, the password field will display the password in plain text, allowing the user to verify that they have entered it correctly. When the checkbox is unchecked, the password field will display masked characters, as usual.

Let me know if you have any further questions.

Gina

[Abhishek_Singh]

Hi @flareAI, 

Definitely it is working 😄. But can you also help me to align it right. See how it is looking:

https://ausfin.in/account/login

https://ausfin.in/account/register

I want to align it just below the password box.

[Abhishek_Singh]

Also instead of customers/login.liquid file in templates. I pasted the code {% include 'show-password' %} in main-login.liquid & main-register.liquid in sections in spotlight theme and it worked.

[Abhishek_Singh]

Hey @flareAI, 

Are you still there, as I’m trying to say that if you can help me to align the “show password” button just below the password box. Here are the links:

https://ausfin.in/account/login

https://ausfin.in/account/register

Thanks Bro 😄

[flareAI · Accepted solution]

Hi @Abhishek_Singh,

Happy to hear it worked!

To make the "Show Password" checkbox or toggle button appear just below the password text field, you can wrap them in a div element and use CSS to position it accordingly.

Here's an example:

1. Wrap the "Show Password" checkbox or toggle button and its label in a div element:

<div class="show-password-wrapper">
<span class="show-password">
<input type="checkbox" class="show-password-toggle">
Show password
</span>
</div>

2. Add some CSS to position the span element just below the password input field:

.show-password-wrapper {
position: relative;
}

.show-password {
position: absolute;
top: calc(100% + 5px);
left: 0;
}

Adjust the top value to control the distance between the password field and the "Show Password" checkbox or toggle button. You can also adjust the left value to change its horizontal position.

Hope this helps

Gina

[Allied]

It works! Thanks, however I had to use the "render" feature instead of "include"