The `customers/addresses` template renders the customer addresses page, which allows customers to view and manage their current addresses, as well as add new ones.
> Tip:
> Refer to the [customers/addresses template](https://github.com/Shopify/dawn/blob/main/templates/customers/addresses.json) and its [main section](https://github.com/Shopify/dawn/blob/main/sections/main-addresses.liquid) in Dawn for an example implementation.
<figure class="figure">
<img src="/assets/themes/templates/customer-addresses.png" style="width: 100%; max-width: 550px;" alt="An example of the customer addresses template in Dawn">
</figure>
## Location
The `customers/addresses` template is located in the `templates` > `customers` directory of the theme:
```text
└── theme
├── layout
├── templates
| └── customers
| ├── addresses.json
| ...
...
```
## Content
You should include the following in your `customers/account` template or a section inside of the template:
- [The customer object](#the-customer-object)
- [Standard form inputs](#standard-form-inputs)
### The customer object
You can access the Liquid [`customer` object](/docs/api/liquid/objects/customer) to display the customer account details.
### Standard form inputs
Inside forms for adding or editing an address, there are standard form inputs for each address detail. The table below shows each, with their associated `type` and `name` attributes.
> Tip:
> If you want to limit your form to accept submissions for only the places that you ship to, then you can use [`country_option_tags`](/docs/api/liquid/objects#country_option_tags) to build your country selector.
>
> If you want to return all countries, then you can use [`all_country_option_tags`](/docs/api/liquid/objects#all_country_option_tags). For an example of using `all_country_option_tags` as a data source to build a selector in a form, refer to the [main-addresses.liquid](https://github.com/Shopify/dawn/blob/main/sections/main-addresses.liquid) file in the Dawn GitHub repository.
<table>
<thead>
<tr>
<th>Input</th>
<th><code>type</code></th>
<th><code>name</code></th>
</tr>
</thead>
<tbody>
<tr>
<td>First name</td>
<td><code>text</code></td>
<td><code>address[first_name]</code></td>
</tr>
<tr>
<td>Last name</td>
<td><code>text</code></td>
<td><code>address[last_name]</code></td>
</tr>
<tr>
<td>Company</td>
<td><code>text</code></td>
<td><code>address[company]</code></td>
</tr>
<tr>
<td>Address 1</td>
<td><code>text</code></td>
<td><code>address[address1]</code></td>
</tr>
<tr>
<td>Address 2</td>
<td><code>text</code></td>
<td><code>address[address2]</code></td>
</tr>
<tr>
<td>City</td>
<td><code>text</code></td>
<td><code>address[city]</code></td>
</tr>
<tr>
<td>Country</td>
<td><code>select</code></td>
<td><code>address[country]</code></td>
</tr>
<tr>
<td>Province</td>
<td><code>select</code></td>
<td><code>address[province]</code></td>
</tr>
<tr>
<td>ZIP/Postal Code</td>
<td><code>text</code></td>
<td><code>address[zip]</code></td>
</tr>
<tr>
<td>Phone Number</td>
<td><code>tel</code></td>
<td><code>address[phone]</code></td>
</tr>
</tbody>
</table>
> Caution:
> The form inputs for each address detail must have the `name` attributes from this table, or the form won't submit successfully.
## Usage
When working with the `customers/account` template, you should familiarize yourself with the following:
- [How to add a new address](#add-a-new-address)
- [How to edit an existing address](#edit-an-existing-address)
- [How to delete an address](#delete-an-address)
> Tip:
> If you're using a JSON template, then any HTML or Liquid code needs to be included in a [section](/docs/storefronts/themes/architecture/sections) that's referenced by the template.
### Add a new address
You can allow customers to add a new address with the Liquid [`form` tag](/docs/api/liquid/tags/form#form-customer_address) and accompanying `'customer_address', customer.new_address` parameters:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example"></script>
<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{% form 'customer_address', customer.new_address %}
<!-- form content -->
{% endform %}
END_RAW_MD_CONTENT</script>
</div>
</p>
Inside the form, you need to include the [standard form inputs](/docs/storefronts/themes/architecture/templates/customers-addresses#standard-form-inputs) for capturing the various address details.
### Edit an existing address
With each existing address, you should include a form to edit it. You can add this form with the Liquid [form tag](/docs/api/liquid/tags/form#form-customer_address) and accompanying `'customer_address', address` parameters:
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example"></script>
<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{% for address in customer.addresses %}
<!-- address details -->
{% form 'customer_address', address %}
<!-- form content -->
{% endform %}
{% endfor %}
END_RAW_MD_CONTENT</script>
</div>
</p>
Inside the form, you need to include the [standard form inputs](/docs/storefronts/themes/architecture/templates/customers-addresses#standard-form-inputs) for capturing the various address details.
### Delete an address
With each existing address, you should include the option to delete it. You can add this option by including the following form:
```liquid
<form class="address-delete-form"
method="post"
action="/account/addresses/{{ address.id }}"
>
<input type="hidden" name="_method" value="delete">
<button type="submit">{{ 'customer.addresses.delete' | t }}</button>
</form>
```
> Tip:
> You should couple the above form with JavaScript to prompt customers to confirm that they'd like to delete an address before actually performing the deletion.