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.
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
1 | <input type="text" id="search-address" value=""> |
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:
1 2 3 4 5 6 7 | <script src="//maps.googleapis.com/maps/api/js?key=GOOGLE-API-KEY&libraries=places&callback=PlaceAutocompleteSearch" async defer></script> <script> function PlaceAutocompleteSearch() { var input = document.getElementById('search-address'); var autocomplete = new google.maps.places.Autocomplete(input); } </script> |
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:
- Go to the Google Cloud Platform Console.
- From the Project drop-down menu, select or create the project for which you want to add an API key.
- From the Navigation menu, select APIs & Services > Credentials.
- On the Credentials page, click Create credentials > API key.
The API key created dialog displays your newly created API key (an encrypted string). - 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.)
You are done. We hope this article helped you learn how to add autocomplete for address fields in Shopify.
hi, where in my shopify code do i put the javascript?
It goes in your checkout.liquid asset. But note that you are only able to edit that asset if you are a Shopify Plus merchant.
i am a shopify plus user and the above code didnt work in my checkout page. I think i am wrong somehere. may i know where to paste the code in the checkout.liquid?
Where to put js code? in theme.liquid ?
how can I populate the customer’s delivery address in Shopify based on the autocomplete address field function that you provide?
I need to collect city, state, country details on a customized product page (so I have created a product-customizable-form.liquid snippet). This is different from the shipping address collected on the checkout page. Your code will do the job that I need. But when I add the script right below the input type, I am getting an error on the product page “Oops something went wrong). Can you please help as to where should the script go? thanks.