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
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.
The error above might occur if you have not included all necessary website domains in the list of restricted referrers for your site. If this error occurs, follow these steps to resolve it:
Copy the URL listed in the error. i.e. www.heliumdev.com
Go to console.cloud.google.com and go to APIs & Services > Credentials and then click the API key you created.
In the Website restrictions section of this page, add the URL to the list of websites. It might look something like this once you've added it:
Scroll down and Save. Wait at least 5-10 minutes for the changes to take effect.
Check your form to ensure the error is resolved.
Feel free to contact our Customer Sucess team via chat or email and we'll be happy to assist 🤗