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.

v2.0 beta

Open .md 1.x page ↗

On this page

How it fits together
1. List the addresses
2. The fields of an address form
3. Add an address
4. Edit and delete in the row
Where people get stuck
Coming from 1.x

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

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

Example structure of the Navigator

customer-addressesCustom Element

customer-addressCustom Element

Text Block“Name, street, city”address=formatted

delete-addressCustom Element

Form Block

Form

Form Button“Delete”

Success Message

Text Block“Deleted”

Error Message

Text Block“Something went wrong”

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.

For a visitor who is not logged in, the list removes itself. All the values are in address values.

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:

Each field shows its Name setting.

First nameText fieldfirstName

Last nameText fieldlastName

CompanyText fieldcompany

StreetText fieldaddress1

Second address lineText fieldaddress2

CityText fieldcity

Postal codeText fieldzip

CountrySelect fieldcountryCodeRequired.

Province or stateSelect fieldzoneCode

PhoneText fieldphoneNumberSmootify removes its spaces.

Use as my default address defaultAddressCheckboxTicked, it makes this the default address.

Save address

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:

A country with provinces

Province menu: Filled with its provinces or states.
Div block: Shown, with the menu inside.
Form: No no-zone class.

A country without provinces

Province menu: Empty, and still in the form.
Div block: Hidden, with the menu inside.
Form: 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.

Example structure of the Navigator

create-addressCustom Element

Form Block

Form

Text FieldName “firstName”

Text FieldName “lastName”

Text FieldName “address1”

Text FieldName “city”

Text FieldName “zip”

SelectName “countryCode”

optionCustom Elementvalue

Text“Choose a country”

Div Blockaddress-condition=zone

SelectName “zoneCode”

Field Label

CheckboxName “defaultAddress”

Text Span“Use as my default address”class=w-form-label

Form Button“Save address”Waiting text “Saving…”

Success Message

Text Block“Address saved”

Error Message

Text Block“Something went wrong”

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

Check these first

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.