customers/addresses.liquid

The customers/addresses.liquid template is used by visitors to manage their addresses used in the checkout.

Template Considerations

Adding a new address

To include a form that visitors can use to create a new address for their customer account, initialize a form tag with the parameters 'customer_address', customer.new_address:

{% form 'customer_address', customer.new_address %}
  ...
    <!-- form contents here -->
  ...
{% endform %}

In order for this form to be submitted successfully, the form elements for the address attributes must have a specific name attribute. They are listed in the table below:

Input	Type	Required name attribute
First name	text	address[first_name]
Last name	text	address[last_name]
Company	text	address[company]
Address 1	text	address[address1]
Address 2	text	address[address2]
City	text	address[city]
Country	select	address[country]
Province	select	address[province]
ZIP/Postal Code	text	address[zip]
Phone Number	tel	address[phone]

For example, the <input> for First name may look like this:

<input type="text" name="address[first_name]" size="40" />

Editing an existing address

Within the for loop to output the customer account's addresses, include a form tag with the parameters 'customer_address', address. Similar to the form for adding a new address, the edit form requires a specific set of inputs and name attributes:

 {% for address in customer.addresses %} ... {% form
'customer_address', address %} ... {% endform %} ... {% endfor %}

Delete an existing address

Create an HTML form in the addresses.liquid template:

<form
  class="address-delete-form"
  method="post"
  action="/account/addresses/{{ address.id }}"
  data-confirm-message="{{ 'customer.addresses.delete_confirm' | t }}"
>
  <input type="hidden" name="_method" value="delete" />
  <button type="submit">
    {{ 'customer.addresses.delete' | t }}
  </button>
</form>

Attach a confirmation dialog in addresses.js for when customers click on the delete button:

document.querySelectorAll('.address-delete-form').forEach(deleteForm => {
  deleteForm.addEventListener('submit', event => {
    const confirmMessage = event.target.getAttribute('data-confirm-message');

    if (
      !window.confirm(
        confirmMessage || 'Are you sure you wish to delete this address?'
      )
    ) {
      event.preventDefault();
    }
  });
});

Using the `themes-addresses` package

You can use the themes-addresses package to populate the Province field with the appropriate values based on the country selection. For example, when the visitor selects Canada in the country drop-down, the provinces drop-down is updated with Canadian provinces.

You can install it with yarn or npm

Terminal

yarn add @shopify/theme-addresses

//or

npm install @shopify/theme-addresses

Adding the country options

The all_country_option_tags and country_option_tags Liquid tags generate the country and province options. Be sure to include them before any other scripts in the <head> section of your theme.liquid layout file as shown below:

<head>
...
<script>
  ...
  {% if template.directory == 'customers' %}
    theme.allCountryOptionTags = {{ all_country_option_tags | json }};
  {% endif %}
</script>

{% comment %}
  Main theme js bundle that imports theme-addresses package
{% endcomment %}

<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
</head>

Building the country and province selectors

The following is an example of how to use themes-addresses in addresses.js:

import {CountryProvinceSelector} from '@shopify/theme-addresses';

const countryProvinceSelector = new CountryProvinceSelector(window.theme.allCountryOptionTags);
const countrySelector = document.querySelector('#address_country_new');
const provinceSelector = document.querySelector('#address_province_new');
const provinceWrapper = document.querySelector('#address_province_wrapper_new');

countryProvinceSelector.build(countrySelector, provinceSelector, {
    onCountryChange: (provinces) => provinceWrapper.classList.toggle(hideClass, !provinces.length),
});

If your project doesn't use any package managers, you can download the following library and include it in your project files:

In your addresses.js, you can reference CountryProvinceSelector as follows:

 {% comment %} Add theme-addresses.min.js package to your theme's asset
folder {% endcomment %}

<script src="{{ 'theme-addresses.min.js' | asset_url }}" defer="defer"></script>

{% comment %} CountryProvinceSelector is available at
window.Shopify.theme.addresses {% endcomment %}

<script>
  const countryProvinceSelector = window.Shopify.theme.addresses.CountryProvinceSelector(
    window.theme.allCountryOptionTags
  );
</script>