Linking Customer Fields with the Customer Registration Page

[hassantahir767]

I have a Shopify website that i am working on and it use Minimog theme. I have modified the theme's default sign up page to add more fields such as Notes, Phone, Tags etc. But somehow, i am unable to capture address fields.  

I want to create sign up form so it accepts all of these fields and registers the user.

this is what i have tried at the moment 

<div class="py-8 md:py-16">
    <div class="mx-auto w-5/6 md:w-2/3 lg:w-1/2 xl:w-1/3 2xl:w-1/4">
        <h1 class="text-2xl font-medium mb-4">{{ 'customer.register.title' | t }}</h1>
        <div data-register-form>
            {% form 'create_customer' %}
            {% render 'form__error', form: form %}
            
            <input type="text" name="customer[first_name]" placeholder="{{ 'customer.register.first_name' | t }}" class="form-control" />
            <input type="text" name="customer[last_name]" placeholder="{{ 'customer.register.last_name' | t }}" class="form-control" />
            <input type="email" name="customer[email]" placeholder="{{ 'customer.login.email' | t }}" class="form-control" />
            <input type="password" name="customer[password]" placeholder="{{ 'customer.login.password' | t }}" class="form-control" />
            
            <!-- New Fields -->
            <input type="text" name="customer[addresses][company]" placeholder="Company" class="form-control" />
            <input type="text" name="customer[addresses][address1]" placeholder="Address 1" class="form-control" />
            <input type="text" name="customer[addresses][address2]" placeholder="Address 2" class="form-control" />
            <input type="text" name="customer[addresses][city]" placeholder="City" class="form-control" />
            <input type="text" name="customer[addresses][zip]" placeholder="Zip" class="form-control" />
            <input type="text" name="customer[addresses][country]" placeholder="Country" class="form-control" />
            <input type="tel" name="customer[phone]" placeholder="Phone" class="form-control" />
           <input type="tel" name="customer[note]" placeholder="Note" class="form-control" />
            <!-- End of New Fields -->
            
            <div class="mt-3 text-color-secondary">
              {{ 'customer.register.description' | t }}
            </div>
            
            {% assign show_terms = false %}
            {% if settings.agree_text != blank and settings.show_agree_on_register %}
              <div class="agree-terms">
                <label>
                  <input type="checkbox" name="agree_terms" value="yes" required>
                  <span>{{ settings.agree_text }}</span>
                </label>
              </div>
              {% assign show_terms = true %}
            {% endif %}
            
            <button class="mt-6 mb-3 w-full sf__btn sf__btn-primary"{% if show_terms %} data-terms-action disabled{% endif %}>
              {{ 'customer.register.title' | t }}
            </button>
            
            <a class="w-full mt-[12xpx] sf__btn sf__btn-secondary" href="{{ routes.account_login_url }}">
              {{ 'customer.login.title' | t }}
            </a>
            
            {% endform %}
        </div>
    </div>
</div>

[SBD_ · Accepted solution]

Hey @hassantahir767 

Any additional information is saved as a customer note. As a workaround, you could either:

- Collect the address once they're registered.

- Use the Storefront API to create the customer and assign their default address.

[hassantahir767]

Thanks @SBD_ . I had more or less same thing in my mind. I think i can break down registration form in two steps, first collect basic info and then address.

[Brett_Helium]

Hey @hassantahir767!

Another possible solution here would be to use an app such as Helium Customer Fields which allows you to build a custom registration form to collect pretty much any data, including an address. Any data collected on our forms gets automatically attached to the customer record, and custom information such as a birthday, gender, or tax ID would get stored as a metafield attached to the account.

You can check it out in the Shopify app store here.