How can I add a 'reset password' link to the login page of a Modular theme store?

Store Design
, ,
1

I am trying to add a reset password link to the login page of a shopify store, it is running the Modular theme.

I have gone through this documentation and tried to follow accordingly without success:
https://shopify.dev/docs/themes/architecture/templates/customers-login#provide-a-forgot-your-password-option

Can anyone help me with adding a reset password link to this page, the stores theme templates are all over the place but I believe this is the current code being used:


  

    {% comment %}
      If a user has successfully requested a new password, the form.posted_successfully? variable
      is set to true within the 'recover_customer_password' form only. Within that form you'll see
      the variable 'resetPassword' set to true, which is used to initialize timber.resetPasswordSuccess().
    {% endcomment %}
    

      {{- 'customer.recover_password.success' | t -}}
    

  

  

    

      {%- form 'customer_login' -%}
        

          

{{ 'customer.login.title' | t }}

          
            {{- form.errors | default_errors -}}
          

          
            
            
          

          {% if form.password_needed %}
            
              
              
            

          {% endif %}

        
 

        
      {%- endform -%}

      {%- if shop.checkout.guest_login -%}
        {%- form 'guest_login' -%}
          
        {%- endform -%}
      {%- endif -%}

      

        {% if shop.customer_accounts_enabled %}
          {{ 'customer.link.sign_up' | t }}
        {% endif %}
        {% if form.password_needed %}
          {{ 'customer.login.forgot_password' | t }}
        {% endif %}
      

    

    
      

        

{{ 'customer.recover_password.title' | t }}

        

{{ 'customer.recover_password.subtext' | t }}

        
          {%- form 'recover_customer_password' -%}
            

              {{ form.errors | default_errors }}

              {%- if form.posted_successfully? -%}
                {%- assign resetPassword = true -%}
              {%- endif -%}

              

                
                
              

            

            
              

              

                {{ 'customer.recover_password.cancel' | t }}
              

            

          {%- endform -%}

image.png
image.png1685×913 20.1 KB

2

Hey, @biznazz101

I’m not formally trained in code to provide you with an exact solution to add a reset password link to your login page. However, I’m confident one of our Shopify experts would be able to accomplish this at a reasonable price.

Just wanted to share this as an option in case you are unable to find a coding solution in your thread.

3

Hi @biznazz101

It looks like you’ve already implemented the “Forgot your password?” link in your code. The link is displayed when the form.password_needed condition is true,

However, if the link is not working, you may need to implement the JavaScript that will handle the click event for the “Forgot your password?” link. Add the following JavaScript code to your theme’s JavaScript file or inside a <script> tag on the same page:

document.addEventListener('DOMContentLoaded', function() {
  var recoverToggle = document.querySelector('.js-recoverToggle');
  var recoverForm = document.querySelector('.js-recoverForm');
  var loginForm = document.querySelector('.js-loginForm');
  var recoverCancel = document.querySelector('.js-recoverCancel');
  
  function showRecoverForm() {
    loginForm.style.display = 'none';
    recoverForm.style.display = 'block';
  }
  
  function hideRecoverForm() {
    recoverForm.style.display = 'none';
    loginForm.style.display = 'block';
  }
  
  if (recoverToggle) {
    recoverToggle.addEventListener('click', function(event) {
      event.preventDefault();
      showRecoverForm();
    });
  }
  
  if (recoverCancel) {
    recoverCancel.addEventListener('click', function(event) {
      event.preventDefault();
      hideRecoverForm();
    });
  }
});

This code will listen for the click event on the “Forgot your password?” link, and it will hide the login form and show the password reset form when the link is clicked. It also listens for the click event on the “Cancel” link in the password reset form, and it will hide the password reset form and show the login form when the “Cancel” link is clicked.

4

As shown in screenshot above no “forgot password” or guest login options are displayed despite the code that is included. I did try adding the script but it did not have an effect.

Is there a way I can delete this and make it how a login page would traditionally display where the links are shown unconditionally on the login page like this? Thanks for your help!

customer-login
customer-login2410×2040 31.5 KB

5

Update: I think I have got the issue sorted out by copying the template/snippet files of another theme over to replace this one but I’m not sure what I was doing wrong or how I could of fixed this.