Sort customer addresses

Shopify Partner
7 0 0

By default, Shopify shows the default address as the last one if there's already an existing address.

 

We are wanting to set it so that the default address always shows up as the first one on the page.

 

Has anyone created an efficient solution for this?

 

Thanks!

 

{%- paginate customer.addresses by 5 -%}
<div id="content" class="site-content account-content">
  <div class="container">
    <div class="row">
      <div id="primary" class="content-area col-md-12">
        <main id="main" class="site-main">
          <article class="page type-page status-publish">
            <div class="entry-content">
              <div class="rt-unero">
                {%- include 'account-navigation' with "addresses" -%}
                <div class="rt-unero-MyAccount-content">
                  <div class="myaccount-content">
                   {%- if customer.addresses.size > 0 -%}
                    <div class="addresses row">
                      {%- for address in customer.addresses -%}
                      <div class="col-md-6 col-xs-12">
                      <div class="address">
                        <h3>{{ 'customer.addresses.address' | t: count: forloop.index }} {% if address == customer.default_address %}<small>({{ 'customer.addresses.default' | t }})</small>{% endif %}</h3>
                        <address>{{ address | format_address }}</address>
                        <p>
                          <span class="edit-link"><button type="button" class="button post-edit-link address-edit-toggle" data-form-id="{{ address.id }}"><i class="fa fa-pencil"></i>{{ 'customer.addresses.edit' | t }}</button></span>
                          <span class="delete-link"><button type="button" id="delete-button" class="button post-delete-link address-delete" data-form-id="{{ address.id }}" data-confirm-message="{{ 'customer.addresses.delete_confirm' | t }}"><i class="fa fa-close"></i>{{ 'customer.addresses.delete' | t }}</button></span>
                        </p>
                      </div>
                      <div id="EditAddress_{{ address.id }}" class="hide">
                        {% form 'customer_address', address %}

                        <h3>{{ 'customer.addresses.edit_address' | t }}</h3>

                        <div class="rt-unero-address-fields">
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.first_name != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-first_name-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.first_name' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[first_name]" id="edit-first_name-{{ form.id }}" value="{{ form.first_name }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.last_name != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-last_name-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.last_name' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[last_name]" id="edit-last_name-{{ form.id }}" value="{{ form.last_name }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.company != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-company-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.company' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[company]" id="edit-company-{{ form.id }}" value="{{ form.company }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.address1 != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-address1-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.address1' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[address1]" id="edit-address1-{{ form.id }}" value="{{ form.address1 }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.address2 != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-address2-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.address2' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[address2]" id="edit-address2-{{ form.id }}" value="{{ form.address2 }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.city != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-city-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.city' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[city]" id="edit-city-{{ form.id }}" value="{{ form.city }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="selector-wrapper">
                              <label for="AddressCountry_{{ form.id }}">{{ 'customer.addresses.country' | t }}</label>
                              <span class="variation-select">
                                <select id="AddressCountry_{{ form.id }}" data-form-id="{{ form.id }}" class="address-country-option" name="address[country]" data-default="{{ form.country }}">{{ country_option_tags }}</select>
                              </span>
                            </p>
                          </div>
                          <div class="form-row form-row-wide" id="AddressProvinceContainer_{{ form.id }}" style="display:none">
                            <p class="selector-wrapper">
                              <label for="AddressProvince_{{ form.id }}">{{ 'customer.addresses.province' | t }}</label>
                              <span class="variation-select">
                                <select id="AddressProvince_{{ form.id }}" name="address[province]" data-default="{{ form.province }}"></select>
                              </span>
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.zip != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-zip-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.zip' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[zip]" id="edit-zip-{{ form.id }}" value="{{ form.zip }}" autocapitalize="characters" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.phone != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-phone-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.phone' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[phone]" id="edit-phone-{{ form.id }}" value="{{ form.phone }}" />
                            </p>
                          </div>
                          <div class="minimal-form">
                            {{ form.set_as_default_checkbox }}
                            <label for="address_default_address_{{ form.id }}">{{ 'customer.addresses.set_default' | t }}</label>
                          </div>
                          <div class="minimal-form">
                            <input type="submit" class="button" value="{{ 'customer.addresses.update' | t }}" />
                            <button type="button" id="cancel-button" class="text-link address-edit-toggle button" data-form-id="{{ form.id }}">{{ 'customer.addresses.cancel' | t }}</button>
                          </div>
                        </div>
                        {% endform %}
                      </div>
                      </div>
                      
                      {%- endfor -%}

                      {%- if paginate.pages > 1 -%}
                      {%- include 'pagination' -%}
                      {%- endif -%}
                      
                    {%- endif -%}
                    </div>
                    <div class="col-md-6 col-xs-12 new-address-col">
                      <div class="new-addresses">
                     <div class="new-address-button">
                       <button type="button" class="button address-new-toggle">{{ 'customer.addresses.add_new' | t }}</button>
                    </div>
                       <div id="AddressNewForm" class="form-vertical hide">
                      {% form 'customer_address', customer.new_address %}
                      <h3>{{ 'customer.addresses.add_new' | t }}</h3>
                      <div class="rt-unero-address-fields">
                        <div class="form-row form-row-first">
                          <p class="minimal-form-input no-text">
                            <label for="new-first_name">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.first_name' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[first_name]" id="new-first_name" value="{{ form.first_name }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-last">
                          <p class="minimal-form-input no-text">
                            <label for="new-last_name">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.last_name' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[last_name]" id="new-last_name" value="{{ form.last_name }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-company">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.company' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[company]" id="new-company" value="{{ form.company }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-address1">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.address1' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[address1]" id="new-address1" value="{{ form.address1 }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-address2">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.address2' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[address2]" id="new-address2" value="{{ form.address2 }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-city">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.city' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[city]" id="new-city" value="{{ form.city }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="selector-wrapper">
                            <label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
                            <span class="variation-select">
                              <select id="AddressCountryNew" name="address[country]" data-default="{{ form.country }}">{{ country_option_tags }}</select>
                            </span>
                          </p>
                        </div>
                        <div class="form-row form-row-wide" id="AddressProvinceContainerNew" style="display:none">
                          <p class="selector-wrapper">
                            <label for="AddressProvinceNew">{{ 'customer.addresses.province' | t }}</label>
                            <span class="variation-select">
                              <select id="AddressProvinceNew" name="address[province]" data-default="{{ form.province }}"></select>
                            </span>
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-zip">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.zip' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[zip]" id="new-zip" value="{{ form.zip }}" autocapitalize="characters" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-phone">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.phone' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[phone]" id="new-phone" value="{{ form.phone }}" />
                          </p>
                        </div>
                        <div class="minimal-form">
                          {{ form.set_as_default_checkbox }}
                          <label for="address_default_address_new">{{ 'customer.addresses.set_default' | t }}</label>
                        </div>
                        <div class="minimal-form">
                          <input type="submit" class="button" value="{{ 'customer.addresses.add' | t }}" />
                          <button type="button" class="text-link address-new-toggle button">{{ 'customer.addresses.cancel' | t }}</button>
                        </div>
                         </div>
                      {% endform %}
                    </div>
                  </div>
                    </div>
                </div>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </article>
        </main>
      </div>
    </div>
  </div>
</div> 
{%- endpaginate -%}

 

 

 

 

(addresses.liquid template)

0 Likes
Highlighted
Shopify Partner
79 15 15

Hi @kart 

 

The customer object has a default_address property.

 

You can use that property to output the information before the loop and exclude it from the loop.

 

{% if address.id == customer.default_address.id %}
    {% continue %}
{% endif %}
0 Likes
Highlighted
Shopify Partner
7 0 0

Hi @ikolarov,

 

Thank you for your help! Greatly appreciated.

 

I have done that but have a couple more questions, if you don't mind! 

 

1) What's the best way to exclude the default from the count in the loop? Should I add plus:1 to it?

 

2) Is it possible to sort by count and if so, how?

 

Thank you.

 

                  <div class="myaccount-content">
                   {%- if customer.addresses.size > 0 -%}
                    <div class="addresses row">
                      {%- for address in customer.addresses -%}
                      
                      <div class="col-md-6 col-xs-12">
                      {% if address.id == customer.default_address.id %}

                      <div class="address">
                        <h3>{{ 'customer.addresses.address' | t: count: 1 }} {% if address == customer.default_address %}<small>({{ 'customer.addresses.default' | t }})</small>{% endif %}</h3>
                        <address>{{ address | format_address }}</address>
                        <p>
                          <span class="edit-link"><button type="button" class="button post-edit-link address-edit-toggle" data-form-id="{{ address.id }}"><i class="fa fa-pencil"></i>{{ 'customer.addresses.edit' | t }}</button></span>
                          <span class="delete-link"><button type="button" id="delete-button" class="button post-delete-link address-delete" data-form-id="{{ address.id }}" data-confirm-message="{{ 'customer.addresses.delete_confirm' | t }}"><i class="fa fa-close"></i>{{ 'customer.addresses.delete' | t }}</button></span>
                        </p>
                      </div>
                        
                        {%- else -%}
                        
                         <div class="address">
                        <h3>{{ 'customer.addresses.address' | t: count: forloop.index }}</h3>
                        <address>{{ address | format_address }}</address>
                        <p>
                          <span class="edit-link"><button type="button" class="button post-edit-link address-edit-toggle" data-form-id="{{ address.id }}"><i class="fa fa-pencil"></i>{{ 'customer.addresses.edit' | t }}</button></span>
                          <span class="delete-link"><button type="button" id="delete-button" class="button post-delete-link address-delete" data-form-id="{{ address.id }}" data-confirm-message="{{ 'customer.addresses.delete_confirm' | t }}"><i class="fa fa-close"></i>{{ 'customer.addresses.delete' | t }}</button></span>
                        </p>
                      </div>
                        
                      {%- endif -%}
0 Likes
Highlighted
Shopify Partner
79 15 15

Hi @kart 

 

What's the best way to exclude the default from the count in the loop? Should I add plus:1 to it?

Is it possible to sort by count and if so, how?

I'm not sure I follow you here. Which count are you referring to?

 

Please have in mind that the current implementation doesn't' change anything from the initial code. The idea was to write the default_address outside of the loop so that you have control of it to be always on the first position and exclude it using the if statement with {% continue %} which will skip that loop and continue to the next one.

0 Likes
Highlighted
Shopify Partner
7 0 0

Hi @ikolarov

 

Thanks for your reply. Sorry for the confusion, I am personally new to liquid loops and my usual developers are away so I am trying to learn this myself. I appreciate your guidance!

 

The count I am referring to is the Default, which should always be #1. Then any other addresses, regardless of whether they are already in the customer's account or added after a default has been set should start from #2.

 

I have put the default_address outside the loop but now none of the addresses show. Please see code below - are you able to let me know whether I have something in the wrong position?

 

Thank you!

 

                   {%- if customer.addresses.size > 0 -%}
                    <div class="addresses row">
                      {% if address.id == customer.default_address.id %}
                      {%- for address in customer.addresses -%}
                      
                      <div class="col-md-6 col-xs-12">
                      <div class="address">
                        <h3>{{ 'customer.addresses.address' | t: count: 1 }} {% if address == customer.default_address %}<small>({{ 'customer.addresses.default' | t }})</small>{% endif %}</h3>
                        <address>{{ address | format_address }}</address>
                        <p>
                          <span class="edit-link"><button type="button" class="button post-edit-link address-edit-toggle" data-form-id="{{ address.id }}"><i class="fa fa-pencil"></i>{{ 'customer.addresses.edit' | t }}</button></span>
                          <span class="delete-link"><button type="button" id="delete-button" class="button post-delete-link address-delete" data-form-id="{{ address.id }}" data-confirm-message="{{ 'customer.addresses.delete_confirm' | t }}"><i class="fa fa-close"></i>{{ 'customer.addresses.delete' | t }}</button></span>
                        </p>
                      </div>
                        
                        {%- continue -%}
                        
                         <div class="address">
                        <h3>{{ 'customer.addresses.address' | t: count: forloop.index }}</h3>
                        <address>{{ address | format_address }}</address>
                        <p>
                          <span class="edit-link"><button type="button" class="button post-edit-link address-edit-toggle" data-form-id="{{ address.id }}"><i class="fa fa-pencil"></i>{{ 'customer.addresses.edit' | t }}</button></span>
                          <span class="delete-link"><button type="button" id="delete-button" class="button post-delete-link address-delete" data-form-id="{{ address.id }}" data-confirm-message="{{ 'customer.addresses.delete_confirm' | t }}"><i class="fa fa-close"></i>{{ 'customer.addresses.delete' | t }}</button></span>
                        </p>
                      </div>
                      
                      <div id="EditAddress_{{ address.id }}" class="hide">
                        {% form 'customer_address', address %}

                        <h3>{{ 'customer.addresses.edit_address' | t }}</h3>

                        <div class="rt-unero-address-fields">
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.first_name != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-first_name-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.first_name' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[first_name]" id="edit-first_name-{{ form.id }}" value="{{ form.first_name }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.last_name != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-last_name-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.last_name' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[last_name]" id="edit-last_name-{{ form.id }}" value="{{ form.last_name }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.company != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-company-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.company' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[company]" id="edit-company-{{ form.id }}" value="{{ form.company }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.address1 != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-address1-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.address1' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[address1]" id="edit-address1-{{ form.id }}" value="{{ form.address1 }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.address2 != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-address2-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.address2' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[address2]" id="edit-address2-{{ form.id }}" value="{{ form.address2 }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.city != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-city-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.city' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[city]" id="edit-city-{{ form.id }}" value="{{ form.city }}" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="selector-wrapper">
                              <label for="AddressCountry_{{ form.id }}">{{ 'customer.addresses.country' | t }}</label>
                              <span class="variation-select">
                                <select id="AddressCountry_{{ form.id }}" data-form-id="{{ form.id }}" class="address-country-option" name="address[country]" data-default="{{ form.country }}">{{ country_option_tags }}</select>
                              </span>
                            </p>
                          </div>
                          <div class="form-row form-row-wide" id="AddressProvinceContainer_{{ form.id }}" style="display:none">
                            <p class="selector-wrapper">
                              <label for="AddressProvince_{{ form.id }}">{{ 'customer.addresses.province' | t }}</label>
                              <span class="variation-select">
                                <select id="AddressProvince_{{ form.id }}" name="address[province]" data-default="{{ form.province }}"></select>
                              </span>
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.zip != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-zip-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.zip' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[zip]" id="edit-zip-{{ form.id }}" value="{{ form.zip }}" autocapitalize="characters" />
                            </p>
                          </div>
                          <div class="form-row form-row-wide">
                            <p class="minimal-form-input {% if form.phone != '' %}has{% else %}no{% endif %}-text">
                              <label for="edit-phone-{{ form.id }}">
                                <span class="text"><span class="text-inner">{{ 'customer.addresses.phone' | t }}</span></span>
                              </label>
                              <input type="text" class="input-text" name="address[phone]" id="edit-phone-{{ form.id }}" value="{{ form.phone }}" />
                            </p>
                          </div>
                          <div class="minimal-form">
                            {{ form.set_as_default_checkbox }}
                            <label for="address_default_address_{{ form.id }}">{{ 'customer.addresses.set_default' | t }}</label>
                          </div>
                          <div class="minimal-form">
                            <input type="submit" class="button" value="{{ 'customer.addresses.update' | t }}" />
                            <button type="button" id="cancel-button" class="text-link address-edit-toggle button" data-form-id="{{ form.id }}">{{ 'customer.addresses.cancel' | t }}</button>
                          </div>
                        </div>
                        {% endform %}
                      </div>
                      </div>
                      
                      {%- endfor -%}
                      {%- endif -%}

                      {%- if paginate.pages > 1 -%}
                      {%- include 'pagination' -%}
                      {%- endif -%}
                      
                    {%- endif -%}

 

0 Likes
Highlighted
Shopify Partner
79 15 15

Hi @kart 

 

Create a snippet with the for body and call it snippets/address-body.liquid and add the following code in it.

 

<div class="col-md-6 col-xs-12">
<div class="address">
<h3>{{ 'customer.addresses.address' | t: count: forloop.index }} {% if address == customer.default_address %}<small>({{ 'customer.addresses.default' | t }})</small>{% endif %}</h3>
<address>{{ address | format_address }}</address>
<p>
    <span class="edit-link"><button type="button" class="button post-edit-link address-edit-toggle" data-form-id="{{ address.id }}"><i class="fa fa-pencil"></i>{{ 'customer.addresses.edit' | t }}</button></span>
    <span class="delete-link"><button type="button" id="delete-button" class="button post-delete-link address-delete" data-form-id="{{ address.id }}" data-confirm-message="{{ 'customer.addresses.delete_confirm' | t }}"><i class="fa fa-close"></i>{{ 'customer.addresses.delete' | t }}</button></span>
</p>
</div>
<div id="EditAddress_{{ address.id }}" class="hide">
{% form 'customer_address', address %}

<h3>{{ 'customer.addresses.edit_address' | t }}</h3>

<div class="rt-unero-address-fields">
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.first_name != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-first_name-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.first_name' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[first_name]" id="edit-first_name-{{ form.id }}" value="{{ form.first_name }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.last_name != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-last_name-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.last_name' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[last_name]" id="edit-last_name-{{ form.id }}" value="{{ form.last_name }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.company != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-company-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.company' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[company]" id="edit-company-{{ form.id }}" value="{{ form.company }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.address1 != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-address1-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.address1' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[address1]" id="edit-address1-{{ form.id }}" value="{{ form.address1 }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.address2 != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-address2-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.address2' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[address2]" id="edit-address2-{{ form.id }}" value="{{ form.address2 }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.city != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-city-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.city' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[city]" id="edit-city-{{ form.id }}" value="{{ form.city }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="selector-wrapper">
        <label for="AddressCountry_{{ form.id }}">{{ 'customer.addresses.country' | t }}</label>
        <span class="variation-select">
        <select id="AddressCountry_{{ form.id }}" data-form-id="{{ form.id }}" class="address-country-option" name="address[country]" data-default="{{ form.country }}">{{ country_option_tags }}</select>
        </span>
    </p>
    </div>
    <div class="form-row form-row-wide" id="AddressProvinceContainer_{{ form.id }}" style="display:none">
    <p class="selector-wrapper">
        <label for="AddressProvince_{{ form.id }}">{{ 'customer.addresses.province' | t }}</label>
        <span class="variation-select">
        <select id="AddressProvince_{{ form.id }}" name="address[province]" data-default="{{ form.province }}"></select>
        </span>
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.zip != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-zip-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.zip' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[zip]" id="edit-zip-{{ form.id }}" value="{{ form.zip }}" autocapitalize="characters" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.phone != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-phone-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.phone' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[phone]" id="edit-phone-{{ form.id }}" value="{{ form.phone }}" />
    </p>
    </div>
    <div class="minimal-form">
    {{ form.set_as_default_checkbox }}
    <label for="address_default_address_{{ form.id }}">{{ 'customer.addresses.set_default' | t }}</label>
    </div>
    <div class="minimal-form">
    <input type="submit" class="button" value="{{ 'customer.addresses.update' | t }}" />
    <button type="button" id="cancel-button" class="text-link address-edit-toggle button" data-form-id="{{ form.id }}">{{ 'customer.addresses.cancel' | t }}</button>
    </div>
</div>
{% endform %}
</div>
</div>

Then change your address.liquid code to the following:

 

{%- paginate customer.addresses by 5 -%}
<div id="content" class="site-content account-content">
  <div class="container">
    <div class="row">
      <div id="primary" class="content-area col-md-12">
        <main id="main" class="site-main">
          <article class="page type-page status-publish">
            <div class="entry-content">
              <div class="rt-unero">
                {%- include 'account-navigation' with "addresses" -%}
                <div class="rt-unero-MyAccount-content">
                  <div class="myaccount-content">
                   {%- if customer.addresses.size > 0 -%}
                    <div class="addresses row">
                      {% include 'address-body' address: customer.default_address %}

                      {%- for address in customer.addresses -%}
                        {% include 'address-body' %}
                      {%- endfor -%}

                      {%- if paginate.pages > 1 -%}
                      {%- include 'pagination' -%}
                      {%- endif -%}
                      
                    {%- endif -%}
                    </div>
                    <div class="col-md-6 col-xs-12 new-address-col">
                      <div class="new-addresses">
                     <div class="new-address-button">
                       <button type="button" class="button address-new-toggle">{{ 'customer.addresses.add_new' | t }}</button>
                    </div>
                       <div id="AddressNewForm" class="form-vertical hide">
                      {% form 'customer_address', customer.new_address %}
                      <h3>{{ 'customer.addresses.add_new' | t }}</h3>
                      <div class="rt-unero-address-fields">
                        <div class="form-row form-row-first">
                          <p class="minimal-form-input no-text">
                            <label for="new-first_name">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.first_name' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[first_name]" id="new-first_name" value="{{ form.first_name }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-last">
                          <p class="minimal-form-input no-text">
                            <label for="new-last_name">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.last_name' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[last_name]" id="new-last_name" value="{{ form.last_name }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-company">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.company' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[company]" id="new-company" value="{{ form.company }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-address1">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.address1' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[address1]" id="new-address1" value="{{ form.address1 }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-address2">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.address2' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[address2]" id="new-address2" value="{{ form.address2 }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-city">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.city' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[city]" id="new-city" value="{{ form.city }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="selector-wrapper">
                            <label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
                            <span class="variation-select">
                              <select id="AddressCountryNew" name="address[country]" data-default="{{ form.country }}">{{ country_option_tags }}</select>
                            </span>
                          </p>
                        </div>
                        <div class="form-row form-row-wide" id="AddressProvinceContainerNew" style="display:none">
                          <p class="selector-wrapper">
                            <label for="AddressProvinceNew">{{ 'customer.addresses.province' | t }}</label>
                            <span class="variation-select">
                              <select id="AddressProvinceNew" name="address[province]" data-default="{{ form.province }}"></select>
                            </span>
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-zip">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.zip' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[zip]" id="new-zip" value="{{ form.zip }}" autocapitalize="characters" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-phone">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.phone' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[phone]" id="new-phone" value="{{ form.phone }}" />
                          </p>
                        </div>
                        <div class="minimal-form">
                          {{ form.set_as_default_checkbox }}
                          <label for="address_default_address_new">{{ 'customer.addresses.set_default' | t }}</label>
                        </div>
                        <div class="minimal-form">
                          <input type="submit" class="button" value="{{ 'customer.addresses.add' | t }}" />
                          <button type="button" class="text-link address-new-toggle button">{{ 'customer.addresses.cancel' | t }}</button>
                        </div>
                         </div>
                      {% endform %}
                    </div>
                  </div>
                    </div>
                </div>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </article>
        </main>
      </div>
    </div>
  </div>
</div> 
{%- endpaginate -%}


This should output the default address code before the other ones.

0 Likes
Highlighted
Shopify Partner
7 0 0

Hi @ikolarov 

 

Thanks for the instructions. That lists the default address first but without a number and then counts the second as #1, etc. 

 

It also shows another default address at the bottom (#3).

 

Please see screenshot attached. Can you please check?addresses-screenshot.png

 

Thanks again.

0 Likes
Highlighted
Shopify Partner
79 15 15

Forgot to add the if statement.

 

Here is the updated snippet:

 

 

{% assign num = num | default: 1 %}
<div class="col-md-6 col-xs-12">
<div class="address">
<h3>{{ 'customer.addresses.address' | t: count: num }} {% if address == customer.default_address %}<small>({{ 'customer.addresses.default' | t }})</small>{% endif %}</h3>
<address>{{ address | format_address }}</address>
<p>
    <span class="edit-link"><button type="button" class="button post-edit-link address-edit-toggle" data-form-id="{{ address.id }}"><i class="fa fa-pencil"></i>{{ 'customer.addresses.edit' | t }}</button></span>
    <span class="delete-link"><button type="button" id="delete-button" class="button post-delete-link address-delete" data-form-id="{{ address.id }}" data-confirm-message="{{ 'customer.addresses.delete_confirm' | t }}"><i class="fa fa-close"></i>{{ 'customer.addresses.delete' | t }}</button></span>
</p>
</div>
<div id="EditAddress_{{ address.id }}" class="hide">
{% form 'customer_address', address %}

<h3>{{ 'customer.addresses.edit_address' | t }}</h3>

<div class="rt-unero-address-fields">
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.first_name != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-first_name-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.first_name' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[first_name]" id="edit-first_name-{{ form.id }}" value="{{ form.first_name }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.last_name != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-last_name-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.last_name' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[last_name]" id="edit-last_name-{{ form.id }}" value="{{ form.last_name }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.company != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-company-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.company' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[company]" id="edit-company-{{ form.id }}" value="{{ form.company }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.address1 != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-address1-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.address1' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[address1]" id="edit-address1-{{ form.id }}" value="{{ form.address1 }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.address2 != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-address2-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.address2' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[address2]" id="edit-address2-{{ form.id }}" value="{{ form.address2 }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.city != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-city-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.city' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[city]" id="edit-city-{{ form.id }}" value="{{ form.city }}" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="selector-wrapper">
        <label for="AddressCountry_{{ form.id }}">{{ 'customer.addresses.country' | t }}</label>
        <span class="variation-select">
        <select id="AddressCountry_{{ form.id }}" data-form-id="{{ form.id }}" class="address-country-option" name="address[country]" data-default="{{ form.country }}">{{ country_option_tags }}</select>
        </span>
    </p>
    </div>
    <div class="form-row form-row-wide" id="AddressProvinceContainer_{{ form.id }}" style="display:none">
    <p class="selector-wrapper">
        <label for="AddressProvince_{{ form.id }}">{{ 'customer.addresses.province' | t }}</label>
        <span class="variation-select">
        <select id="AddressProvince_{{ form.id }}" name="address[province]" data-default="{{ form.province }}"></select>
        </span>
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.zip != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-zip-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.zip' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[zip]" id="edit-zip-{{ form.id }}" value="{{ form.zip }}" autocapitalize="characters" />
    </p>
    </div>
    <div class="form-row form-row-wide">
    <p class="minimal-form-input {% if form.phone != '' %}has{% else %}no{% endif %}-text">
        <label for="edit-phone-{{ form.id }}">
        <span class="text"><span class="text-inner">{{ 'customer.addresses.phone' | t }}</span></span>
        </label>
        <input type="text" class="input-text" name="address[phone]" id="edit-phone-{{ form.id }}" value="{{ form.phone }}" />
    </p>
    </div>
    <div class="minimal-form">
    {{ form.set_as_default_checkbox }}
    <label for="address_default_address_{{ form.id }}">{{ 'customer.addresses.set_default' | t }}</label>
    </div>
    <div class="minimal-form">
    <input type="submit" class="button" value="{{ 'customer.addresses.update' | t }}" />
    <button type="button" id="cancel-button" class="text-link address-edit-toggle button" data-form-id="{{ form.id }}">{{ 'customer.addresses.cancel' | t }}</button>
    </div>
</div>
{% endform %}
</div>
</div>

{% assign num = num | plus: 1 %}

 

Here is the updated address.liquid:

 

{%- paginate customer.addresses by 5 -%}
<div id="content" class="site-content account-content">
  <div class="container">
    <div class="row">
      <div id="primary" class="content-area col-md-12">
        <main id="main" class="site-main">
          <article class="page type-page status-publish">
            <div class="entry-content">
              <div class="rt-unero">
                {%- include 'account-navigation' with "addresses" -%}
                <div class="rt-unero-MyAccount-content">
                  <div class="myaccount-content">
                   {%- if customer.addresses.size > 0 -%}
                    <div class="addresses row">
                      {% assign num = 1 %}
                      {% include 'address-body' address: customer.default_address %}

                      {%- for address in customer.addresses -%}
                        {% if address.id == customer.default_address.id %}
                            {% continue %}
                        {% endif %}
                        {% include 'address-body' %}
                      {%- endfor -%}

                      {%- if paginate.pages > 1 -%}
                      {%- include 'pagination' -%}
                      {%- endif -%}
                      
                    {%- endif -%}
                    </div>
                    <div class="col-md-6 col-xs-12 new-address-col">
                      <div class="new-addresses">
                     <div class="new-address-button">
                       <button type="button" class="button address-new-toggle">{{ 'customer.addresses.add_new' | t }}</button>
                    </div>
                       <div id="AddressNewForm" class="form-vertical hide">
                      {% form 'customer_address', customer.new_address %}
                      <h3>{{ 'customer.addresses.add_new' | t }}</h3>
                      <div class="rt-unero-address-fields">
                        <div class="form-row form-row-first">
                          <p class="minimal-form-input no-text">
                            <label for="new-first_name">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.first_name' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[first_name]" id="new-first_name" value="{{ form.first_name }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-last">
                          <p class="minimal-form-input no-text">
                            <label for="new-last_name">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.last_name' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[last_name]" id="new-last_name" value="{{ form.last_name }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-company">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.company' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[company]" id="new-company" value="{{ form.company }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-address1">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.address1' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[address1]" id="new-address1" value="{{ form.address1 }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-address2">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.address2' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[address2]" id="new-address2" value="{{ form.address2 }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-city">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.city' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[city]" id="new-city" value="{{ form.city }}" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="selector-wrapper">
                            <label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
                            <span class="variation-select">
                              <select id="AddressCountryNew" name="address[country]" data-default="{{ form.country }}">{{ country_option_tags }}</select>
                            </span>
                          </p>
                        </div>
                        <div class="form-row form-row-wide" id="AddressProvinceContainerNew" style="display:none">
                          <p class="selector-wrapper">
                            <label for="AddressProvinceNew">{{ 'customer.addresses.province' | t }}</label>
                            <span class="variation-select">
                              <select id="AddressProvinceNew" name="address[province]" data-default="{{ form.province }}"></select>
                            </span>
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-zip">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.zip' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[zip]" id="new-zip" value="{{ form.zip }}" autocapitalize="characters" />
                          </p>
                        </div>
                        <div class="form-row form-row-wide">
                          <p class="minimal-form-input no-text">
                            <label for="new-phone">
                              <span class="text"><span class="text-inner">{{ 'customer.addresses.phone' | t }}</span></span>
                            </label>
                            <input type="text" class="input-text" name="address[phone]" id="new-phone" value="{{ form.phone }}" />
                          </p>
                        </div>
                        <div class="minimal-form">
                          {{ form.set_as_default_checkbox }}
                          <label for="address_default_address_new">{{ 'customer.addresses.set_default' | t }}</label>
                        </div>
                        <div class="minimal-form">
                          <input type="submit" class="button" value="{{ 'customer.addresses.add' | t }}" />
                          <button type="button" class="text-link address-new-toggle button">{{ 'customer.addresses.cancel' | t }}</button>
                        </div>
                         </div>
                      {% endform %}
                    </div>
                  </div>
                    </div>
                </div>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </article>
        </main>
      </div>
    </div>
  </div>
</div> 
{%- endpaginate -%}
0 Likes
Highlighted
Shopify Partner
7 0 0

Perfect! Thank you very much.

0 Likes
Highlighted
Shopify Partner
7 0 0

Hi @ikolarov,

 

Actually, I just tried clicking on the edit, delete and add a new address buttons and they don't work? Can you please check?

 

Thank you.

0 Likes