Custom Checkout page address fields

[Janhavi]

I want to add some custom address fields like "Nearest Landmark" in the address section of the Shopify Checkout page. I can see 2 liquids: orders.liquid & addresses.liquid which has some address info. Please let me know how and where to embed in the code. 

<!-- /templates/customers/addressess.liquid -->
<div class="box">
  <div class="wrapper">

    {%- paginate customer.addresses by 5 -%}
    <div class="section-header">
      <div class="page-title-wrapper">
        <h1 class="page-title">{{ 'customer.account.title' | t }}</h1>
      </div>
      <p>
        <a href="{{ routes.account_url }}">
          <span class="{{ settings.icon }}" aria-hidden="true">arrow_back</span> {{ 'customer.account.return' | t }}
        </a>
      </p>
    </div>

    <div {% if settings.dbtfy_infinite_scroll %}id="infiniteScrollContainer" {% endif %}class="grid grid-spacer">
      <div class="grid__item large--three-twelfths medium--three-twelfths large--sticky mediumm--sticky sticky-check-header">
        <h2 class="h3 small--text-center">
          {{ 'customer.addresses.title' | t }}
          <span>({{ customer.addresses_count }})</span>
        </h2>

        <button type="button" class="btn btn-outline-primary btn--small full spacer-bottom" onclick="Shopify.CustomerAddress.toggleNewForm(); return false;">{{ 'customer.addresses.add_new' | t }}</button>

        {%- unless customer.addresses_count == 0 -%}
        <div class="card-group">
          {%- for address in customer.addresses -%}
          <div class="card">
            <div class="card-body">
              {%- if address == customer.default_address -%}
              <p>
                <span class="badge">{{ 'customer.addresses.default' | t }}</span>
              </p>
              {%- endif -%}

              {{ address | format_address }}
            </div>
            <div class="card-footer card-footer-xs">
              <span class="{{ settings.icon }}">edit</span>
              {{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }}
              |
              <span class="{{ settings.icon }}">delete</span>
              {{ 'customer.addresses.delete' | t | delete_customer_address_link: address.url }}
            </div>
          </div>
          {%- endfor -%}
        </div>
        {%- endunless -%}
      </div>

      <div class="grid__item large--nine-twelfths medium--nine-twelfths">
        <!-- new address -->
        <div id="AddAddress" class="address-form fadeInUp" {% unless customer.addresses_count == 0 %}style="display: none;"{% endunless %}>
          {%- form 'customer_address', customer.new_address, class: 'form-vertical' -%}
            <h2 class="h3">{{ 'customer.addresses.add_new' | t }}</h2>

            <div class="grid grid-small">
              <div class="grid__item large--six-twelfths medium--six-twelfths">
                <label for="AddressFirstNameNew">{{ 'customer.addresses.first_name' | t }}</label>
                <input type="text"
                id="AddressFirstNameNew"
                name="address[first_name]"
                value="{{form.first_name}}"
                autocapitalize="words"
                placeholder="{{ 'customer.addresses.first_name' | t }}">
              </div>

              <div class="grid__item large--six-twelfths medium--six-twelfths">
                <label for="AddressLastNameNew">{{ 'customer.addresses.last_name' | t }}</label>
                <input type="text"
                id="AddressLastNameNew"
                name="address[last_name]"
                value="{{form.last_name}}"
                autocapitalize="words"
                placeholder="{{ 'customer.addresses.last_name' | t }}">
              </div>
            </div>

            <label for="AddressCompanyNew">{{ 'customer.addresses.company' | t }}</label>
            <input type="text"
            id="AddressCompanyNew"
            name="address[company]"
            value="{{form.company}}"
            autocapitalize="words"
            placeholder="{{ 'customer.addresses.company' | t }}">

                      <label for="AddressAddress1">{{ 'customer.addresses.address1' | t }}</label>
            <input type="text"
            id="AddressAddress1"
            name="address[address1]"
            value="{{form.address1}}"
            autocapitalize="words"
            placeholder="{{ 'customer.addresses.address1' | t }}">
            
                      <label for="AddressAddress2">{{ 'customer.addresses.address2' | t }}</label>
            <input type="text"
            id="AddressAddress2"
            name="address[address2]"
            value="{{form.address2}}"
            autocapitalize="words"
            placeholder="{{ 'customer.addresses.address2 | t }}">

              <div class="grid__item large--six-twelfths medium--six-twelfths">
                <label for="AddressCityNew">{{ 'customer.addresses.city' | t }}</label>
                <input type="text"
                id="AddressCityNew"
                name="address[city]"
                value="{{form.city}}"
                autocapitalize="words"
                placeholder="{{ 'customer.addresses.city' | t }}">
              </div>

              <div class="grid__item large--six-twelfths medium--six-twelfths">
                <label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
                <select id="AddressCountryNew"
                name="address[country]"
                data-default="{{form.country}}">
                  {{ all_country_option_tags }}
                </select>
              </div>

              <div class="grid__item" id="AddressProvinceContainerNew" style="display:none">
                <label for="AddressProvinceNew">{{ 'customer.addresses.province' | t }}</label>
                <select id="AddressProvinceNew"
                name="address[province]"
                data-default="{{form.province}}">
                </select>
              </div>

              <div class="grid__item large--six-twelfths medium--six-twelfths">
                <label for="AddressZipNew">{{ 'customer.addresses.zip' | t }}</label>
                <input type="text"
                id="AddressZipNew"
                name="address[zip]"
                value="{{form.zip}}"
                autocapitalize="characters"
                placeholder="{{ 'customer.addresses.zip' | t }}">
              </div>
            </div>

            <label for="AddressPhoneNew">{{ 'customer.addresses.phone' | t }}</label>
            <input type="tel"
            id="AddressPhoneNew"
            name="address[phone]"
            value="{{form.phone}}"
            placeholder="{{ 'customer.addresses.phone' | t }}">

            <p class="checkbox">
              {{ form.set_as_default_checkbox }}
              <label for="address_default_address_new">{{ 'customer.addresses.set_default' | t }}</label>
            </p>

            <p>
              <button type="submit" class="btn btn--primary">
                <span class="btn__text">
                  {{ 'customer.addresses.add' | t }}
                </span>
              </button>
            </p>

            <a href="#" onclick="Shopify.CustomerAddress.toggleNewForm();">
              <span class="{{ settings.icon }}">close</span>
              {{ 'customer.addresses.cancel' | t }}
            </a>
          {%- endform -%}
        </div>

        <!-- current addresses -->
        {%- unless customer.addresses_count == 0 -%}
          {%- for address in customer.addresses -%}
          <div id="EditAddress_{{ address.id }}" class="address-form fadeInUp" {% unless address == customer.default_address %}style="display:none;"{% endunless %}>
            {%- form 'customer_address', address, class: 'form-vertical' -%}
              <h2 class="h3">{{ 'customer.addresses.edit_address' | t }}</h2>

              {%- if form.errors -%}
              {{ form.errors | default_errors }}
              {%- endif -%}

              <div class="grid grid-small">
                <div class="grid__item large--six-twelfths medium--six-twelfths">
                  <label for="AddressFirstName_{{ form.id }}">{{ 'customer.addresses.first_name' | t }}</label>
                  <input type="text"
                  id="AddressFirstName_{{ form.id }}"
                  name="address[first_name]"
                  value="{{ form.first_name }}"
                  autocapitalize="words">
                </div>

                <div class="grid__item large--six-twelfths medium--six-twelfths">
                  <label for="AddressLastName_{{ form.id }}">{{ 'customer.addresses.last_name' | t }}</label>
                  <input type="text"
                  id="AddressLastName_{{ form.id }}"
                  name="address[last_name]"
                  value="{{ form.last_name }}"
                  autocapitalize="words">
                </div>
              </div>

              <label for="AddressCompany_{{ form.id }}">{{ 'customer.addresses.company' | t }}</label>
              <input type="text"
              id="AddressCompany_{{ form.id }}"
              name="address[company]"
              value="{{ form.company }}"
              autocapitalize="words">

              <div class="grid grid-small">
                <div class="grid__item large--six-twelfths medium--six-twelfths">
                  <label for="AddressAddress1_{{ form.id }}">{{ 'customer.addresses.address1' | t }}</label>
                  <input type="text"
                  id="AddressAddress1_{{ form.id }}"
                  name="address[address1]"
                  value="{{ form.address1 }}"
                  autocapitalize="words">
                </div>

                <div class="grid__item large--six-twelfths medium--six-twelfths">
                  <label for="AddressAddress2_{{ form.id }}">{{ 'customer.addresses.address2' | t }}</label>
                  <input type="text"
                  id="AddressAddress2_{{ form.id }}"
                  name="address[address2]"
                  value="{{ form.address2 }}"
                  autocapitalize="words">
                </div>

                <div class="grid__item large--six-twelfths medium--six-twelfths">
                  <label for="AddressCity_{{ form.id }}">{{ 'customer.addresses.city' | t }}</label>
                  <input type="text"
                  id="AddressCity_{{ form.id }}"
                  name="address[city]"
                  value="{{ form.city }}"
                  autocapitalize="words">
                </div>

                <div class="grid__item large--six-twelfths medium--six-twelfths">
                  <label for="AddressCountry_{{ form.id }}">{{ 'customer.addresses.country' | t }}</label>
                  <select id="AddressCountry_{{ form.id }}"
                  name="address[country]"
                  data-default="{{ form.country }}">
                    {{ all_country_option_tags }}
                  </select>
                </div>

                <div class="grid__item large--six-twelfths medium--six-twelfths">
                  <div id="AddressProvinceContainer_{{ form.id }}" style="display:none">
                    <label for="AddressProvince_{{ form.id }}">{{ 'customer.addresses.province' | t }}</label>
                    <select id="AddressProvince_{{ form.id }}"
                    name="address[province]"
                    data-default="{{ form.province }}">
                    </select>
                  </div>
                </div>

                <div class="grid__item large--six-twelfths medium--six-twelfths">
                  <label for="AddressZip_{{ form.id }}">{{ 'customer.addresses.zip' | t }}</label>
                  <input type="text"
                  id="AddressZip_{{ form.id }}"
                  name="address[zip]"
                  value="{{ form.zip }}"
                  autocapitalize="characters">
                </div>
              </div>

              <label for="AddressPhone_{{ form.id }}">{{ 'customer.addresses.phone' | t }}</label>
              <input type="tel"
              id="AddressPhone_{{ form.id }}"
              name="address[phone]"
              value="{{ form.phone }}">

              <p class="checkbox">
                {%- if address == customer.default_address -%}
                {{ form.set_as_default_checkbox | replace: 'input', 'input checked="checked"' }}
                {%- else -%}
                {{ form.set_as_default_checkbox }}
                {%- endif -%}

                <label for="address_default_address_{{ form.id }}">{{ 'customer.addresses.set_default' | t }}</label>
              </p>

              <p>
                <button type="submit" class="btn btn--primary small--full">
                  <span class="btn__text">
                    {{ 'customer.addresses.update' | t }}
                  </span>
                </button>
              </p>

              <a href="#" onclick="Shopify.CustomerAddress.toggleForm({{ form.id }});">
                <span class="{{ settings.icon }}">close</span>
                {{ 'customer.addresses.cancel' | t }}
              </a>
            {%- endform -%}
          </div>
          {%- endfor -%}
        {%- endunless -%}
      </div>

    </div>

    {%- render "pagination" with paginate as paginate -%}

  </div>
</div>

<script>
  // Initialize observers on address selectors
  new Shopify.CountryProvinceSelector('AddressCountryNew', 'AddressProvinceNew', {
    hideElement: 'AddressProvinceContainerNew'
  });

  // Setup province selector on each customer address
  {% for address in customer.addresses %}
    new Shopify.CountryProvinceSelector('AddressCountry_{{address.id}}', 'AddressProvince_{{address.id}}', {
      hideElement: 'AddressProvinceContainer_{{address.id}}'}
    );
  {% endfor %}

  // Modified contents of customer_area.js (global asset)
  Shopify.CustomerAddress = {
    toggleForm: function(id) {
      var editEl = document.getElementById('EditAddress_'+id);
      editEl.style.display = editEl.style.display == 'none' ? '' : 'none';
      return false;
    },

    toggleNewForm: function() {
      var el = document.getElementById('AddAddress');
      el.style.display = el.style.display == 'none' ? '' : 'none';
      return false;
    },

    destroy: function(url, confirm_msg) {
      if (confirm(confirm_msg || "Are you sure you wish to delete this address?")) {
        Shopify.postLink(url, {'parameters': {'_method': 'delete'}});
      }
    }
  }
</script>

{%- endpaginate -%}

[PageFly-Theodor]

Hi @Gustavo1105,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Custom Checkout Page Address Fields, let’s try this solution:

To add custom fields like "Nearest Landmark" to the customer addresses in Shopify, you can edit the addresses.liquid template.

Here are the steps:

1. In your Shopify admin, go to Online Store > Themes.
2. Edit the theme you are using.
3. In the Templates section, find the templates/customers/addresses.liquid file.
4. In the form section where the address fields are, add your new field like:

<div class="grid__item">
  <label for="AddressLandmark">Nearest Landmark</label> 
  <input type="text" id="AddressLandmark" name="address[landmark]" value="{{form.landmark}}"> 
</div>

             5.Save and preview your changes.

This will add the "Nearest Landmark" field to the new/edit address forms on the customer account page.

To show this field on the checkout page, you need to edit the checkout.liquid template and find the section where the address fields are rendered. Add your custom field there similarly.

Make sure to sync your theme files after editing for the changes to take effect.

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

[Janhavi]

I have tried this solution it doesnt seem to work. There is no checkout.liquid template btw, However there is an order.liquid template (adding below). Please let me know what modifications to do there. 

<!-- /templates/customers/order.liquid -->
<div class="box">
  <div class="wrapper">

    <div class="section-header">
      <div class="page-title-wrapper">
        <h1 class="page-title">{{ 'customer.account.title' | t }}</h1>
      </div>
      <a href="{{ routes.account_url }}">
        <span class="{{ settings.icon }}" aria-hidden="true">arrow_back</span> {{ 'customer.account.return' | t }}
      </a>
    </div>

    <div class="grid grid-spacer">
      <div class="grid__item large--three-twelfths medium--three-twelfths large--sticky mediumm--sticky sticky-check-header">

        <h3>{{ 'customer.order.billing_address' | t }}</h3>

        <div class="card spacer-bottom">
          <div class="card-body">
            <p>
              {{ 'customer.order.payment_status' | t }}:
              <span class="badge">{{ order.financial_status_label }}</span>
            </p>
            <p>
              {{ order.billing_address.name }}
              {%- if order.billing_address.company != '' -%}
                {{ order.billing_address.company }}<br>
              {%- endif -%}
              {{ order.billing_address.street }}<br>
              {{ order.billing_address.city }}<br>
              {%- if order.billing_address.province != '' -%}
                {{ order.billing_address.province }}<br>
              {%- endif -%}
              {{ order.billing_address.zip | upcase }}<br>
              {{ order.billing_address.country }}<br>
              {{ order.billing_address.phone }}
            </p>
          </div>
        </div>

        <h3>{{ 'customer.order.shipping_address' | t }}</h3>

        <div class="card">
          <div class="card-body">
            <p>
              {{ 'customer.order.fulfillment_status' | t }}:
              <span class="badge">{{ order.fulfillment_status_label }}</span>
            </p>
            <p>
              {{ order.shipping_address.name }}
              {%- if order.shipping_address.company != '' -%}
                {{ order.shipping_address.company }}<br>
              {%- endif -%}
              {{ order.shipping_address.street }}<br>
              {{ order.shipping_address.city }}<br>
              {%- if order.shipping_address.province != '' -%}
                {{ order.shipping_address.province }}<br>
              {%- endif -%}
              {{ order.shipping_address.zip | upcase }}<br>
              {{ order.shipping_address.country }}<br>
              {{ order.shipping_address.phone }}
            </p>
          </div>
        </div>
      </div>

      <div class="grid__item large--nine-twelfths medium--nine-twelfths">
        <div class="grid">
          <div class="grid__item large--six-twelfths medium--six-twelfths">
            <h2 class="h3">{{ 'customer.order.title' | t: name: order.name }}</h2>
          </div>
          <div class="grid__item large--six-twelfths medium--six-twelfths large--text-right medium--text-right">
            <p>
              <span class="{{ settings.icon }}">calendar_today</span>
              <span class="date">{{ 'customer.order.date' | t: date: order.created_at | date: "%B %d, %Y %I:%M%p" }}</span>
            </p>
          </div>
        </div>

        {%- if order.cancelled -%}
          <div class="errors">
            {%- assign cancelled_at = order.cancelled_at | date: "%B %d, %Y %I:%M%p" -%}
            <p class="h5">{{ 'customer.order.cancelled' | t: date: cancelled_at }}</p>
            <p>{{ 'customer.order.cancelled_reason' | t: reason: order.cancel_reason }}</p>
          </div>
        {%- endif -%}

        <div class="table-wrap">
          <table class="order-table">
            <thead>
              <tr>
                <th class="text-left">{{ 'customer.order.product' | t }}</th>
                <th>{{ 'customer.order.sku' | t }}</th>
                <th class="text-right">{{ 'customer.order.price' | t }}</th>
                <th class="text-right">{{ 'customer.order.quantity' | t }}</th>
                <th class="text-right">{{ 'customer.order.total' | t }}</th>
              </tr>
            </thead>
            <tbody>
              {%- for line_item in order.line_items -%}
              <tr id="{{ line_item.key }}" class="table__section">
                <td class="text-left">
                  <div class="grid grid-small align-center">
                    {% if line_item.image != blank %}
                    <div class="grid__item large--three-twelfths medium--three-twelfths flex-shrink">
                      <a href="{{ line_item.product.url }}" class="product--wrapper media-wrapper image-link" style="padding-top:{{ 1 | divided_by: line_item.image.aspect_ratio | times: 100}}%;">
                        <img class="product--image media lazyload"
                        {%- render 'lazysizes', img: line_item.image, img_type: 'responsive' -%}
                        alt="{{ block.settings.image.alt }}">
                      </a>
                    </div>
                    {% endif %}

                    <div class="grid__item small--hide">
                      {{ line_item.title | link_to: line_item.product.url }}
                    </div>
                  </div>

                  {%- if line_item.fulfillment -%}
                    <div class="order-notes">
                      {%- assign created_at = line_item.fulfillment.created_at | date: format: 'month_day_year' -%}
                      {{ 'customer.order.fulfilled_at' | t: date: created_at }}
                      <div>
                        {%- if line_item.fulfillment.tracking_url -%}
                          <a href="{{ line_item.fulfillment.tracking_url }}">
                            {{ 'customer.order.track_shipment' | t }}
                          </a>
                        {%- endif -%}
                        <div>
                          {{ line_item.fulfillment.tracking_company }}
                          {%- if line_item.fulfillment.tracking_number -%} #{{ line_item.fulfillment.tracking_number }} {%- endif -%}
                        </div>
                      </div>
                    </div>
                  {%- endif -%}
                </td>
                <td>{{ line_item.sku }}</td>
                <td class="text-right"><span><span class="money">{{ line_item.price | money }}</span></span></td>
                <td class="text-right">{{ line_item.quantity }}</td>
                <td class="text-right"><span><span class="money">{{ line_item.quantity | times: line_item.price | money }}</span></span></td>
              </tr>
              {%- endfor -%}
            </tbody>
            <tfoot class="text-right">
              <tr>
                <td colspan="4">{{ 'customer.order.subtotal' | t }}</td>
                <td><span><span class="money">{{ order.line_items_subtotal_price | money }}</span></span></td>
              </tr>

              {%- if order.cart_level_discount_applications != blank -%}
              <tr class="order_summary discount">
                {%- for discount_application in order.cart_level_discount_applications -%}
                  <td colspan="4" class="text-secondary">
                    {{ 'customer.order.discount' | t }}

                    {% if discount_application.title != blank %}
                    <span class="table-discount-code">
                      <span class="{{ settings.icon }}">local_offer</span>
                      {{ discount_application.title }}
                    </span>
                    {% endif %}
                  </td>

                  <td class="text-sale">
                    <span>-<span class="money">{{ discount_application.total_allocated_amount | money }}</span></span>
                  </td>
                {%- endfor -%}
              </tr>
              {%- endif -%}

              {%- for shipping_method in order.shipping_methods -%}
              <tr>
                <td colspan="4">{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }})</td>
                <td><span><span class="money">{{ shipping_method.price | money }}</span></span></td>
              </tr>
              {%- endfor -%}

              {%- for tax_line in order.tax_lines -%}
                <tr>
                  <td colspan="4">{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate_percentage }})</td>
                  <td>
                    <span>
                      <span class="money">{{ tax_line.price | money }}</span>
                    </span>
                  </td>
                </tr>
              {%- endfor -%}

              <tr>
                <th colspan="4" class="table__title">{{ 'customer.order.total' | t }}</th>
                <th class="table__title"><span><span class="money">{{ order.total_price | money }}</span></span></th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

    </div>

  </div>
</div>