Solved

Customising the Customer Registration Form

Ceris
Tourist
10 0 1

Hi!

I'm hoping someone can help me. I am a code newbie but love to give things a go myself. 

I have added a Birth Month drop down menu to my registration liquid using the below code:

<br /><label for="Birthday">Birth Month</label><br />

<input list="birthday" name="birthday" id="browser">

<datalist id="birthday">
<option value="January">
<option value="February">
<option value="March">
<option value="April">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
<option value="November">
<option value="December">
</datalist><br />

The Birth Month drop down works on the form however it doesn't come through on the customers account. I would like the Birth Month to appear in their personal customer tag.

Does anybody know how to do this?

I'm sure it is just a tiny tweak to the coding.

Thanks!

Screen Shot 2020-10-30 at 15.34.53.png

Accepted Solution (1)
Kyle_W
Shopify Expert
172 26 105

This is an accepted solution.

Hi @Ceris!

The name attribute that @OpenThinking provided will work to add a Customer Note into Shopify with the customer's selected birth month (e.g. Birthmonth: April), but if you want the data to appear as a customer tag in Shopify then you will need to use the following name attribute instead:



customer[tags]

Here's a code snippet that should do what you are looking for:

 

<label for="yourBirthMonth">Birth Month</label>
<input list id="yourBirthMonth" name="customer[tags]">
<datalist id="yourBirthMonth">          
	<option value="January">January</option>
	<option value="February">February</option>
	<option value="March">March</option>
	<option value="April">April</option>
	<option value="May">May</option>
	<option value="June">June</option>
	<option value="July">July</option>
	<option value="August">August</option>
	<option value="September">September</option>
	<option value="October">October</option>
	<option value="November">November</option>
	<option value="December">December</option>
</datalist>

 

 

Of course you'll need to add this into your theme's registration template (templates/customers/register.liquid) before the {% endform %} tag. 

If you're looking for another app suggestion, then be sure to take a look at the Customer Fields app. The app's form builder is very powerful, easy to use, and it can tag customers in a variety of different ways without having to edit any theme code. You can learn more about the tagging options here: http://help.heliumdev.com/en/articles/3567319-customer-auto-tagging

 

Hopefully this helps!

Kyle W | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (300+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (200+ reviews)

View solution in original post

Replies 14 (14)

OpenThinking
Shopify Partner
321 81 120

Hi there,
Jack from OpenThinking here!

You can find the various address variables at this link and other customer variables at this link.
This should help you set up the collection of the customers data during registration.



let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
Ceris
Tourist
10 0 1

Hi Jack, 

Where do I add one of these codes into my original code?

I would like the Birth Date that the customer enter to be found in their tags which i'm guesing is this snippet of code from your link:

{% for tag in customer.tags %} {{ tag }} {% endfor %}

Where would I add tis to my original code below?

<br /><label for="Birthday">Birth Month</label><br />

<input list="birthday" name="birthday" id="browser">

<datalist id="birthday">
<option value="January">
<option value="February">
<option value="March">
<option value="April">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
<option value="November">
<option value="December">
</datalist><br />

 

Thanks!

OpenThinking
Shopify Partner
321 81 120

In order to send the data to the server you've to wrap that code inside the <form> tag.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Templates directory, click customers/register.liquid.
  4. Find the following Liquid tags in the code:

 

 

{% form 'create_customer' %}
and
{% endform %}

 

 

  1. You will paste the code for your custom field(s) before, after, or in between the existing fields, depending on your preference. 
  2. Save

and I'd go with a select (dropdown) instead of a datalist.

 

 

<label for="yourBirthMonth">Birth Month</label>
<select id="yourBirthMonth" name="customer[note][Birthmonth]">
	<option value="January">January</option>
	<option value="February">February</option>
	<option value="March">March</option>
	<option value="April">April</option>
	<option value="May">May</option>
	<option value="June"> June </option>
	<option value="July"> July </option>
	<option value="August"> August </option>
	<option value="September"> September </option>
	<option value="October"> October </option>
	<option value="November"> November </option>
	<option value="December"> December </option>
</select>

 

 

I didn't test this code, so I don't guarantee it works.

if yes, accept my answer and give me thumbs up! Thanks.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
OpenThinking
Shopify Partner
321 81 120

Or you could use an App to do that for your.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
Ceris
Tourist
10 0 1
Unfortunately that code didn't work on my theme.

In my theme I must use a data list instead of a dropdown.

Where do I put the in the code I have already used?

Thanks for your help.

Ceris


OpenThinking
Shopify Partner
321 81 120

follow the steps but instead of the dropdown use the datalist.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
Kyle_W
Shopify Expert
172 26 105

This is an accepted solution.

Hi @Ceris!

The name attribute that @OpenThinking provided will work to add a Customer Note into Shopify with the customer's selected birth month (e.g. Birthmonth: April), but if you want the data to appear as a customer tag in Shopify then you will need to use the following name attribute instead:



customer[tags]

Here's a code snippet that should do what you are looking for:

 

<label for="yourBirthMonth">Birth Month</label>
<input list id="yourBirthMonth" name="customer[tags]">
<datalist id="yourBirthMonth">          
	<option value="January">January</option>
	<option value="February">February</option>
	<option value="March">March</option>
	<option value="April">April</option>
	<option value="May">May</option>
	<option value="June">June</option>
	<option value="July">July</option>
	<option value="August">August</option>
	<option value="September">September</option>
	<option value="October">October</option>
	<option value="November">November</option>
	<option value="December">December</option>
</datalist>

 

 

Of course you'll need to add this into your theme's registration template (templates/customers/register.liquid) before the {% endform %} tag. 

If you're looking for another app suggestion, then be sure to take a look at the Customer Fields app. The app's form builder is very powerful, easy to use, and it can tag customers in a variety of different ways without having to edit any theme code. You can learn more about the tagging options here: http://help.heliumdev.com/en/articles/3567319-customer-auto-tagging

 

Hopefully this helps!

Kyle W | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (300+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (200+ reviews)
Ceris
Tourist
10 0 1
Thanks Kyle,

That did it!

Kyle_W
Shopify Expert
172 26 105

Sure thing, Ceris! I'm glad to hear it's working for ya

Kyle W | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (300+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (200+ reviews)
Demkey
Tourist
4 0 2

Hi @Kyle_W , seeing if you might be able to help with a similar question. I'm trying to add a custom field to my create account page for a code (Academy Code) which will then tag the customer with their specific code.

I tried to use the example above and customize it to my needs, but it doesn't seem to be working. Any suggestions?

Screenshot 2022-11-04 at 2.32.41 PM.png

Screenshot 2022-11-04 at 2.33.42 PM.png

Screenshot 2022-11-04 at 2.33.47 PM.png

  

Kyle_W
Shopify Expert
172 26 105

Hey @Demkey!

Based on your screenshots it looks like you've got some invalid HTML. Try using this instead:

 

<div class="field">
  <label for="AcademyCode">Academy Code</label>
  <input text id="AcademyCode" name="customer[tags]">
</div>

 

 

Kyle W | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (300+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (200+ reviews)
Demkey
Tourist
4 0 2

Thank you! It put the correct box there, but it just doesn't have the title "Academy Code" in the box. Is there a way to label the box with that?

thank you again! 

Kyle_W
Shopify Expert
172 26 105

@Demkey wrote:

Thank you! It put the correct box there, but it just doesn't have the title "Academy Code" in the box. Is there a way to label the box with that?

thank you again! 


You're welcome!

The code I provided included a field label, but it sounds like your theme might be hiding field labels and using placeholders instead. Try swapping the order of the label and input tags, while adding a placeholder attribute on the input, like so:

<div class="field"> 
  <input text id="AcademyCode" name="customer[tags]" placeholder="Academy Code"> 
  <label for="AcademyCode">Academy Code</label>
</div>

 

Kyle W | Helium
Helium builds apps that thousands of merchants depend on:
- Customer Fields ✪✪✪✪✪ (300+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (200+ reviews)
Demkey
Tourist
4 0 2

That worked, thank you so much!!