Setting up a custom drop down field on the customer registration form

[AndrewK1]

Hi,

Can anyone please help me setup an additional drop down field on my customer account registration form. I have looked for help on the ShopifyDev site and found HTML code to paste in but a it looks nothing like the theme's html code on the customer-registration.liquid page so

a) don't' know where it is supposed to go and,

b) when I have pasted it between 2 of the existing fields it does not show on the front end.

The HTML code from the shopify.dev site was:

<label for="CustomerFormFlavor">Choose a flavor</label>
<select id="CustomerFormFlavor" name="customer[note][Flavor]">
  <option>Chocolate</option>
  <option>Vanilla</option>
  <option>Strawberry</option>
</select>

The code on the themes customer-registration.liquid is as follows:

<section class="section account">

<div class="account__auth-wrapper">

<h1 class="account__auth-wrapper-heading type-heading-display">{{ 'customer.register.title' | t }}</h1>

{% form 'create_customer' %}
{{ form.errors | default_errors }}

<div class="relative">
<input type="text"
name="customer[first_name]"
id="FirstName"
class="input"
placeholder="{{ 'customer.register.first_name' | t }}"
{% if form.first_name %}value="{{ form.first_name }}"{% endif %}>
<label for="FirstName" class="label--above">
{{ 'customer.register.first_name' | t }}
</label>
</div>

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

<div class="relative">
<input type="email"
name="customer[email]"
id="Email"
class="input {% if form.errors contains 'email' %}input-error{% endif %}"
placeholder="{{ 'customer.register.email' | t }}"
value="{% if form.email %}{{ form.email }}{% endif %}"
spellcheck="false"
autocomplete="off"
autocapitalize="off">
<label for="Email" class="label--above">
{{ 'customer.register.email' | t }}
</label>
</div>


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

<input type="submit" value="{{ 'customer.register.submit' | t }}" class="bttn bttn--full mb3">

<div class="login__links">
<a class="underline" href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>
</div>
{% endform %}

</div>

</section>

And the drop down I need to add which saves as tags against the customers account is for the following:

Online Customer
Practitioner
Complimentary Practitioner
Yoga Practitioner/Teacher
NHS Practitioner
Other Practitioner
Retailers

Can anyone guide me as my html knowledge is limited and very much a learner or rather trial by error kind of learner. There are good apps like 'Customer Fields' but cannot justify the cost right now so any help to get the above field working would be most appreciated!

Thanks in advance!

[Kyle_W]

Hey @AndrewK1!

I'm glad to hear that you've already come across our Customer Fields app. I'm sure you'll be able to take advantage of our app's robust feature-set at some point down the road, but for now you can certainly accomplish your goal with some custom code in your store's theme.

If you want the custom dropdown field to add a tag to the customer record in Shopify, then you will want to use customer[tags] for the name attribute. Exactly where you add the custom code depends on where you want the field to be displayed on the registration form, but in your case I would suggest adding the custom code before the first name field. There's a variety of reasons why you were not able to see the new field when viewing the form on your storefront, but it could be something as simple as a missing class/wrapper for the new select field.

You can try adding something like the following to your form code:

<div class="relative">
  <label for="CustomerType">Select a customer type</label>
  <select id="CustomerType" name="customer[tags]">
    <option>Online Customer</option>
    <option>Practitioner</option>
    <option>Complimentary Practitioner</option>
    <option>Yoga Practitioner/Teacher</option>
    <option>NHS Practitioner</option>
    <option>Complimentary Practitioner</option>
    <option>Other Practitioner</option>
    <option>Complimentary Practitioner</option>
    <option>Retailers</option>            
  </select>
</div>

You can paste this code on a new line directly underneath {{ form.errors | default_errors }} to make the dropdown field show above the first name field.

Hopefully this helps!

[JBMartin]

Hi Andrew,

I gave the same question now for my store. Did the answer you got above actually help? Or did you find an alternative solution or go with a third party app in the end?

Thank you! I really appreciate it.