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

Shopify Discussion

Topic summary

A Shopify store owner using the Spotlight theme wants to add a “show password” toggle feature to login and signup pages.

Solution Provided:

  • Create a new snippet file called “show-password.liquid” with JavaScript code that toggles password visibility
  • Include this snippet in the password input sections (main-login.liquid and main-register.liquid in the Sections folder for Spotlight theme)
  • The feature adds a checkbox that, when checked, displays the password in plain text instead of masked characters

Follow-up Issue:
The user successfully implemented the feature but needed help with alignment—the “show password” checkbox wasn’t positioned directly below the password field.

Alignment Fix:

  • Wrap the checkbox and label in a <div> element with class “show-password-wrapper”
  • Apply CSS positioning (relative for wrapper, absolute for checkbox) to place it just below the password input
  • Adjust top and left values to control spacing

Note: One user mentioned needing to use the “render” feature instead of “include” for the snippet to work properly.

The discussion reached a resolution with the feature working successfully after alignment adjustments.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

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

1 Like
2

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:


Show password

  1. Save the new snippet.

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

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

{% include 'show-password' %}

  1. Save the customers/login.liquid file.

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

  3. 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

1 Like
3

Hi @flareAI ,

Definitely it is working :grinning_face_with_smiling_eyes: . 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.

4

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.

5

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 :grinning_face_with_smiling_eyes:

1 Like
6

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:

Show password
  1. 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

1 Like
7

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