Adding the what3words Shopify app

There are several settings that can be altered via the “Settings” page of the app:

Enable what3words field: By default, the what3words address field will be visible on your site. Uncheck this to remove the what3words field.

Enable tooltip: By default an (i) icon will appear next to the field with a tooltip to explain what3words and a 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 user’s location then use the location to provide better what3words address suggestions.

Add what3words address to your Order Notes: You can easily add the what3words address as an optional note that a shop owner can attach to the order. Currently, the what3words address is added by default as extra information in the Additional details section of an order details page.

Save Recent what3words Addresses: You can choose whether recent what3words addresses should be saved and shown in the app block, cart snippet and checkout for logged-in customers. When enabled, saved addresses will be suggested for future purchases. Merchants can now save recent what3words addresses within orders by adding what3words order metafields, supporting internal reporting, location analytics, and improved customer experience.

Clipping options: Restrict suggestions to a country, circle, bounding box, or polygon

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.

To enhance order tracking and reporting, you can add a what3words address as an optional Order notes attached to each order. By default, the what3words address is included as extra information in the Additional details section of the order details page. For a more customised setup, consider adding the what3words address to your order notes.
This setup not only allows shop owners to easily view and manage precise location data within their order records but also enables seamless transfer of what3words addresses to carriers or any other Order Management Systems (OMS). This supports internal reporting, and location-based analytics, and improves customer experience by simplifying accurate address management and integration with delivery workflows.

You can allow recent what3words addresses to be saved and displayed in the app block, cart snippet, and checkout for logged-in customers. Here is the settings page of the plugin in a Shopify Plus store:

When enabled, these saved addresses will appear as suggestions for future purchases, enhancing user convenience. Additionally, merchants can save recent what3words addresses within orders by creating a dedicated what3words orders metafield. This enables internal reporting, supports location analytics, and enhances customer experience with streamlined, location-specific data.

Here’s a step-by-step guide to adding an orders metafield for what3words addresses in Shopify:

1. Access Metafields: Start by navigating to Settings and searching for Metafields.

2. Define Metafields: Go to Metafield Definitions and select Orders from the list.

3. Unstructured Metafields: Within Orders, select View unstructured metafields.

4. Add what3words Address: Locate the new definition what3words.address. Click Add Definition.

5. Set Name and Description: Provide a clear name (e.g., “what3words Address”) and description (e.g., “Stores the 3 word address for each order”).

6. Select Data Type: Choose Single line text as the data type. You may also add a JavaScript regex for validating the format of a what3words address:

[^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}[.｡。･・︒។։။۔።।][^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}[.｡。･・︒។։။۔።।][^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}

You can find out more on how to find what3words within a text in this tutorial.

7. Configure Access Options: In the options section, select Read for Storefront Access to allow customers to view the address, and Read and Write for Customer Accounts Access to enable saving and updating addresses. This setup ensures that customer data is secure while allowing necessary access for updates.

8. Save: Click Save to finalise the metafield configuration.

Once saved, return to Orders to see your new what3words order metafield. This field will automatically populate whenever customers add a what3words address, giving merchants easy access to precise location data for order processing and reporting.

Our checkout extension can now be integrated with Shop Pay for Shopify Plus stores using the checkout extension. Shop Pay offers a fast, secure checkout experience, allowing customers to save their information for streamlined future purchases. By updating the checkout behaviour of the what3words plugin, you can include a dedicated what3word field at the bottom of the Shop Pay form, enabling precise location data collection right at checkout.

Steps to Enable the what3words Field in Shop Pay:

1. Access Your Checkout Page: Start by navigating to your checkout page in your Shopify admin.
2. Locate the what3words App Block: Find the what3words app block within the checkout page configuration.
3. Configure Settings:
• Open the Settings page for the what3words plugin.
• Go to Checkout Behavior and enable the option to Include App Block in Shop Pay.
4. Preview Shop Pay: Verify that Shop Pay is enabled in your payment settings, then preview the checkout to confirm that the what3words field appears within the Shop Pay form.

Once configured, the what3words field will display on the Shop Pay checkout form, storing the precise 3 word address directly in the order details as standard, ready for use in order processing and reporting.

1. Go to the Dashboard of the plugin.
2. From your Shopify admin, go to Settings > Notifications > Order confirmation.
3. Find the Liquid variable {{ shipping_address | format_address }} that references the shipping address.
4. Insert this code immediately below:

   {% if attributes["what3words address"] %} 
      <h4>what3words address</h4> 
      <p>{{ attributes["what3words address"] }}</p> 
   {% endif %}

1. Go to the Dashboard of the plugin.
2. From your Shopify admin, go to Settings > Notifications > Order confirmation.
3. Find the Liquid variable {{ shipping_address | format_address }} that references the shipping address.
4. Insert this code immediately below:

   {% if attributes["what3words address"] %} 
       <h4>what3words address</h4> 
     <p>{{ attributes["what3words address"] }}</p> 
   {% endif %}

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 and also as note.

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": "what3words address: ///filled.count.soap"
"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 and note_attributes, your what3words address will be stored within this parameter.

Note: By attaching what3words address to the note the store owner can now print shipping labels and packaging slips with the what3words address as a note of the order.