E-commerce User Flows
.
There are 3 different ways to include what3words to your online store:
We currently maintain plugins for the following eCommerce platforms, if you use one of these platforms, this is the easiest way to add what3words to your checkout page, so we recommend visiting the relevant tutorial:
If your e-commerce store is custom-built or runs on a platform without a plugin, our AutoSuggest Component is the way to go. Almost as easy to integrate as our plugins, the AutoSuggest Component requires copying and pasting a couple of lines of JavaScript code into your checkout page. Please view the AutoSuggest Component tutorial.
The alternative solution is to ask users to enter their what3words address in the delivery notes field of your website. This is a simple solution, but does not provide any form of error correction. This means users may enter an incorrect what3words address (i.e. ///table.chairs.spoon instead of ///table.chair.spoon), which invalidates the process.
Where to add your integration
Add the what3words address field as an additional field to your shipping address form for more accurate deliveries.
If your online shop has user accounts, you can also add a what3words address field to the customer’s saved delivery address so it can be pre-populated on checkout.
User Interface guidelines
The what3words field should always be optional, and should always be additional to a street address – not replacing it. It should be located at the bottom of the address form, normally after country or post code.
The address placeholder is used to help users enter their what3words address in the correct format (i.e. ‘table.chair.spoon’ not ‘table chair spoon’). Although you can customise this, using the text ‘e.g. lock.spout.radar’ has proven to be the most successful with users.
The what3words field should feel as native as possible, and should be styled the same as the same as the rest of your form.
Autosuggest will activate when the user types the first letter of the third word. Be default it will show 3 results, although you may choose to show more if required. The results get more accurate as the user enters more letters.
In the suggested results, we show the geolocation of each result. This is for error correction – similar addresses are located far apart from each other, so when the user sees the geolocation it prompts them to select the correct one (i.e. table.chair.spoon is in Newcastle, table.chairs.spoon is in Gloucestershire).
To improve error correction further, we recommend using country clipping. Our plugins automatically limit the results shown to the country selected in the delivery address, however if using our Autosuggest component, you will need to do this by adjusting the parameters – this is further explained in this tutorial.
Once a user has selected a correct what3words address, by default we show a green verified tick. This asset has been checked for accessibility, so it’s not recommended that you change this. This field should always be optional, and because it is not possible to enter a what3words address in this field without selecting one of the autosuggest results, an error message is not required.
If you would like to encourage more users to complete their what3words address field, the following messaging can be used. This does not come as part of the Autosuggest plugin, so you would need to add your own code for this section. The link should be pointed at deliver.what3words.com, which takes the user through a guided experience to find their delivery address.
Print a sign for your store (TBC)
Makers and manufacturers around the world are producing signs, merchandise and shop products with what3words. Design with what3words addresses in your own brand style with the tips below.
(Needs copy review if approved)
Develop
—
