Creating sign up or login popup or lightbox

[Bilz636]

Does anyone know How to show sign up/login page as pop up or lightbox?

Actually i do not want to loose my customer by clicking Register / Login  abd redirecting to another page from product page. I want if a customer want to create a new account or login then he/she should able to sign up/ sign in in correct page (without being redirect ) as popup or lightbox.

{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}

<div class="container">
  <div id="col-main" class="page-register">

  <div class="row">
    
    <div class="col-sm-6 col-xs-12 register-or">
      <div class="form-wrapper">

        <h2 class="heading">{{'customer.register.title' | t }}</h2>
        <p>{{'customer.register.caption' | t }}</p>

        {% form 'create_customer' %}

        {% if form.errors %}
        <div class="alert alert-danger">
          <button type="button" class="close" title="{{'customer.general.close' | t }}" data-dismiss="alert">×</button>
          {{ form.errors | default_errors }}
        </div>
        {% endif %}

        <div id="register-form">
 <!--         
          <div class="control-wrapper">
            <label for="first-name">{{ 'customer.register.first_name' | t }}</label>
            <input type="text" name="customer[first_name]" id="first-name" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus />
          </div>

          <div class="control-wrapper">
            <label for="last-name">{{ 'customer.register.last_name' | t }}</label>
            <input type="text" name="customer[last_name]" id="last-name" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocapitalize="words" autofocus />
          </div>
-->         
          <div class="control-wrapper{% if form.errors contains 'email' %} has-error{% endif %}">
            <label for="email">{{'customer.register.email' | t }}<span class="req">*</span></label>
            <input type="email" value="{{ form.email }}" name="customer[email]" id="email" {% if form.errors contains 'email' %} class="error"{% endif %} />
          </div>
          
          <div class="control-wrapper{% if form.errors contains 'password' %} has-error{% endif %}">
            <label for="password">{{'customer.register.password' | t }}<span class="req">*</span></label>
            <input type="password" value="" name="customer[password]" id="password" class="password{% if form.errors contains 'password' %} error{% endif %}" />
          </div>
          
          <div class="control-wrapper last">
            <button class="btn btn-1" type="submit">{{'customer.register.submit' | t }}</button>
          </div>
          
        </div>
        {% endform %}
        
        <h5 class="semi-bold">{{'customer.register.benefits_title' | t }}</h5>
        <ul class="list-unstyled list-benefits">
          <li><i class="demo-icon icon-ok-1"></i> {{'customer.register.benefits_text_1' | t }}</li>
          <li><i class="demo-icon icon-ok-1"></i> {{'customer.register.benefits_text_2' | t }}</li>
          <li><i class="demo-icon icon-ok-1"></i> {{'customer.register.benefits_text_3' | t }}</li>
        </ul>

      </div>
    </div>
    
    <div class="col-sm-6 col-xs-12">
      <div class="form-wrapper">

        <div id="customer-login" class="content">
          <h2 class="heading">{{ 'customer.login.title' | t }}</h2>
          <p>{{ 'customer.login.welcome' | t }}</p>

          {% form 'customer_login' %}
          <input type="hidden" name="checkout_url" value="/checkout" />

          {% if form.errors %}
          <div class="alert alert-error alert-danger">
            <button type="button" class="close" title="{{'customer.general.close' | t }}" data-dismiss="alert">×</button>
            {{ form.errors | default_errors }}
          </div>
          {% endif %}

          <div class="control-wrapper">
            <label for="customer_email">{{ 'customer.login.email' | t }}<span class="req">*</span></label>
            <input type="email" required name="customer[email]" id="customer_email" />
          </div>

          {% if form.password_needed %}
          <div class="control-wrapper">
            <label for="customer_password">{{ 'customer.login.password' | t }}<span class="req">*</span></label>
            <input type="password" required name="customer[password]" id="customer_password" class="password" />
          </div>
          {% endif %}
          
          <div class="control-wrapper last">
            <div class="action">
              <a class="forgot-pass" href="javascript&colon;;" onclick="showRecoverPasswordForm()">{{ 'customer.login.forgot_password' | t }}</a>
              <a class="return-store" href="{{ shop.url }}">{{ 'customer.login.cancel' | t }}</a>
            </div>
            <button class="btn btn-1" type="submit">{{ 'customer.login.sign_in' | t }}</button>
          </div>

          {% endform %}

        </div>

        <div id="recover-password" style="display: none;">

          <h2 class="heading">{{ 'customer.recover_password.title' | t }}</h2>
          <p class="note">{{ 'customer.recover_password.subtext' | t }}</p>

          {% form 'recover_customer_password' %}

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

          {% if form.errors %}
          <div class="alert alert-danger">
            <button type="button" class="close" title="{{'customer.general.close' | t }}" data-dismiss="alert">×</button>
            {{ form.errors | default_errors }}
          </div>
          {% endif %}

          <div class="control-wrapper">
            <label for="email">{{ 'customer.recover_password.email' | t }}<span class="req">*</span></label>
            <input type="email" value="" name="email" id="recover-email" />
          </div>

          <div class="control-wrapper">
            <button class="btn btn-1" type="submit">{{ 'customer.recover_password.submit' | t }}</button>
            <a class="cancel btn btn-2" href="javascript&colon;;" onclick="hideRecoverPasswordForm();">{{ 'customer.recover_password.cancel' | t }}</a>
          </div>

          {% endform %}
        </div>
      </div>

    </div>
    
  </div>

  </div>
</div>


<script type="text/javascript">
  if (window.location.hash == '#recover') { showRecoverPasswordForm(); }

  function showRecoverPasswordForm() {
    $('#recover-password').fadeIn();
    $('#customer-login').hide();
    window.location.hash = '#recover';
    return false;
  }

  function hideRecoverPasswordForm() {
    $('#recover-password').hide();
    $('#customer-login').fadeIn();
    window.location.hash = '';
    return false;
  }
</script>

[Bilz636]

honestly i am very new to shopify world! So i dont know what you meant by "inbuild solution". All i know, customer should able to login or sign up in the same page without being redirect

[Pyxow]

I'm looking to do the exact same things !
In 2021, this should be the only way to work

all major sites use it: 

[chenster]

I too looking for something similar. I found Admin REST API on 'creating a customer' https://shopify.dev/docs/admin-api/rest/reference/customers/customer#create-2021-04, and also Storefront API CustomerCreateInput https://shopify.dev/docs/storefront-api/reference/customers/customercreateinput. CustomerCreateInput looks more promising as it only requires email and password. Has anyone done sth similar?

[Andrei21]

@chenster 

@Bilz636 

@Pyxow 

@Tecs4u 

Hello Everyone!

My Shopify store is being developed right now. One of the features that we would like to have is a custom-made popup for customers to log in or register. We have a pop-up developed but it's not working well. Our current pop-up doesn't work when a customer wants to reset their password or if they put in the wrong password. Or if we direct a customer to a part of our store where they need to log in, such as a wishlist, or cart.

We would like customers to only use a pop-up for all log-in, registration, and password reset needs and completely abandon and not use Shopify's generic Log In / Register page.

I know that Shopify has some limitations, so please let me know if this is possible to do.

I would appreciate that a lot! 

Thank you so much!

[Alex_UV]

You can create a custom section and copy the standard form. But if you want to use this form without being redirected to the login page (for example, if the login or password is incorrect, you will be redirected to /account/login), you must use the Storfront API. This api has the necessary mutations for login/create user/forgot password. I can help anyone with this issue. If you want to cooperate, write to alex.pavlyuk04@gmail.com