How To Add Custom Field In Customer Registration Page In Shopify?

- 1 answer

I have added a Custom field in the customer registration page.

Fieldname: Area.

I have tried to save them, all details are saved expect but the Area value not saved.

Can anyone help me to fix that issue?

{% form 'create_customer' %}

    {{ form.errors | default_errors }}

    <label for="FirstName" class="hidden-label">{{ 'customer.register.first_name' | t }}</label>
    <input type="text" name="customer[first_name]" id="FirstName" class="input-full" placeholder="{{ 'customer.register.first_name' | t }}" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus required>

    <label for="LastName" class="hidden-label">{{ 'customer.register.last_name' | t }}</label>
    <input type="text" name="customer[last_name]" id="LastName" class="input-full" placeholder="{{ 'customer.register.last_name' | t }}" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocapitalize="words" required>

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

  <label for="Area" class="hidden-label">{{ 'customer.register.area' | t }}</label>

  <input type="text" id="Area" name="customer[note][area]" placeholder="Customer Area" class="input-full"  autocorrect="off" autocapitalize="off">

    <label for="CreatePassword" class="hidden-label">{{ 'customer.register.password' | t }}</label>
    <input type="password" name="customer[password]" id="CreatePassword" class="input-full{% if form.errors contains 'password' %} error{% endif %}" placeholder="{{ 'customer.register.password' | t }}" required>

      <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn btn--full registerBtn" ng-click="myfunction();" id="create">
    <a target="_blank" rel="nofollow noreferrer" href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>

  {% endform %}


There is no way to show a note field in the front end but you should be able to store it the way you are saving it.

If you like to output something you will have to use a tag instead.

For example: <input type="text" class="field" name="customer[tags]" value="" >

And you will have access to the tags from customer.tags. That way you will be able to show the tag/field.