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
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>