How to add a Password Strength Checker on register page in Shopify
Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.
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.
- 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.1234{% 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.12345678<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.12345<script>$(function(){$('#password').pwstrength(); //With password is ID name of the input type password field.});</script>
You are done.
