How to create a login form template in Shopify

Using a login/registration form in your Shopify store can significantly enhance both the user experience and the store management process. Here are some important aspects to consider:

Personalized Experience:

Registered users can receive personalized recommendations, offers, and promotions based on their purchase history and preferences.

Streamlined Checkout Process:

Customers with accounts can save their shipping and billing information, making future purchases quicker and more convenient.

Order Tracking:

Logged-in customers can easily track their order status and history, which can reduce the number of customer service inquiries.

Loyalty Programs:

Account holders can participate in loyalty programs, earning points or rewards for their purchases.

Better Marketing Insights:

Collecting user data allows you to gain insights into customer behavior, which can inform your marketing strategies and product offerings.

Security:

Accounts provide an added layer of security for both the customer and the store, ensuring that transactions are tied to verified users.

Implementation

It’s time for the implementation. Let’s do some simple code for this template. In this template, we implement the login form and handle the password recovery and Guest login form.

Step: 1

Create a JSON template file inside-

templates > customers > login.json

Now paste this bellow code there! But don’t save this file for now, otherwise, it’ll return error.

{
    "sections": {
        "main": {
            "type": "main-login"
        }
    },
    "order": [
        "main"
    ]

}

Step 2:

Now create a section under-

Sections > main-login.liquid

Now paste the bellow code there!

{% comment %} sections/main-login.liquid {% endcomment %}
<div class="customer-login-page">
    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div id="passwordRecover" style="display: none;">
                    <div class="page-header my-3">
                        <h2>Reset your oassword</h2>
                        <span>We will send you an email to reset your password</span>
                    </div>
                    {% form 'recover_customer_password' %}
                        {% if form.posted_successfully? %}
                            <span>Link send to your email successfully!</span>
                        {% endif %}
                        <div class="form-group">
                            <input type="email" class="my-3 form-control" name="email" id="recoverPass" placeholder="Email">
                            {% if form.errors %}
                                {{ form.errors.messages.form }}
                            {% endif %}
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <button type="submit" class="btn btn-dark">Submit</button>
                            <p id="cancelRecovery">Cancel</p>
                        </div>
                    {% endform %}
                </div>
                <div id="cutomerLogin">
                    <div class="page-header my-5">
                        <h2>Customer Login</h2>
                    </div>
                    <div class="login-form-area">                    
                        {% form 'customer_login' %}
                            {% if form.errors %}
                                {{ form.errors |  default_errors }}
                            {% endif %}
                            <div class="login-form-input my-3">
                                <div class="form-group">
                                    <input type="email" class=" my-3 form-control" name="customer[email]" id="customerEmail" placeholder="Email">
                                    <input type="password" class="form-control" name="customer[password]" id="customerPassword" placeholder="Password">
                                </div>
                            </div>
                            <p id="forgotPassord">Forgot password?</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <button type="submit" class="btn btn-primary">Login</button>
                                <a href="{{ routes.account_register_url }}">Create new account</a>
                            </div>
                        {% endform %}
                        {% if shop.checkout.guest_login %}
                            <div class="guest-login">
                                <hr>
                                <div class="page-header">
                                    <h2>Login as a guest</h2>
                                </div>
                                {% form 'guest_login' %}
                                    <button type="submit" class="btn btn-dark">Continue</button>
                                {% endform %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

This file has 3 forms, those are recovery password, login form, and the last one guest login.

We need to add simple JS code to swap the forms with each other, which means clicking “forgot password” will hide the login form and show the “recover password” form. In the “recover password” form, when we click “cancel”, the “Login” form will open and the current one will hide. So, to do that add the below script inside the above section (main-login.liquid).

    document.getElementById("forgotPassord").addEventListener("click", function(){
        document.getElementById("cutomerLogin").style.display = 'none';
        document.getElementById("passwordRecover").style.display = 'block';
    });
    document.getElementById("cancelRecovery").addEventListener("click", function(){
        document.getElementById("passwordRecover").style.display = 'none';
        document.getElementById("cutomerLogin").style.display = 'block';        
    })

Now, Save the section and then the template file called “login.json”.

That’s all to do create a login template.

Benefits of Using Login/Registration Forms