Customer Address Page

You can create a page to manage individual addresses for customers using the shop:customerAddress action. You can see a full example of custom address pages in our Bones theme:

Some notes on the structure of the page and form:

  • The page needs the addressId in the URL for the address to be loaded.
  • The page only shows the address form if the address can be found for the customer (by addressId).
  • The address is updating with a POST request with the form action set toshop:onUpdateCustomerAddress.


Address Form Fields

Variable Usage
address[id] Used to identify the address to update.
<input type="hidden" name="address[id]" value="{{ address.id }}">
address[first_name] Writes to the address' first_name field.
<input
    type="text"
    name="address[first_name]"
    value="{{ address.first_name }}"
    required>
address[last_name] Writes to the address' last_name field.
<input
    type="text"
    name="address[last_name]"
    value="{{ address.last_name }}"
    required>
address[phone] Writes to the address' phone field.
<input
    type="tel"
    name="address[phone]"
    value="{{ address.phone }}">
address[street_address] Writes to the address' street_address field.
<input
     type="text"
     name="address[street_address]"
     value="{{ address.street_address }}"
     required>
address[street_address_line2] Writes to the address' street_address_line2 field.
<input
    type="text"
    name="address[street_address_line2]"
    value="{{ address.street_address_line2 }}">
address[city] Writes to the address' city field.
<input
    type="text"
    name="address[city]"
    value="{{ address.city }}"
    required>
address[postal_code] Writes to the address' postal_code field.
<input
    type="text"
    name="address[postal_code]"
    value="{{ address.postal_code }}"
    required>
addresss[shop_country_id] Writes to the address' shop_country_id field.
<select
        name="address[shop_country_id]"
        data-current-state="{{ address.country.id }}"
        data-state-selector="#billing-state">
      {% for country in countries %}
      <option
          value="{{ country.id }}"
          {{ option_state(address.country.id, country.id) }}>
        {{ country.name }}
      </option>
      {% endfor %}
    </select>
address[shop_state_id] Writes to the address' shop_state_id field.
<select name="address[shop_state_id]" id="billing-state">
    {% if states | length %}
        <option value="">- Select a State -</option>
        {% for state in states %}
            <option value="{{ state.id }}" {{ option_state(selected, state.id) }}>
            {{ state.name }}
            </option>
        {% endfor %}
    {% else %} {# No states for given country #}
        <option selected value="">- no states -</option>
    {% endif %}
</select>
address[is_default] Writes to the address' is_default field.
<input
    id="default_address"
    class="switch-input"
    type="checkbox"
    name="is_default"
    {{ address.is_default ? 'checked' : '' }}>