How to require a strong password on the account activation page for your Shopify store
Help secure your customer's information by requiring strong passwords on your online store
How to require a strong password on the account activation page
If you manually send account invites to customers, or use an app to require account approval or email verification, then you might want to edit the account activation form to require customers to use a strong password when they activate their account.
The Customer Fields app allows you to easily collect customer information in a variety of different ways, including embedded forms and a JavaScript API. Check it out with a 14-day free trial.
If you use Customer Fields and don’t need account approval or email verification, then refer to How to require a strong password using regular expressions to learn how to require strong passwords directly through the app.
Step 1: Find the account activation form
Depending on your theme, the account activation form will be in one of the following locations:
- The customers/activate_account template
- A section referenced within the
customers/activate_accounttemplate
The form will look something like this:
{% form 'activate_customer_password' %}
{{ form.errors | default_errors }}
<div class="password">
<label for="password">Password</label>
<input type="password" name="customer[password]">
</div>
<div class="password_confirm">
<label for="password_confirmation">Password Confirmation</label>
<input type="password" name="customer[password_confirmation]">
</div>
<div class="submit">
<input type="submit" value="Activate account">
<span>or</span>
<input type="submit" name="decline" value="Decline invitation">
</div>
{% endform %}
Your form code may look different than the example above but should begin with {% form 'activate_customer_password' %} and end with {% endform %}.
Step 2: Update the account activation form
Once you’ve found the account activation form, you need to update the password and password confirmation inputs with the following attributes:
pattern="(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{8,20}$"title="Password must contain at least one number, one symbol, and one uppercase letter"
For example, using the inputs from the sample in Step 1:
<div class="password">
<label for="password">Password</label>
<input
type="password"
name="customer[password]"
pattern="(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{8,20}$"
title="Password must contain at least one number, one symbol, and one uppercase letter"
> </div>
<div class="password_confirm">
<label for="password_confirmation">Password Confirmation</label>
<input
type="password"
name="customer[password_confirmation]"
pattern="(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{8,20}$"
title="Password must contain at least one number, one symbol, and one uppercase letter"
>
</div>
The pattern attribute contains a regular expression that checks whether the input contains at least one number, one symbol, and one uppercase letter. The title attribute is a message that’s shown when the form is submitted and the pattern isn’t satisfied.
Note: The values for these attributes are just examples and can be customized for your own criteria.
Get the customer data you need to sell more.
Customer Fields is a toolkit with everything you need to understand your customers and sell them products they'll love.
Start 14-day trial