All tutorials

Installing the what3words BigCommerce app

easy

The BigCommerce App adds a what3words address field to your store’s checkout page allowing your customers to easily enter and validate a what3words address when placing an order. what3words addresses can then be converted to GPS coordinates, which can then be passed onto delivery drivers allowing deliveries to arrive at the right place and on time, giving a more reliable delivery experience for your customers.

BigCommerce Minimum Supported Version: the stores need to have BigCommerce’s Optimized One-Page Checkout enabled as mentioned in this guide.

1

Requirements

To use this extension, you will need to:

1. Log in/sign up to your BigCommerce account;

2. Stencil theme is required to install this plugin;

3. Make sure you enable the Optimized One-Page Checkout as it is mentioned in this official guide. Go to Settings > Checkout > Checkout Type > Optimized One-Page Checkout
bigcommerce one page checkout

4. Get a what3words API key by logging in/signing up to your what3words account to create an API key if you haven’t done it yet to use this plugin.

Add the what3words address to your Checkout page

To add the what3words address field to your checkout page you will need to create, prior to the installation of the app, a Custom Text field and name it what3words Address as mentioned below.

1. Go to Settings > Advanced > Account sign up form > Address Fields

bigcommerce custom field

2. Click on Create a New Field

3. Select Text Field as the type of field to create

4. Write as Field Name what3words Address

bigcommerce what3words ccustom field

Note: DO NOT USE any other field name than the one recommended otherwise the app won’t add the what3words address to this custom text field.

You can also rearrange this field by selecting and dragging it up or down in the address list. This will change the order of the address fields on the checkout page.

2

Install the what3words BigCommerce app

Add a what3words address field to your checkout page on BigCommerce by clicking this button below

GET THIS APP

You will then need to authorise our app to finalise the install process.

The next step is to log in/sign up to your what3words account which will allow you to administer the app.

Once logged on to your what3words account you will be able to access the app settings.

You will need a what3words API key to use this plugin, as it authenticates and interacts with the what3words API.

If you don’t already have a what3words API key, a message will pop up on your screen requesting you to “Get an API key”.

If you already have one or more what3words API keys, you can simply select the API key that you will be using for your BigCommerce store.

If you don’t have an API key you can click the popup and follow the steps to create a new API key.

Once you have created an API key you can return to the Settings page of the what3words app and select the key.

3

Enable what3words at checkout page

The basic settings allow you to customise how the what3words Address Field is configured on your site.

The app can automatically add an address field for shipping information, to a Custom Text Field as we mentioned above or in case this field is not available, the app will convert an existing Address Line 2 to a what3words address field, allowing your customer to specify a what3words address for shipping address to help you locate your customers.

Select the Add what3words Address Field to my checkout pages option for the field to appear.

Note: We highly recommend to use the Custom Text Field as a what3words address and to create it in advace prior installation of the app.
If you decide to create this field after the installation of the app the what3words address will still be added to it and the Address Line 2 won’t be affected.

4

Check if the field is appearing

A new field should now be appearing on your checkout under the shipping address. When a what3words address is captured in this field, it will be saved alongside your order details and will be visible on order preview and shipping label screens.

5

How to obtain the what3words fields using Stores API

In BigCommerce, the what3words address attributes are stored as customFields in both shipping and billing address forms in the Orders endpoints of the BigCommerce Orders REST API.

Please follow this guide to be able to access the BigCommerce API.

The API request to make to the BigCommerce Orders REST API should be:
GET https://yourstore.example.com/api/storefront/orders/{orderId}

Note:

  • Substitute your storefront domain for yourstore.example.com.
  • Substitute the orderId with your order number.

The API response should be:

{ 
  "orderId": "1",
  ...
  "billingAddress": {
    ...
    "customFields": [
      {
        "fieldId": "what3words Address",
        "fieldValue": "///filled.count.soap"
      }
    ]
  },
  "shipping": [
      ...
    "customFields": [
      {
        "fieldId": "what3words Address",
        "fieldValue": "///filled.count.soap"
      }
    ]
  ...
}
Copied
6

Contact Support

Have any questions?

We’re here to support you! If you have any questions while using what3words for Excel, get in touch with us by writing us an email at support@what3words.com.

Additional settings

You can override the default label for the address field by selecting this option and specifying the label text. We recommend using the default label with “(optional)” text where possible.

You can override the default placeholder for the address field by selecting this option and specifying the placeholder text. We recommend you use the default placeholder value, as it provides your customers with an example of how to use the what3words Address Field but it is also useful to change the address to a location in your market.

In order to provide guidance explaining what3words to the customer, you can display a tooltip explainer and its question mark icon next to the what3words field.
This message will be displayed on the tooltip explainer:

what3words addresses help our delivery partners find you first time. Find yours at what3words.com

We provide a number of options for clipping the AutoSuggest results, limiting the addresses that can be validated and captured. You can clip suggestions to a number of countries by providing comma-separated 2-digit ISO codes for each country you wish to clip to. This will ensure suggestions provided are clipped within the countries specified. You can also clip within a circle, a bounding box, or a polygon.

Note:  When providing multiple clippings the intersection of each polygon is what forms the suggestions provided when using the what3words Address Field.

For most checkouts, we recommend skipping these options as the clip to country is automatically set when a user selects a country for their billing and/or shipping information as they select a country from the dropdown menu options in the checkout form.

E-CommerceAdd a 3 word address input fieldBigCommerce

Related tutorials