Confirm password field when creating an account

Wiltshire_Scent
Tourist
7 1 2

Hi, 

I would like to add in a confirm password field (I am surprised this isn't a standard feature) into the create account section. 

Confirm password.PNG

I am using the Dawn theme.

Thanks, 

Alex

Replies 12 (12)

Olivia
Shopify Staff
1717 146 309

Hey, @Wiltshire_Scent!

Welcome to Shopify Community.

I was happy to do some research for you, and I found this third-party article on implementing a confirm password field in the customer registration page. Before attempting code changes, it's always a good idea to back up your theme and making sure you are comfortable with code changes. 

If so, this article is a great reference point! I trust that helps, but let us know if you have further questions.

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

DabsDesign
Shopify Partner
46 1 10

Hello @Wiltshire_Scent  to enter this information is very simple. You can copy the style of the fields that Shopify itself suggests: https://shopify.dev/themes/customer-engagement/additional-customer-information


It can also be done the way this tutorial indicates. See below:

 

  1. From your Shopify admin, to Online Store > Theme.
  2. Find the theme you want to edit and then click Action > Edit code.
  3. In the Templates section, click customers/register.liquid to open the file in the online code editor.
  4. In the online code editor of register page, you add a new field

 

<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

 

<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>​

 

 

6. Click Save and you are done.

 

Don't forget to insert the Jquery CDN script on this page (in case there is an error in your console).

It can be inserted right at the top of the page. And that's it. You can customize the alert message however you like. If anyone still has questions, reply here and I'll try to help.

 

----------------------------------

 

PT-BR: Português Brasileiro

 

Olá @Wiltshire_Scent para inserir essa informação é bem simples. Você pode copiar o estilo dos campos que a própria Shopify sugere: https://shopify.dev/themes/customer-engagement/additional-customer-information

 

Também pode ser feito da maneira que este tutorial indica. Segue abaixo:

 

  1. From your Shopify admin, to to Online Store > Theme.
  2. Find the theme you want to edit and then click Action > Edit code.
  3. In the Templates section, click customers/register.liquid to open the file in the online code editor.
  4. In the online code editor of register page, you add a new field

 

<input type="password" value="" name="customer[password_confirmation]" id="confirm-password" class="password text" size="30" />

 

 

      5. Add the javascript code to the end of the file 

 

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

 

     

     6. Click Save and you are done.

 

Não se esqueça de inserir nessa página (caso ocorra um erro em seu console) o script do Jquery CDN. 

Pode ser inserido bem no começo da página. E é isto. Você poderá personalizar a mensagem de alerta da forma que desejar. Se alguém ainda tiver dúvidas, responde aqui que tentarei ajudar.

DABS Design - Sua Agência Shopify no Brasil. Somos especialistas em Shopify e Shopify Plus, oferecendo consultoria, suporte, criação, integração de Apps e desenvolvimento para sua loja virtual. Conte com uma agência Shopify Expert Partner para potencializar o seu negócio! Entre em contato conosco. Transforme sua loja com os especialistas em Shopify no Brasil!
Olivia
Shopify Staff
1717 146 309

Thank you so much for your incredibly detailed response, @DabsDesign.

 

Thank you for taking the time to share this solution with our readers, I trust this will be very helpful.

 

Please make sure to accept the appropriate response as an accepted solution if it works for you, @Wiltshire_Scent!

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

BB_Tech
Excursionist
106 1 6

This worked with the popup but didnt prevent the actual account creation

Olivia
Shopify Staff
1717 146 309

Thank you for leaving your feedback on this thread, @BB_Tech.

 

To clarify, you implemented the code changes above and have a 'confirm password' field? However, an account is created, even if the password isn't confirmed? I'm not sure if I understand entirely, so please do share any context.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

BB_Tech
Excursionist
106 1 6

Yes, I will still get a pop up that reads " passwords dont match", but it will not prevent account creation

Olivia
Shopify Staff
1717 146 309

Thank you so much for the context, @BB_Tech.

 

Based on my research, this code should definitely prevent that using the additional jQuery, however, I will let our code experts chime in to provide further guidance and advice around resolving this for you. I welcome both, @DabsDesign, and other community members to share their feedback here.

 

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

DabsDesign
Shopify Partner
46 1 10

@BB_Tech try this code:

 

<script>
  $(function(){
    $('#create_customer').submit(function(e) {     
      if ($('input[name="customer[password]"]').val() != $('input[name="customer[password_confirmation]"]').val()) {
        alert('Passwords do not match.');
        return false;
      }
    });
  });
</script>

 

With this change, the script will check if the passwords match before allowing the form to be submitted. If the passwords do not match, the user will see an alert message and the form will not be submitted. If the passwords match, the user can proceed and the action on the "create_customer" button will be executed normally.

 

@Olivia thanks for reaching us!

DABS Design - Sua Agência Shopify no Brasil. Somos especialistas em Shopify e Shopify Plus, oferecendo consultoria, suporte, criação, integração de Apps e desenvolvimento para sua loja virtual. Conte com uma agência Shopify Expert Partner para potencializar o seu negócio! Entre em contato conosco. Transforme sua loja com os especialistas em Shopify no Brasil!
BB_Tech
Excursionist
106 1 6

Okay the dialog box pops up now but again after I click okay on the dialog pop up box the screen refreshes to the next screen

DabsDesign
Shopify Partner
46 1 10

The better way for you, is to contract a Shopify Expert to do this job. Fell free to ask for us a quote: shopify-expert@dabsdesign.com.br

DABS Design - Sua Agência Shopify no Brasil. Somos especialistas em Shopify e Shopify Plus, oferecendo consultoria, suporte, criação, integração de Apps e desenvolvimento para sua loja virtual. Conte com uma agência Shopify Expert Partner para potencializar o seu negócio! Entre em contato conosco. Transforme sua loja com os especialistas em Shopify no Brasil!
zhicheng1
Shopify Partner
28 2 7

I implemented this code but the page just automatically submits on an endless loop.

michael-helium
Shopify Expert
366 5 179

As you can see on this thread, the challenge is not adding the password confirmation field but rather how to prevent account creation.

 

For the simplest no-code solution, check out the Customer Fields app. You can use the app's Lite plan to create a password confirmation field on your registration form. Other features on the Lite plan include:

  • Require email verification
  • Allow customers to edit their own name, email, etc.
  • Email notifications for staff for new or edited customers

Michael, COO @ Helium
- Customer Fields ✪✪✪✪✪ (346 reviews)
- Meteor Mega Menu ✪✪✪✪✪ (265 reviews)