Developer

All tutorials

Swiftcomplete Shopify Plus Integration: Add Address Autocomplete to Checkout

easy

Swiftcomplete for Shopify Plus adds real-time address lookup to your checkout, improving accuracy, conversion rates, and delivery success.

1Add Swiftcomplete to your Shopify Plus Store

Add a what3words address field to your checkout page on Shopify Plus by clicking the button below

INSTALL

2Activate Swiftcomplete on your checkout

Step 1 – Add App Block

  • Go to your Checkout Editor page,
  • Under Delivery, select Add App Block,
  • Choose Swiftcomplete,
  • For quick access, click here.

swiftcomplete-app-block

Step 2 – Disable Address Autocompletion

  • Go to the Settings page of your Checkout Editor page,
  • Scroll down to the Address Autocompletion section,
  • Confirm that Address autocompletion is disabled. This prevents conflicts from Shopify’s standard address validation,
  • For quick access (scroll to the bottom), click here.

swiftcomplete-disable-address-autocomplete

Step 3 – Enable the Company field (Recommended)

  • Go to the Settings page of your store,
  • Click on the Checkout tab on the sidebar,
  • Scroll down to the Customer information and enable the optional field for Company name. This prevents business names provided by shoppers from being lost,
  • For quick access, click here.

swiftcomplete-enable-company-name

Step 4 – Test It Out

  • Go to checkout and enter an address, postcode, or what3words (e.g. ///filled.count.soap)
  • Select a suggestion from the dropdown, and the address fields will auto-fill
  • A read-only what3words field is added and saved as an Additional note in the order.

swiftcomplete-test-it-out

4Customisation and extra features

The what3words address is saved against an order within the Additional Details section of the order page as what3words_shipping (as a shipping address). This can then be printed on order summaries or exported with orders to pass on to delivery companies.

swiftcomplete-additional-notes

  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_shipping"] %} 
    <h4>what3words address</h4> 
  <p>{{ attributes["what3words_shipping"] }}</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_shipping"] %} 
    <h4>what3words address</h4> 
  <p>{{ attributes["what3words_shipping"] }}</p> 
{% endif %}

Note: This section is for customers who 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 work, 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_shipping",
    "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.

swiftcomplete-note-attributes

Troubleshooting

If you are stuck with the installation of our plugin or are using a custom theme, you can give our support team collaborator access to your Shopify admin directly through your own Partner Dashboard or using the Shopify app. These collaborator permissions give our support team access to only the sections of your store that you want us to see.

Only the store owner or staff with Manage collaborator requests permission can view collaborator access requests or grant collaborator access to a store.

Otherwise, contact our support team, and they will be able to submit a request to access your store, and you will receive an email about the request and a notification on your Shopify Home. Please make sure you mentioned your store website.

Alternatively, if you have a collaborator request code enabled, then you need to provide the collaborator request code to our support team.

E-CommerceAdd a 3 word address input fieldUse 3 word addresses within an address searchShopifySwiftComplete

Related tutorials