How to add confirm password field in Shopify registration page
Shopify helps you created a registration page for users to enter their information and create their account. The default registration page of Shopify has only a password field. As the contents of the password that the user is going to set are hidden, there are chances of mistakes. This can cause troubles for the user later if they try to login with the wrong password.
A confirm password field is a good idea to avoid this hassle. If you place a confirm password field in the registration page, users will not make any mistake while setting the password as both fields should match.
In this article, I tell you a code below that you can add to your design and that will add a confirm password field below the password field in Shopify registration page. This will compare the two fields, i.e. the first password entry and the confirm password entry, and will proceed with the remaining registration process if both match. Use this code and save the users from making any mistakes while setting the password.
- From your Shopify admin, to to Online Store > Theme.
- Find the theme you want to edit and then click Action > Edit code.
- In the Templates section, click customers/register.liquid to open the file in the online code editor.
- In the online code editor of register page, you add a new field1<input type="password" value="" name="customer[password_confirmation]" id="confirm-password" class="password text" size="30" />
- Add the javascript code to the end of the file.12345678910<script>$(function(){$('#create_customer').submit(function(e) {if ( $('input[name="customer[password]"]').val() != $('input[name="customer[password_confirmation]"]').val()) {e.preventDefault();alert('Passwords do not match.');}});});</script>
- Click Save and you are done.
Attention: Load the jQuery library before this code.
Hello, I am trying to follow your tutorial, and I think it is a good solution, but when I add the code and save, I do not see that the view is modified, I have modified other pages and I see the changes,
I have removed the original password element and the change is not seen in the view, delete the browser cahe and nothing knows what may be happening