How to Make Name Fields Not Updatable in My Account

To make the first and last name fields uneditable in the Profile tab of My Account, follow these steps:

Step 1: Add the style and id attributes to each input element.

Add style="pointer-events: none;" id="given-name" to the first-name input and a similar id to the last-name input. Example initial fields in the Piano ID profile in My Account template:

HTML

<label class='piano-field'>
    <t>First name</t> 
    <input class='slate-input' fieldProfileFirstName autocomplete='given-name'>
  </label>

  <label class='piano-field'>
    <t>Last name</t>
    <input class='slate-input' fieldProfileLastName autocomplete='family-name'>
  </label>

After adding the attributes:

HTML

<label class='piano-field'>
    <t>First name</t> 
    <input class='slate-input' fieldProfileFirstName autocomplete='given-name' style="pointer-events: none;" id="given-name">
  </label>

  <label class='piano-field'>
    <t>Last name</t>
    <input class='slate-input' fieldProfileLastName autocomplete='family-name' style="pointer-events: none;" id="family-name">
  </label>

Step 2: Disable the input elements via script.

At the end of the Piano ID profile in My Account template, add a custom script that disables the inputs with those ids. Example:

XML

<custom-script>
  var interval = setInterval(function() {
  	if(document.getElementById("given-name") != null) {
  		clearInterval(interval);
        document.getElementById("given-name").disabled = true;
        document.getElementById("family-name").disabled = true;
  	}
  }, 50); 
</custom-script>

After applying this, users cannot edit their first or last name in the Profile tab of My Account.

Last updated: July 30, 2026