Let your customers enter their address information faster and more accurately
The app's form builder has a new feature inside the standard field for Address line 1 (
default_address.address1) that allows you to enable autocomplete for addresses. This feature uses the power of Google Maps to suggest physical addresses and autocomplete address fields.
As shown in the example below, this feature makes it much easier for customers to fill out address fields on a Customer Fields form. It also helps to avoid typos so you can ensure that your customer's address data is accurate.
Connect to Google Maps
❗Important note: You must have a Google account with billing enabled to use an API key for Google Maps. Even though billing is required, most stores will be able to use the Google Maps APIs for no cost (free!). See this pricing page for more details.
Enable the APIs and create a key
Here's a step-by-step guide for creating an API key for Google Maps:
Go to console.cloud.google.com and log in using your Google Account
Create a new project or select an existing project using the top navbar
After you've selected a project, open the navigation menu by clicking on the hamburger icon (found in the top left of the navbar)
In the navigation menu, go to APIs & Services > Library
Open the navigation menu again and go back to APIs & Services > Library
In the Maps section of the API Library, click on Places API and then click the button for ENABLE
Open the navigation menu once more and go to APIs & Services > Credentials
At the top of the page, click the button for CREATE CREDENTIALS and select API key
In the modal that pops up, click the button for RESTRICT KEY
In the Application restrictions section, select HTTP referrers (web sites)
In the Website restrictions section, add items for each referrer (URL).
You'll need to add at least one referrer for your myshopify domain (
example.myshopify.com). Make sure to add separate items for any other domains that will be used to access the Customer Fields form.
In the API restrictions section, select Restrict key
Click the SAVE button
Once the page refreshes, click the "copy" icon next to the API key to copy the key to your computer's clipboard
Add Google Maps API key in Customer Fields
Once your Google Maps API key has been created, you can enable the autocomplete feature in Customer Fields by pasting the API key from your clipboard into the app's form builder:
Click on the Address line 1 field
Scroll down to the Autocomplete section
Click the button for Connect to Google Maps
Paste in your key and click Apply
Save the form and test the autocomplete feature on the storefront
After you have enabled address autocomplete and saved the form changes, make sure to test the feature on the storefront by typing into the address field.
If you see address suggestions from Google when typing into the address field, then you can rest assured that the feature is working properly.
If you see a red error below the address field, then that indicates there is a problem with the API key. Make sure to go back through the steps above and double-check that your Google account has billing enabled.
Feel free to contact our Support team via chat or email and we'll be happy to assist 🤗