Adding the what3words Shopify app
The what3words Shopify app allows a what3words address field to be added to a Shopify store. Customers can then provide a what3words address with orders for faster and more reliable deliveries.
The app works on both Shopify Basic and Shopify Plus but with differing functionality:
Shopify Basic: Provides a what3words widget that can be used within your store to collect what3words addresses with an order on your cart page. We provide support for Theme OS 1.0 and Theme OS 2.0.
Shopify Plus: Adds a what3words address field to your checkout page to collect a what3words address with orders.
Add app to your Store
From the Shopify app store, Shopify App Listing click “Add app”.
Installation Shopify Basic - Theme OS 1.0
If you are not logged in you will need to then log in using your Shopify store credentials.
Our app will detect what is the Shopify Plan and Theme version that your Store is using and present the right installation steps for your Store.
You will then need to follow these steps to install the what3words app.
The next step is to select “Themes” for your “Online Store”.
Click “Actions” > “Edit Code”.
In the Templates directory, click cart.liquid.
Find a suitable place in your theme where you want to use the widget and insert the following code shown below:
<div id="w3w___container" data-alignment="right" data-width="450px"></div>
We suggest placing the widget above the checkout button to ensure the best user experience.
You can also customise the position of the widget:
- horizontal alignment of the widget on the page;
- width of the widget.
Then Click Save.
Installation Shopify Basic - Theme OS 2.0
If you are not logged in you will need to then log in using your Shopify store credentials.
Our app will detect what is the Shopify Plan and Theme version that your Store is using and present the right installation steps for your Store.
You will then need to follow these steps to install the what3words app.
The next step is to select “Themes” for your “Online Store”.
Click “Customize”.
Select the Cart Page and click “Add section”. Then select the what3words Widget.
We suggest placing the widget above the checkout button to ensure the best user experience.
You can also customise the position of the widget:
- horizontal alignment of the widget on the page;
- width of the widget.
The address field widget should then appear in the theme and after saving the widget will have been added to your Cart page.
You can also add some customised texts that will help your User experience to add the what3words address to their orders before checking out. As it is shown in this example, you can add a Rich text block with this text:
Problems with deliveries?
If you add a what3words address this will improve your delivery accuracy
before adding the what3words address field widget.
Installation Shopify Plus
From the Shopify app store app listing click “Add app”.
If you are not logged in you will need to then log in using your Shopify store credentials. You will then need to follow the prompts to add the app and you will then be presented with the install steps.
Copy the code snippet.
The next step is to select “Themes” for your “Online Store”. Click “Actions” and then “Edit code”.
Paste the code snippet in the website <head>
A new field should now appear on the checkout page
Customising the app
There are a number of settings that can be altered via “Settings” page of the app:
Enable tootip: By default an (i) icon will appear next to the field with tooltip to explain what3words and link to the what3words Map Site. Uncheck this to remove the icon and tooltip.
Custom field label: By default the field label is what3words address (optional). We recommend keeping this as is but it can be changed if desired.
Custom placeholder: Changes the placeholder text of the field.
AutoSuggest Focus: If the website knows the users location then use the location to provide better what3words address suggestions.
Clipping options: Restrict suggestions to a country, circle, bounding box or polygon
Viewing the 3 word address for an order
The what3words address is saved against an order within the Additional Details section of the order page. This can then be printed on order summaries or exported with orders to pass on to delivery companies.
How to add what3words in the Order Confirmation
- Go to the Dashboard of the plugin.
- From your Shopify admin, go to Settings > Notifications > Order confirmation.
- Find the Liquid variable
{{ shipping_address | format_address }}that references the shipping address. - Insert this code immediately below:
{% if attributes["what3words address"] %} <h4>what3words address</h4> <p>{{ attributes["what3words address"] }}</p> {% endif %}
How to add what3words in the Invoice
- Go to the Dashboard of the plugin.
- From your Shopify admin, go to Settings > Notifications > Order confirmation.
- Find the Liquid variable
{{ shipping_address | format_address }}that references the shipping address. - Insert this code immediately below:
{% if attributes["what3words address"] %} <h4>what3words address</h4> <p>{{ attributes["what3words address"] }}</p> {% endif %}
How to obtain the what3words field using Stores API
Note: This section is for customers that would like to share the what3words address of each order with Order Management Systems.
In Shopify, the what3words address attributes are stored in the customers’ orders of the Shopify Orders REST API as "note_attributes".
For more information on how endpoints and requests to the Shopify REST ADMIN API, please follow this guide.
The API request to make to the Shopify Orders REST API should be:
GET {{your-shopify-site}}/admin/api/2022-07/orders/{{your-order-number}}.json
The API response should be:
"note_attributes": [ { "name": "what3words address", "value": "filled.count.soap" } ]
Another way to display easily what you can retrieve from the Shopify REST ADMIN API is by going to the
Admin page > Orders > (number of order) and adding at the end of this path .json.
For example: https://<your-store-site>.myshopify.com/admin/orders/4253206970468.json.
Search for note_attributes, your what3words address will be stored within this parameter.
