Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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!
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.
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!
In order to send the data to the server you've to wrap that code inside the <form> tag.
{% form 'create_customer' %}
and
{% endform %}
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.
Or you could use an App to do that for your.
follow the steps but instead of the dropdown use the datalist.
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!
Sure thing, Ceris! I'm glad to hear it's working for ya
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?
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>
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!
@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>
That worked, thank you so much!!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024