title: Display the register form instead of a login form
body: <p>I'm using a Shopify theme called Basal. At the top of my site there is a login/register link. When you press the "login/register" link the login widget pops out from the side (ex: <a href="https://new-basel2.myshopify.com/?key=f7fb74c55f142b94a98cab2918807f42f8f3e861bf52cd098b74bd9d13416020" rel="nofollow noreferrer">https://new-basel2.myshopify.com/?key=f7fb74c55f142b94a98cab2918807f42f8f3e861bf52cd098b74bd9d13416020</a>)</p>
  
  <p>The form automatically shows the login side first, and then you can press the "create an account" link at the bottom of the form and it will show the register side while hiding the login side.</p>
  
  <p>My question is how can I show the register side first when some presses the login/register button? Any help would be appreciated.</p>
  
  <p>I've tried to mess around with the element "register_sidediv", and use the "showFormLogin" and "hideFormLogin" functions but nothing has worked.</p>
  
  <p>Here are the two files associated with the login/register side popup</p>
  
  <p>login_side.liquid -
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{%- assign gl_shopify_error = false -%}
  &lt;div class="login-form-side"&gt;
     &lt;div class="widget-heading"&gt;
        &lt;h3 class="widget-title"&gt;{{ 'general.login_popup.title' | t }}&lt;/h3&gt;
        &lt;a href="#" class="widget-close"&gt;{{ 'general.login_popup.close' | t }}&lt;/a&gt;
     &lt;/div&gt;
     &lt;div class="login-form"&gt;
        &lt;div class="shopify-message resetSuccessside" style="display:none;"&gt;{{ 'customer.recover_password.success' | t }}&lt;/div&gt;
        &lt;p class="text_content_success resetSuccessside" style="display:none;"&gt;{{ 'customer.recover_password.content_success' | t }}&lt;/p&gt;
        &lt;ul id="gl_shopify_errorside" class="shopify-error" style="display:none;"&gt;
           &lt;li class="html_li" id="jas_html_frmside"&gt;&lt;/li&gt;
        &lt;/ul&gt;
        {%- form 'customer_login', id: "customer_login_side",class:'login shopify-form shopify-form-login' -%}
           {%- if form.errors -%}
              {%- assign gl_shopify_error = true -%}
              {%- for field in form.errors -%}
                 {%- if field == 'form' -%}
                    {%- assign error_html = form.errors.messages[field] -%}
                 {%- else -%}
                    {%- assign error_html = form.errors.translated_fields[field] | append:form.errors.messages[field] -%}
                 {%- endif -%}
              {%- endfor -%}
           {%- endif -%}
           &lt;p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide"&gt;
              &lt;label for="usernameside"&gt;{{ 'customer.login.email' | t }} &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
              &lt;input type="text" class="shopify-Input shopify-Input--text input-text{%- if form.errors contains 'email' %} input--error{%- endif -%}" name="customer[email]" id="usernameside" value=""&gt;
           &lt;/p&gt;
           {%- if form.password_needed -%}
              &lt;p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide"&gt;
                 &lt;label for="passwordside"&gt;{{ 'customer.login.password' | t }} &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                 &lt;input class="shopify-Input shopify-Input--text input-text{%- if form.errors contains 'password' %} input--error{%- endif -%}" type="password" name="customer[password]" id="passwordside"&gt;
              &lt;/p&gt;
              &lt;p class="shopify-LostPassword lost_password"&gt;
                 &lt;a href="javascript:void(0)" onclick="showRecoverPasswordFormSide();return false;"&gt;{{ 'customer.login.forgot_password' | t }}&lt;/a&gt;
              &lt;/p&gt;
           {%- endif -%}
           &lt;p class="form-row"&gt;
              &lt;input type="submit" class="shopify-Button button" name="login" value="{{ 'customer.login.sign_in' | t }}"&gt;
           &lt;/p&gt;
        {%- endform -%}
  
           &lt;div id="register_sidediv" style="display: none"&gt;
              {%- form 'create_customer',id:'register_side',class:'login shopify-form shopify-form-login' -%}
                 {%- if form.errors -%}
                    {%- assign gl_shopify_error = true -%}
                    {%- for field in form.errors -%}
                       {%- if field == 'form' -%}
                          {%- assign error_html = form.errors.messages[field] -%}
                       {%- else -%}
                          {%- assign error_html = form.errors.translated_fields[field] | append:form.errors.messages[field] -%}
                       {%- endif -%}
                    {%- endfor -%}
                 {%- endif -%}
                 &lt;p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide"&gt;
                    &lt;label for="FirstNamereg"&gt;{{ 'customer.register.first_name' | t }}&lt;/label&gt;
                    &lt;input type="text" name="customer[first_name]" id="FirstNamereg"{%- if form.first_name %} value="{{ form.first_name }}"{%- endif %} autofocus&gt;
                 &lt;/p&gt;
                 &lt;p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide"&gt;
                    &lt;label for="LastNamereg"&gt;{{ 'customer.register.last_name' | t }}&lt;/label&gt;
                    &lt;input type="text" name="customer[last_name]" id="LastNamereg"{%- if form.last_name %} value="{{ form.last_name }}"{%- endif -%}&gt;
                 &lt;/p&gt;
                 &lt;p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide"&gt;
                    &lt;label for="reg_emailreg"&gt;{{ 'customer.register.email' | t }} &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;input type="email" class="shopify-Input shopify-Input--text input-text{%- if form.errors contains 'email' %} input--error{%- endif -%}" name="customer[email]" id="reg_emailreg"{%- if form.email %} value="{{ form.email }}"{%- endif -%}&gt;
                 &lt;/p&gt;
                 &lt;p class="shopify-FormRow shopify-FormRow--wide form-row form-row-wide"&gt;
                    &lt;label for="reg_passwordreg"&gt;{{ 'customer.register.password' | t }} &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;input type="password" class="shopify-Input shopify-Input--text input-text{%- if form.errors contains 'password' %} input--error{%- endif -%}" name="customer[password]" id="reg_passwordreg" required="required"&gt;
                    &lt;div class="shopify-password-strength" aria-live="polite"&gt;&lt;/div&gt;
                 &lt;/p&gt;
                 &lt;p class="shopify-FormRow form-row"&gt;          
                    &lt;input type="submit" class="shopify-Button button" name="register" value="{{ 'customer.register.submit' | t }}"&gt;
                 &lt;/p&gt;
              {%- endform -%}
          &lt;/div&gt;
         &lt;div id="recover_passwordside" style="display: none"&gt;
           {%- form 'recover_customer_password',id:'reset_password_side', class:'shopify-ResetPassword lost_reset_password' -%}
              &lt;p class="gl_mb_0 gl_first"&gt;{{ 'customer.recover_password.subtext' | t }}&lt;/p&gt;
              {%- if form.posted_successfully? -%}
                 {%- assign reset_success = true -%}
              {%- endif -%}
              {%- if form.errors -%}
                 {%- assign gl_shopify_error = true -%}
                 {%- for field in form.errors -%}
                    {%- if field == 'form' -%}
                       {%- assign error_html = form.errors.messages[field] -%}
                    {%- else -%}
                       {%- assign error_html = form.errors.translated_fields[field] | append:form.errors.messages[field] -%}
                    {%- endif -%}
                 {%- endfor -%}
              {%- endif -%}
              &lt;p class="shopify-form-row shopify-form-row--first form-row form-row-first"&gt;
                 &lt;label for="RecoverEmailside"&gt;{{ 'customer.recover_password.email' | t }}&lt;/label&gt;
                 &lt;input type="email" value="" name="email" id="RecoverEmailside" class="shopify-Input shopify-Input--text input-text" autocorrect="off" autocapitalize="off"&gt;
              &lt;/p&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;p class="shopify-form-row form-row"&gt;
                 &lt;input type="submit" class="shopify-Button button" value="{{ 'customer.recover_password.submit' | t }}"&gt;
                 &lt;button type="button" onclick="hideRecoverPasswordFormSide();return false;" class="shopify-Button button"&gt;{{ 'customer.recover_password.cancel' | t }}&lt;/button&gt;
              &lt;/p&gt;
           {%- endform -%}
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="register-question"&gt;
        &lt;span class="create-account-text"&gt;{{ 'general.login_popup.account_text' | t }}&lt;/span&gt;
        &lt;p&gt;{{ settings.registration_text }}&lt;/p&gt;
        &lt;a class="btn btn-style-link" href="/account/register" id="hideFormLogin" onclick="hideFormLogin();return false;"&gt;{{ 'general.login_popup.register' | t }}&lt;/a&gt;
        &lt;a class="btn btn-style-link" href="/account/login" id="showFormLogin" onclick="showFormLogin();return false;" style="display:none"&gt;{{ 'general.login_popup.login' | t }}&lt;/a&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    /*
      Show/hide the recover password form when requested.
    */
    function showRecoverPasswordFormSide() {
      document.getElementById('recover_passwordside').style.display = 'block';
      document.getElementById('customer_login_side').style.display='none';
    }
  
    function hideRecoverPasswordFormSide() {
      document.getElementById('recover_passwordside').style.display = 'none';
      document.getElementById('customer_login_side').style.display = 'block';
    }
    function hideFormLogin() {
      document.getElementById('register_sidediv').style.display = 'block';
      document.getElementById('customer_login_side').style.display='none';
      document.getElementById('showFormLogin').style.display = 'inline-block';
      document.getElementById('hideFormLogin').style.display='none';
    }
  
    function showFormLogin() {
      document.getElementById('register_sidediv').style.display = 'none';
      document.getElementById('customer_login_side').style.display = 'block';
      document.getElementById('hideFormLogin').style.display = 'inline-block';
      document.getElementById('showFormLogin').style.display='none';
    }
    // Allow deep linking to the recover password form
    //if (window.location.hash == '#recover') { showRecoverPasswordForm() }
  
    // reset_success is only true when the reset form is
    {% if reset_success -%}
      var x = document.getElementsByClassName('resetSuccessside');
      x[0].style.display = 'block';  x[1].style.display = 'block';
    {% endif -%}
     {% if gl_shopify_error -%}
        {%- if error_html != blank -%}
        var html = {{error_html | json }};
        var element = document.getElementById("jas_html_frmside");
           element.innerHTML = '';
           element.innerHTML = '{{ 'customer.login.error' | t }} '+html;
        
        {%- endif -%}
        document.getElementById('gl_shopify_errorside').style.display = 'block';
    {% endif -%}
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>functions.js - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> *-------------------------------------------------------------------------------------------------------------------------------------------
               * Login sidebar
               *-------------------------------------------------------------------------------------------------------------------------------------------
               */
               
              loginSidebar: function() {
                  if ($( '.login-form-side' ).length === 0) return;
                  var body = $( 'body' );
                  $( '.login-side-opener' ).on( 'click', function ( e ) {
                      e.preventDefault();
                      if( isOpened() ) {
                          closeWidget();
                      } else {
                          setTimeout( function() {
                              openWidget();
                          }, 10);
                      }
                  });
                  
                  body.on( 'click touchstart', '.basel-close-side', function() {
                      if( isOpened() ) closeWidget();
                  });
  
                  body.on( 'click', '.widget-close', function( e ) {
                      e.preventDefault();
                      if( isOpened() ) closeWidget();
                  });
                  
                  var closeWidget = function() {
                      body.removeClass( 'basel-login-side-opened' );
                  };
  
                  var openWidget = function() {
                      body.addClass( 'basel-login-side-opened' );
                  };
                  
                  var isOpened = function() {
                      return body.hasClass( 'basel-login-side-opened' );
                  };
  
              },
            
              
              /**</code></pre>
  </div>
  </div>
  </p>