How to add a Password Strength Checker on register page in Shopify

Validating password against minimum length is one thing but some time it’s good to give user a visual clue of how good his password is. This article will let you know how to add a password strength checker on register page in Shopify. It will helps your customers have a strong password to protect themselves from hackers.

DEMO

• From your Shopify admin, go to Online Store > Themes.
• Find the theme you want to edit, and then click Actions > Edit code.
• In the Layout section, click theme.liquid to open the file in the online code editor.
• Find </head> and paste the below code just above it.
  
  {% if template contains 'customers/register' %} {{ '//www.huratips.com/scripts/jquery.pwstrength/jquery.pwstrength.min.js' | script_tag }} {{ '//www.huratips.com/scripts/jquery.pwstrength/jquery.pwstrength.min.css' | stylesheet_tag }} {% endif %}

  1 2 3 4

  {% if template contains 'customers/register' %} {{ '//www.huratips.com/scripts/jquery.pwstrength/jquery.pwstrength.min.js' | script_tag }} {{ '//www.huratips.com/scripts/jquery.pwstrength/jquery.pwstrength.min.css' | stylesheet_tag }} {% endif %}

• In the Templates directory, click customers/register.liquid.
• Find HTML input type password field. After that, add the data-indicator attribute on it and a div tag below it.
  
  <div id="password-wrapper" class="clearfix large_form"> <label for="password" class="label">Password</label> <input type="password" value="" name="customer[password]" id="password" class="password text" size="30" data-indicator="huratips-pwindicator" /> <div id="huratips-pwindicator"> <div class="bar"></div> <div class="label"></div> </div> </div>

  1 2 3 4 5 6 7 8

  <div id="password-wrapper" class="clearfix large_form">         <label for="password" class="label">Password</label>         <input type="password" value="" name="customer[password]" id="password" class="password text" size="30" data-indicator="huratips-pwindicator" />         <div id="huratips-pwindicator">           <div class="bar"></div>           <div class="label"></div>         </div> </div>

  
  
  To finished you add the below Javascript code in end this file.
  <script> $(function(){ $('#password').pwstrength(); //With password is ID name of the input type password field. }); </script>

  1 2 3 4 5

  <script>   $(function(){     $('#password').pwstrength();  //With password is ID name of the input type password field.   }); </script>

You are done.

DEMO