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

Ex addresses

Template Considerations

The customer_area.js and shopify_common.js global assets

The customer_area.js and shopify_common.js global asset files contain useful Javascript functions that can be used in addresses.liquid. Be sure to include them in the <head> section of your theme.liquid file as shown below:

{{ "shopify_common.js"  | shopify_asset_url | script_tag }}
{{ "customer_area.js"  | shopify_asset_url | script_tag }}

customer_area.js contains functions for toggling the visibility of address forms on and off, as well as deleting existing addresses.

shopify_common.js contains functions to update the contents of the Province <select> as you select different values in the Country <select>.

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. The form should be wrapped in a div with the id add_address that is hidden by default through CSS. The id is used by the function in customer_area.js for toggling.

<div id="add_address">
{% form 'customer_address', customer.new_address %}
    <!-- form contents here -->
{% endform %}

An anchor tag can then be used to toggle the visibility of the form.

<a href="#" onclick="Shopify.CustomerAddress.toggleNewForm(); return false;">Add New Address</a>

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

You can check out the Timber framework's addresses.liquid template for a full code example.

Editing existing addresses

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 %}
  <div id="edit_address">
    {% form 'customer_address', address %}
    {% endform %}
{% endfor %}

The edit form should be hidden by default. To toggle its visibility, use the edit_customer_address_link filter with the id of the address as its parameter. This creates an anchor tag that calls the Shopify.CustomerAddress.toggleForm function with the address id as its parameter.


{{ 'Edit' | edit_customer_address_link: }}


<a href="#" onclick="Shopify.CustomerAddress.toggleForm(70359392);return false">Edit</a>

To delete an address, use the delete_customer_address_link filter with the id of the address as its parameter. This creates an anchor tag that calls the Shopify.CustomerAddress.destroy function with the address id as its parameter.


{{ 'Delete' | delete_customer_address_link: }}


<a href="#" onclick="Shopify.CustomerAddress.destroy(70359392);return false">Delete</a>

Listing provinces with Shopify.CountryProvinceSelector

You can use the Shopify.CountryProvinceSelector function to populate the Province field with the appropriate values. For example, when the visitor selects Canada in the Country drop-down, the drop-down for provinces updates its values with Canadian provinces.

Here is an example of how to initiate Shopify.CountryProvinceSelector for both the new address form and the edit address form.


// Initiate provinces for the New Address form
  new Shopify.CountryProvinceSelector('address_country_new', 'address_province_new', {hideElement: 'address_province_container_new'});

// Initiate provinces for all existing addresses
  {% for address in customer.addresses %}
    new Shopify.CountryProvinceSelector('address_country_{{}}', 'address_province_{{}}', {hideElement: 'address_province_container_{{}}'});
  {% endfor %}

Want to discuss this page?

Visit the Shopify Community