How to create the customer Registration form in shopify

To create a new customer account we need to register first. In shopify we can do this easily.

So, today we’ll learn how to create a register form in shopify using JSON template. Let’s began-

Create a JSON file under-

templates > customers > register.json

Now paste the below code inside inside it.

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

Now, create a section under-

Sections > main-account.liquid

Then paste the below code there-

<div class="customer-register-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div class="page-header my-5">
                    <h2>
                        Create New Account
                    </h2>
                </div>
                <div class="register-form">
                    {% form 'create_customer' %}
                        {% if form.errors %}
                            {{ form.errors |  default_errors }}
                        {% endif %}
                        <div class="row form-row">
                            <div class="col-6">
                                <input type="text" name="customer[first_name]" class="form-control" placeholder="First Name">
                            </div>
                            <div class="col-6">
                                <input type="text" name="customer[last_name]" class="form-control" placeholder="Last Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="email" name="customer[email]" class="my-3 form-control" placeholder="Email">
                            <input type="password" name="customer[password]" class="form-control" placeholder="Password">
                        </div>
                        <div class="d-flex action my-3 justify-content-between align-items-center">
                            <button type="submit" class="btn btn-primary">Create</button>
                            <div class="backtologin">
                                <span>Already have a account?</span>
                                <a href="{{ routes.account_login_url }}">Login</a>
                            </div>
                        </div>
                    {% endform %}
                </div>
            </div>
        </div>
    </div>
</div>

Now, save the “main-register.liquid”, then “register.json”.

Finally, go to the register page like this-

example.myshopify.com/account/register

This is how we can create register form for customer.