# Addresses

> Show the logged-in customer's saved addresses and let them add, edit and delete them. Covers the address list, the field names of the address forms, and the country and province selects.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/accounts/components-attributes  
URL: https://www.smootify.io/docs/build/addresses  
Updated: 2026-10-09

Customers keep their shipping addresses in their Shopify account. This page builds the list of saved addresses, with an edit and a delete form in each row, and the form that adds a new address. Smootify fills the country and province menus for you.

> [!NOTE]
> Customer accounts must be set up first: see [Customer accounts](https://www.smootify.io/docs/build/account). Put these parts on an account page, since they need a logged-in customer.

## How it fits together

What Smootify needs:

- for the list: a `customer-addresses` element with one `customer-address` inside, the template of each row;
- for each form: a Form Block with a Select field named `countryCode` (the country) and one named `zoneCode` (the province);
- the edit and delete forms inside the row, so they know which address they change.

What is up to you:

- the design of a row, and which details it shows;
- which fields the forms have, apart from the two Select fields;
- where the forms go: in the row, in a popover inside the row, or in a section of their own for the new address.

## 1. List the addresses

1. Add a Custom element with the tag `customer-addresses`.
2. Inside it, add a Custom element with the tag `customer-address`. Design it as one row: Smootify repeats it once per address.
3. Inside the row, add a custom attribute to each Text block that shows a part of the address.

```html
<customer-addresses>
  <customer-address>
    <div address="formatted">Name, street, city</div>
    <delete-address>
      <div class="w-form">
        <form><input type="submit" value="Delete"></form>
        <div class="w-form-done"><div>Deleted</div></div>
        <div class="w-form-fail"><div>Something went wrong</div></div>
      </div>
    </delete-address>
  </customer-address>
</customer-addresses>
```

| Attribute | What it shows |
|---|---|
| `address="formatted"` | the whole address, with the name, one line under the other |
| `address="name"` | the full name |
| `address="firstName"`, `address="lastName"` | the first name, the last name |
| `address="company"` | the company |
| `address="address1"`, `address="address2"` | the street, the second address line |
| `address="city"`, `address="zip"` | the city, the postal code |
| `address="zoneCode"`, `address="countryCode"` | the province and country codes, such as `CA` and `US` |
| `address="phoneNumber"` | the phone number |

**The default address.** The row of the customer’s default address gets the class `is-default`. Inside a row, `address-condition="default"` shows an element only on the default address, such as a “Default” pill, and `address-condition="not-default"` only on the others, such as a “Make default” button.

- **Write the values as in the table**, such as `firstName`. A value written with a dash, such as `first-name`, is not read.
- **Empty parts.** An element whose part of the address is empty is taken out of that row.
- **How many.** The list shows up to 10 addresses.
- **No addresses.** Show an empty state with `customer-condition="no-addresses"`, and hide a heading with `customer-condition="has-addresses"`.
- **The default address.** `customer="defaultAddress"` shows it anywhere on the page: see [Customer accounts](https://www.smootify.io/docs/build/account).

For a visitor who is not logged in, the list removes itself. All the values are in [address values](https://www.smootify.io/docs/reference/attributes/address).

## 2. The fields of an address form

The add form and the edit form use the same fields. Each field’s **Name** setting tells Smootify what it holds. The Name is a setting of the field, not a custom attribute. Write it exactly as shown here:

| Name | Field | What it holds |
|---|---|---|
| `firstName`, `lastName` | Text field | the first and last name |
| `company` | Text field | the company |
| `address1`, `address2` | Text field | the street and the second address line |
| `city`, `zip` | Text field | the city and the postal code |
| `phoneNumber` | Text field | the phone; Smootify removes its spaces |
| `countryCode` | Select field | the country (required) |
| `zoneCode` | Select field | the province or state |
| `defaultAddress` | Checkbox | makes this the default address when ticked |

When Shopify refuses an address, its message shows in the form’s Error message.

**The country menu.** Smootify fills the `countryCode` Select field with the countries your store ships to, named in the site’s language and in alphabetical order. An option without a value that you add in the Designer, such as “Choose a country”, stays at the top. The customer must choose a country.

**The province menu.** When the customer picks a country, Smootify loads its provinces or states into the `zoneCode` Select field. The options you add to it in the Designer are removed. Many countries have no provinces. Put the province menu and its label inside a Div block with `address-condition="zone"`, so they only show when they are needed:

| Country | Province menu (`zoneCode`) | Div block with `address-condition="zone"` | Form |
|---|---|---|---|
| with provinces, such as United States | filled with its provinces or states | shown | no `no-zone` class |
| without provinces, such as Germany | empty, and still in the form | hidden | gets the class `no-zone` |

The Select field must stay in the form either way.

## 3. Add an address

Add a Custom element with the tag `create-address` and put a Form Block inside it, with the fields above. It can go on the same page as the list, or anywhere else.

```html
<create-address>
  <div class="w-form">
    <form>
      <input name="firstName">
      <input name="lastName">
      <input name="address1">
      <input name="city">
      <input name="zip">
      <select name="countryCode"><option value="">Choose a country</option></select>
      <div address-condition="zone"><select name="zoneCode"></select></div>
      <label class="w-checkbox"><input type="checkbox" name="defaultAddress" class="w-checkbox-input"><span class="w-form-label">Use as my default address</span></label>
      <input type="submit" value="Save address" data-wait="Saving…">
    </form>
    <div class="w-form-done"><div>Address saved</div></div>
    <div class="w-form-fail"><div>Something went wrong</div></div>
  </div>
</create-address>
```

When the address is saved, the Success message shows, and the page reloads a second later, so the list shows the new address.

## 4. Edit and delete in the row

**Edit.** Inside `customer-address`, add a Custom element with the tag `edit-address`. Build its Form Block like the add form, with the same fields. Smootify fills the fields with the address of that row, so the customer changes only what they need. When it is saved, the page reloads. Outside a row, the form has no address to fill in.

**Delete.** Inside `customer-address`, add a Custom element with the tag `delete-address`, with a Form Block and a Form Button, as in the list above. It deletes the address of that row and removes the row.

- **The default address cannot be deleted.** Smootify removes the delete form from its row. To delete it, make another address the default first.
- **Changing the default.** The `defaultAddress` Checkbox makes an address the default when it is ticked. Left unticked, the default address stays as it is.
- **A “Make default” button.** For a one-click button in the row, put an `edit-address` with only a hidden field and a submit: `<input type="hidden" name="defaultAddress" value="true">`. Without a Country field, the form changes only which address is the default and leaves every field of the address as it is. Show it with `address-condition="not-default"`.
- **In a popover.** The edit form can go in a popover inside the row. Each copy of the row gets its own popover.

## Where people get stuck

> [!STUCK]
> - **The address form disappears.** It has no Form, or no Select field named `countryCode` or `zoneCode`. Both Select fields are required, even when the province menu is hidden.
> - **A country is missing from the menu.** The menu lists only the countries your store ships to. Add the country to your shipping settings in Shopify.
> - **The edit form is empty.** It is outside `customer-address`, so it does not know which address to show.
> - **One row has no delete button.** It is the default address, which cannot be deleted.
> - **A value in the row stays empty.** It is written with a dash, such as `address="first-name"`. Write `address="firstName"`.

## Coming from 1.x

- The country Select field is named `countryCode`. 1.x named it `territoryCode`, which Shopify has deprecated: rename it, or the form is removed. On your `.webflow.io` address the debugger points out a Select field still named `territoryCode`.
- The country menu shows the countries in the site’s language, in alphabetical order. 1.x showed them in English, in Shopify’s order.
- The provinces load when the customer picks a country.
- Editing the default address without ticking the checkbox now saves. In 1.x it failed.