Password protect store without an app

I've recently integrated password protection on storefronts. There are apps that can manage this, but below is an example of how to achieve without an app.

 

<!-- show fields is customer logged in -->
{% if customer %}

{% section 'header' %}
<main class="main-content" id="MainContent">
{{ content_for_layout }}
</main>
{% section 'footer' %}

{% else %}

{% if template contains 'page' and page.handle == 'XX' %}

{% section 'header-login' %}
<main class="main-content" id="MainContent">
{{ content_for_layout }}
</main>
{% section 'footer' %}

{% elsif template contains 'index' or template contains 'page' or template contains 'product' or template contains 'collection' %}

{% section 'header-login' %}

<!-- ask to login -->
<div id="dealer-login">
<div class="login-form">


<div class="grid__item">

<div class="note note--success hide" id="ResetSuccess">
{{ 'customer.recover_password.success' | t }}
</div>

<h3 class="text-center">Welcome</h3>

<div id="CustomerLoginForm" class="form-vertical">
{% form 'customer_login' %}
<input type="hidden" name="checkout_url" value="/">

{{ form.errors | default_errors }}

<label for="CustomerEmail">{{ 'customer.login.email' | t }}</label>
<input type="email" name="customer[email]" id="CustomerEmail" class="input-full{% if form.errors contains 'email' %} error{% endif %}" autocorrect="off" autocapitalize="off" autofocus>

{% if form.password_needed %}
<div class="grid">
<div class="grid__item one-half">
<label for="CustomerPassword">{{ 'customer.login.password' | t }}</label>
</div>
</div>
<input type="password" value="" name="customer[password]" id="CustomerPassword" class="input-full{% if form.errors contains 'password' %} error{% endif %}">
<div class="text-right">
<small class="label-info">
<a href="/account/login#recover" id="RecoverPassword">
Forgot?
</a>
</small>
</div>
{% endif %}

<p>
<button type="submit" class="btn btn--full">
{{ 'customer.login.sign_in' | t }}
</button>
</p>
{% endform %}

</div>
</div>
<!-- end login -->

{% else %}

{% section 'header-login' %}

<main class="main-content" id="MainContent">
{{ content_for_layout }}
</main>

{% endif %}

{% endif %}

Leave a comment

Please note, comments must be approved before they are published