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>

Ready to start selling with Shopify?

Try it free