Forgot your password not working with custom code

Shopify Discussion

Topic summary

Issue: A custom Shopify create/login page had a “Forgot password” link that didn’t reveal the recovery flow.

Diagnosis: The link existed but wasn’t configured to display the password recovery section.

Fix implemented (in main-login.liquid):

  • Add CSS (before the endstyle tag) to control visibility via the :target selector:
    • Hide #recover by default; show #recover when targeted; hide #login when #recover is targeted.
    • Minor styling for #RecoverEmail and .form__message.recover-success, including responsive tweaks.
  • Insert a recover_customer_password form (id=“recover”) immediately after
    to render the recovery UI and include a cancel link back to login.

Outcome: The original poster confirmed the solution worked; the issue is resolved.

Notes:

  • Code snippets are central to the fix; the solution depends on CSS :target behavior and adding the Shopify recover_customer_password form.
  • A follow-up suggestion recommended the Customer Account Deluxe app for advanced account page features (order history UI, wishlist, social login).
Summarized with AI on December 14. AI used: gpt-5.
2

Hi @Alykhan101,

Foladun here from the Customer Account Deluxe App team. :waving_hand:

The issue with the “Forgot Password” link was that while it was included, it wasn’t properly set up to show the recovery section.
I’ve added the necessary changes, so now clicking the “Forgot Password” link will display the recovery section as intended.

I’ll split the code across a couple replies to avoid hitting the post length limit.

Here’s the code you need to add in main-login.liquid to fix the Forgot password link:

Add this before the {%- endstyle -%} tag:

#recover {
display: none;
}

#recover:target {
display: flex;
}

#recover:target ~ #login {
display: none;
}

#RecoverEmail {
margin-bottom: 15px;
}
.form__message.recover-success {
gap: 6px;
line-height: 1.3;
}
.form__message.recover-success svg {
width: 40px;
}
@media screen and (min-width: 1024px){
.form__message.recover-success {
flex-direction: column;
}
.form__message.recover-success svg {
width: 26px;
}
}   
1 Like