Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi, I am having some trouble with the account self-registration form on a newly created shop: fields dont repopulate after an incomplete form is submitted. The shop is using the default theme, unedited, so I am reasonably sure this shouldn't be a theme/code problem.
Steps to reproduce:
The template for that page contains this liquid code:
<input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">
It seems like "form.first_name" isn't set.
Is this a bug in Shopify itself? Or is something else going on?
Thanks in advance for thoughts or advice!
Just following up with this - I have continued to tinker, but I still cannot get registration forms to repopulate. Other forms, yes: i.e. the newsletter form in the footer of the (un-edited) "debut" theme repopulates fine if an erroneous email address is entered. But no matter what I do, the /account/register page will not do the same. Its a problem because:
- someone enters an email address, but no password, and submits a form;
- The resulting page displays the form containing the "Password cant be blank" error (only). But, the email address is also now empty;
- Without doing anything, if I re-submit, I now get two errors "Password can't be blank" and Email can't be blank";
In fact, if a user submits the form containing any error at all (field missing; password too short; etc.), all data is lost and they need to start again.
Just to reiterate, this is with the stock, unedited "debut" theme.
Is there a way to submit this to the Shopify Team as a bug other than tagging this with "bug report" and hoping it gets found by their team?
Thanks
Did you find a solution for this? We are currently facing the same issue with Expanse theme (2.0).
You can even reproduce the issue at the Expanse demo shop.
We have read any documentation regarding customer registration and checked the implementation of Expanse meticulously -> they implemented it exactly like shopify recommends...
This is really bad UX - like really bad.
We're facing this exact same issue today even on unmodified official themes
Add this script to main-register.liquid above schema code
<script>
document.addEventListener("DOMContentLoaded", function () {
let firstNameInput = document.getElementById("RegisterForm-FirstName");
let lastNameInput = document.getElementById("RegisterForm-LastName");
let emailInput = document.getElementById("RegisterForm-email");
// Function to restore input values from localStorage
function restoreValue(input, key) {
if (sessionStorage.getItem("formSubmitted") && localStorage.getItem(key)) {
input.value = localStorage.getItem(key);
}
}
// Function to save input values to localStorage
function saveValue(input, key) {
input.addEventListener("input", function () {
localStorage.setItem(key, this.value);
});
}
// Restore values on reload after submission
restoreValue(firstNameInput, "firstname");
restoreValue(lastNameInput, "lastname");
restoreValue(emailInput, "email");
// Reset sessionStorage after restoring values
if (sessionStorage.getItem("formSubmitted") === "true") {
sessionStorage.removeItem("formSubmitted");
} else {
// Clear stored values on manual reload
localStorage.removeItem("firstname");
localStorage.removeItem("lastname");
localStorage.removeItem("email");
}
// Save values when user types
saveValue(firstNameInput, "firstname");
saveValue(lastNameInput, "lastname");
saveValue(emailInput, "email");
// Detect form submission
document.getElementById('create_customer').addEventListener("submit", function () {
sessionStorage.setItem("formSubmitted", "true");
});
});
</script>
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025