How can I modify my theme to add more fields to customer registration?

[maritimesaver]

Hi all, I need help with adding more fields to my customer registration form. I want to add "phone number, company name and address" and have the information stored under the customer's profile.  

[Zworthkey]

hii

we will help you

pls share your site detail

thank u

[maritimesaver]

what site details are you asking for? 

[maritimesaver]

this is the site url https://mswholesale.ca/

[Zworthkey]

Hii,

 check out This video.

https://youtu.be/1rQnP9sPD0w

Thank you.

[maritimesaver]

This video shows me how to create a Contact Us page and not how to add more fields to my registration form and have them saved under each customer's profile. 

[SarvMarketing]

@maritimesaver 

Custom fields in the contact form require adding codes to your theme files.

Note: Take a backup of your theme before implementing the solution below.

I followed this tutorial to add the Company Name and Address fields to the Simple theme contact form. I added the code to a fresh install of the theme.

Steps:

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 page.contact.liquid.

4. Replace the code with the code below. If you are using the default contact page. 

<!-- /templates/page.contact.liquid -->
<h1 class="small--text-center">{{ page.title }}</h1>

<div class="rte">
  {{ page.content }}
</div>

<div class="contact-form form-vertical">
  {% form 'contact' %}

    {% if form.posted_successfully? %}
      <p class="form--success">
        {{ 'contact.form.post_success' | t }}
      </p>
    {% endif %}

    {{ form.errors | default_errors }}

    <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
    <input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">

    <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
    <input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">

    <label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
    <input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

    <label for="CompanyName" class="label--hidden">{{ 'contact.form.company' | t }}</label>
    <input type="text" id="ContactFormCompany" name="contact[{{ 'contact.form.company' | t }}]" placeholder="{{ 'contact.form.company' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[company] }}{% elsif customer %}{{ customer.company }}{% endif %}">
  
    <label for="Address" class="label--hidden">{{ 'contact.form.address' | t }}</label>
    <input type="text" id="ContactFormAddress" name="contact[{{ 'contact.form.address' | t }}]" placeholder="{{ 'contact.form.address' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[address] }}{% elsif customer %}{{ customer.address }}{% endif %}">
  
    <label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
    <textarea rows="10" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>

    <input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">

  {% endform %}
</div>

 6. Click Save

Now you will see two fields in the contact form. But you need to add language translation fields.

Follow the steps below: 

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 Locales directory, click en.default.json.

4. Search for "contact": tag.

5. Add the following code below "phone": "Phone Number",

"company": "Company Name", 
      "address": "Address", 

6. Click Save.

Here's how my contact form looks like: 

and in the message in the email: