Forgot your password not working with custom code

[Alykhan101]

Hello Ive tried a custom code for the create account page for my site. The only problem im facing is the forgot password button which is not leading me to the recovery page. I tried everything but it still didnt work. Could anyone help with it and guide me on how to solve this.
Thank you
https://nickdrishinski.com/blog/redesign-customers-login-page-on-shopify/
This is the link i received the code from

4acb3b-d1.myshopify.com
This is the link to my site

[Deluxe-Foladun · Accepted solution]

Hi @Alykhan101,

Foladun here from the Customer Account Deluxe App team. 👋

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;
}
}   

[Deluxe-Foladun]

Add the following code right after the <div class="form-container sign-in-container"> tag:

{%- form 'recover_customer_password', novalidate: 'novalidate', id: 'recover' -%}
  {% assign recover_success = form.posted_successfully? %}
  <h1 class="padding-bottom">Reset your password</h1>
  <p>
    We will send you an email to reset your password
  </p>
  {{ form.errors | default_errors }}
  <input name="email" id="RecoverEmail" type="email" placeholder="Email" />
  <button>Submit</button>
  <a href="#login">
    Cancel
  </a>
  {%- endform -%}

[Alykhan101]

Hey @Deluxe-Foladun,
This worked like a charm and solved my issue.
Thank you so much for replying and helping!!

[Deluxe-Foladun]

Hi @Alykhan101,
I'm really glad it worked 😊

If you're looking to add more advanced customizations to your account page, I recommend checking out our Customer Account Deluxe app. It offers a modern, customizable customer account page, which includes:

• A sleek, user-friendly order history section
• A wishlist feature for customers to save favorite items
• Social login for quick and seamless access to accounts
• And much more!

You can explore the app here: Customer Account Deluxe

Feel free to reach out if you have any more questions or need further assistance. Always happy to help!

Best,
Foladun | Customer Account Deluxe