How to add an autocomplete address field to your forms in Shopify

Adding auto-complete to the address field on your forms makes a tremendous improvement to the user experience (UX). Autocomplete allows users to quickly select address from suggestions generated in realtime as they type.

Everywhere you can improve the user experience is an opportunity to differentiate yourself from your competitors and adding auto-complete to your address forms does just that. This article shows you how to add autocomplete for address fields in Shopify using Google Places API. By doing so, you improve the user experience while also ensuring that the addresses submitted are valid by using the power of Google Maps.

DEMO

Below is the code and styling needed to add auto-complete to your address forms. Enjoy!

Step 1: Add ID name into the address field

Add ID name “search-address” into the address field

Step 2: Add the JavaScript code into your online store

The Places service is a self-contained library, separate from the main Maps JavaScript API code. To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps API bootstrap URL:

You must include an API key with every Maps JavaScript API request. In the following example, replace GOOGLE-API-KEY with your API key (the encrypted string). Follow these steps to get a Google API key:

  1. Go to the Google Cloud Platform Console.
  2. From the Project drop-down menu, select or create the project for which you want to add an API key.
  3. From the Navigation menu, select APIs & Services > Credentials.
  4. On the Credentials page, click Create credentials > API key.
    The API key created dialog displays your newly created API key (an encrypted string).
  5. Click Close.
    The new API key is listed on the Credentials page under API keys.
    (Remember to restrict the API key before using it in production.)

DEMO

You are done. We hope this article helped you learn how to add autocomplete for address fields in Shopify.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *