Personalized checkout and custom promotions with Shopify Scripts
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:;" 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:;" 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>
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
I'm looking to do the exact same things !
In 2021, this should be the only way to work
all major sites use it:
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?
Hello Everyone!
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
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025