Using Shopify how can I capture the customer address on registration and have it saved as the default address for billing and shipping?

Question

I am creating a shopify website and I am trying to customize it so when a user / customer registers they can put their address information in at the time and have it saved as their default address. Shopify currently has it so you register then it takes you to an account page where you have the option of adding the address in.

I have tried making form elements on the register page which works as in they show up and get data. But I don't know how to make the form submit the address data to the default address data locations. In other words I don't know how to make it store the address as the default address.

I have looked at the code for the actual address page and tried plugin in the id's names and form values in the registration section with no luck. I have tried using id's and names associated with the api customer reference with no luck as well. I can't really find documentation on the subject. There is a section on capturing additional information at registration but its capture as "Notes" not as an address.

Any help is greatly appreciated thank you.

Answer 1

I created a second account page (customers/account.new-address.liquid) with the address registration form:

    {% assign formID = "" %}
    {% if formInfo.id %}
      {% assign formID = formInfo.id | prepend: "_"%}
    {% endif %}

    {% form 'customer_address', formInfo %}
      <div class="input-wrapper">
        <label for="customer_addresses_first_name{{ formID }}">{{ 'customer.addresses.first_name' | t }}</label>
        <input type="text" name="address[first_name]" value="{{form.first_name}}" id="customer_addresses_first_name{{ formID }}" />
      </div>
      <div class="input-wrapper">
        <label for="customer_addresses_last_name{{ formID }}">{{ 'customer.addresses.last_name' | t }}</label>
        <input type="text" name="address[last_name]" value="{{form.last_name}}" id="customer_addresses_last_name{{ formID }}" />
      </div>
      <div class="input-wrapper">
        <label for="customer_addresses_company{{ formID }}">{{ 'customer.addresses.company' | t }}</label>
        <input type="text" name="address[company]" value="{{form.company}}" id="customer_addresses_company{{ formID }}" />
      </div>
      <div class="input-wrapper">
        <label for="customer_addresses_address1{{ formID }}">{{ 'Street Address' }}</label>
        <input type="text" name="address[address1]" value="{{form.address1}}" id="customer_addresses_address1{{ formID }}" />
      </div>
      <div class="input-wrapper">
        <label for="customer_addresses_address2{{ formID }}">{{ 'Suburb' }}</label>
        <input type="text" name="address[address2]" value="{{form.address2}}" id="customer_addresses_address2{{ formID }}" />
      </div>
      <div class="input-wrapper">
        <label for="customer_addresses_city{{ formID }}">{{ 'customer.addresses.city' | t }}</label>
        <input type="text" name="address[city]" value="{{form.city}}" id="customer_addresses_city{{ formID }}" />
      </div>
      {% if isNew %}
        <div class="input-wrapper">
          <label for="address-country">{{ 'customer.addresses.country' | t }}</label>
          <div class="select-wrapper">
            <div class="selected-text"></div>
            <select id="address-country" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>
          </div>
        </div>
        <div class="input-wrapper" id="address-province-container" style="display:none">
          <label for="address-province">{{ 'customer.addresses.province' | t }}</label>
          <div class="select-wrapper">
            <div class="selected-text"></div>
            <select id="address-province" class="new-address-province" name="address[province]" data-default="{{form.province}}"></select>
          </div>
        </div>
      {% else %}
        <div class="input-wrapper">
          <label for="address-country-{{form.id}}">{{ 'customer.addresses.country' | t }}</label>
          <div class="select-wrapper">
            <div class="selected-text"></div>
            <select id="address-country-{{form.id}}" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>
          </div>
        </div>
        <div class="input-wrapper" id="address-province-container-{{ address.id }}" style="display:none">
          <label for="address-province-{{ address.id }}">{{ 'customer.addresses.province' | t }}</label>
          <div class="select-wrapper">
            <div class="selected-text"></div>
            <select id="address-province-{{ address.id }}" name="address[province]" data-default="{{form.province}}"></select>
          </div>
        </div>
      {% endif %}
      <div class="input-wrapper">
        <label for="customer_addresses_zip{{ formID }}">{{ 'customer.addresses.zip' | t }}</label>
        <input type="text" name="address[zip]" value="{{form.zip}}" id="customer_addresses_zip{{ formID }}" />
      </div>
      <div class="input-wrapper">
        <label for="customer_addresses_phone{{ formID }}">{{ 'customer.addresses.phone' | t }}</label>
        <input type="text" name="address[phone]" value="{{form.phone}}" id="customer_addresses_phone{{ formID }}" />
      </div>
      <div class="inline-input-wrapper">
        {% capture defaultAddressID %}
          {% if isNew %}
            address_default_address_new
          {% else %}
            address_default_address{{ formID }}
          {% endif %}
        {% endcapture %}
        <label for="{{ defaultAddressID | strip_newlines | strip}}">
          {{ form.set_as_default_checkbox }}
          <span class="inline-label">
            {{ 'customer.addresses.set_as_default' | t }}
          </span>
        </label>
      </div>
      <div class="input-wrapper cta-container">
        <input class="button" type="submit" id="submit{{ formID }}" value="{{ 'general.general.submit' | t }}">
        {% unless isNew %}
          <button class="cancel-edit button secondary">{{ 'customer.general.cancel' | t }}</button>
        {% endunless %}
        {% if customer.addresses.size > 0 and isNew %}
          <button class="toggle-new-address button secondary">{{ 'customer.general.cancel' | t }}</button>
        {% endif %}
      </div>
    {% endform %}

and then added the following code to the top of the account page (customers/account.liquid) so when a customer accesses the account page after registering and they have 0 addresses on their profile they are redirected to add an address:

{% if customer.addresses.size == 0 %}
<meta content="0; url=/account?view=new-address" http-equiv="refresh" />
{% endif %}

The ?view=new-address is the link to the alternative account page we created above.