Custom fields for Shopify User Registration Form

Question

I can't find any documentation on how to add custom fields for the user registration forum so I tried something but didn't work:

<div class="single-full-width customer">
    <div class="login">
        {% form 'create_customer' %}
            {% if form.errors %}
                {% for field in form.errors %}
                    <p class="input-error-wrapper"><span>{{field}} {{ form.errors.messages[field] }}</span></p>
                {% endfor %}
            {% endif %}
            <p>
                <label>First Name:</label>
                <input type="text" value="" name="customer[first_name]" class="input-text-1" />
            </p>
            <p>
                <label>Last Name:</label>
                <input type="text" value="" name="customer[last_name]" class="input-text-1" />
            </p>
            <p>
                <label>Email Address:</label>
                <input type="text" value="" name="customer[email]" class="input-text-1" />
            </p>

            <p>
                <label>Password:</label>
                <input type="password" value="" name="customer[password]" class="input-text-1" />
            </p>

            <p>
                <label>Pet Name:</label>
                <input type="text" value="" name="customer[pet_name]" class="input-text-1" />

                <input type="radio" name="customer[pet]" value="cat">Cat
                <input type="radio" name="customer[pet]" value="dog">Dog
            </p>

            <p class="sign-in">
                <label></label>
                <a href="#" class="button-1 custom-font-1 trans-1 form-submit-btn"><span>Register</span></a>
                <b>or <a href="{{ shop.url }}">Return to store</a></b>
            </p>
        {% endform %}
    </div>

The fields I've added are the text input - pet name and the radio boxes for Cat/Dog. I've used a test account but the output was that nothing is saved. I've used {{ customer.pet_name }} to try and get the saved value but got nothing in return. Any suggestions? Thanks!

Dorren

Answer 1

Save your pet name in a tag, or a note since those exist for customers. pet_name obviously is not a customer field.

<p>
  <label>Pet Name:</label>
  <input type="text" value="" name="customer[note]" class="input-text-1" />
  <input type="radio" name="customer[tags]" value="cat">Cat
  <input type="radio" name="customer[tags]" value="dog">Dog
</p>

Lightyear

Could you link me to some info on how to do that? I can't find much – Dorren

I hate to bother you again but how can I return the values? {{ customer.note }} and {{ customer.cat }}? – Dorren

{{customer.note}} and {{customer.tags}} – Lightyear

I don't know why, but {{customer.note}} doesn't return anything. But if I go in the admin panel, I can see the note for the customer. – Dorren

You're right. You cannot use customer.note on the front-end of a shop. It is not available. It is meant for private use. You could use an App to accept the new customer registration and turn the note into a metafield which is visible to the customer, or I dunno... you're venturing into territory too custom without using an App. – Lightyear

Ah ok, thanks for your support. Also, do you have any idea why this doesn't work? {% if customer.tags == 'cat' %} – Dorren

used cointains instead of ==. Thanks very much for your support – Dorren

Answer 2

we've developed an application that lets you add custom field on the customer registration page, so we easily resolve your problems! The data will be saved into metafields.

This is the app link: https://apps.shopify.com/amplius

You also have 7 days of free trial to try our app for free!

Malayopolynesian