Customizing the Change Password page (/u/reset-password) language

Problem statement

We use new universal login and want to set the user-preferred language in the initial login/forgot password email. We stored ui_locales in user_metadata and customized the email template with the ui_locales parameter to form the URL link to the u/reset-password page. However, it’s not working as we expected.


The issue is that the link returned in the {{ url }} variable of the Change Password email template ends with a hash mark (#). This prevents customers from easily adding the ui_locales query string parameter to the end of the link determined by the language used in the email template stored in the user’s metadata. Therefore, the browser’s Accept-Language header will take precedence and possibly display a different language on the /u/reset-password page than what’s on the login page and email template.


Using built-in methods of Liquid Syntax, you can remove characters from a string. remove – Liquid template language

<a href="{{ url | remove: "#" }}&ui_locales=fr-FR">click here</a> 

The above code removes the trailing hash mark and appends the ui_locales parameter onto the URL, setting the language of the /u/reset-password page to the same language used in the email template.



Also, as you are in the Change Password Template, you can get the user’s metadata to dynamically set the language, as it follows:

<a href="{{ url | remove: "#" }}&ui_locales={{user.user_metadata.lang}}">click here</a>

In this example the user must have set a user metadata like this one:

  "lang": "fr-FR"

So, in this case, when the users click in the link, it will redirect them to a login with their preferred language.