How to create the customer Registration form in shopify
Shamsul Huda
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.liquidThen 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.
