AppsThemesSupport

customers/reset_password

The customers/reset_password template renders the password reset page, which hosts the form to reset the password for a customer account.

Location

The customers/reset_password template is located in the templates > customers directory of the theme:

└── theme
    ├── layout
    ├── templates
    |   └── customers
    |     ├── reset_password.liquid
    |     ...
    ...

Content

You should include the password reset form in your customers/account template or a section inside of the template.

The password reset form

The password reset form can be added to the form. Within the form tag block, you need to include the following:

Inputtypename
Emailtextemail
Verification codetextcode
Passwordpasswordpassword
Password confirmationpasswordconfirm_password

For example:

<form method="POST" action="{{ '/api/customers/password_reset_email' | add_root_url }}">
  <div>
    <input id="email" name="email" type="text" required pattern="[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?">
    <label for="email">Email</label>
  </div>
</form>

<form method="PATCH" action="{{ '/api/customers/password_reset' | add_root_url }}">
  <input name="email" type="hidden">
  <div>
    <input id="code" name="code" type="text" maxlength="6" required>
    <label for="code">Verification code</label>
  </div>
  <div>
    <input id="password" name="password" type="password" minlength="6" maxlength="16" pattern="[\s\S]{6,16}" required>
    <label for="password">Password</label>
  </div>
  <div>
    <input id="confirm-password" name="confirm_password" type="password" minlength="6" maxlength="16"
      pattern="[\s\S]{6,16}" required>
    <label for="confirm-password">Confirm password</label>
  </div>
  <button type="submit">Confirm</button>
</form>

Updated 10 months ago