Besides just the usual information such as email address, password, gender, date of birth, etc that are required for your customers to fill in in order to register for an account on your website, you can also include additional columns for them to fill in upon registration.

In this article :

  1. Add blood type & occupation upon account registration

  2. Remove Date of Birth for account registration

⚠️ Kindly take note :

  • Above all code editing, you will need to re-edit the code again if you switch to a new theme template

  • We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons

1. Add blood type & occupation upon account registration

Step 1 : Click into Channels > Online Store > Edit Source > Select customers/register.liquid> then you may press CTRL + F and search for “LastName”

{{ form.errors | default_errors }}

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

Step 2 : Paste the code block from below under the last “</div>”

<select name="customer[note][Blood Type]">

<option value disabled selected>Blood Type</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>

<input type="text" name="customer[note][Occupation]" placeholder="Occupation">

Step 3 : As a result, blood type and occupation input field columns will appear at the registration page.

If you want the columns to be displayed side-by-side to each other instead, you may replace the code from above with the code below.

<div class="grid">

<div class="grid__item one-half">
<select name="customer[note][Blood Type]">
<option value disabled selected>Blood Type</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</div>
<div class="grid__item one-half">
<input type="text" name="customer[note][Occupation]" placeholder="Occupation">
</div>
</div>

Now, the two input field columns will be aligned side-by-side to each other, as shown in the screenshot below.

2. Remove Date of Birth for account registration

Step 1 : Click into Channels > Online Store > Edit Source > Select customers/register.liquid and remove the code

Step 2 : Save

Did this answer your question?