The simple mistake of putting a wrong zip code during checkout can result in your package in post office hell.
What if there was a way we can reduce or eliminate that issue altogether?
This means when a user starts typing an address, autocomplete will fill in the rest (address, city, state, zip code, country).
The end result...
Part 1: Enable Google Autocomplete API
1. Go to the Google API Console
2. Click Create Project
3. Name Your Project: Shopify Plus Checkout
4. From the dashboard click Enable API
5. Search for Google Places API Web Service then select it from the results list
6. Select Enable
8. Click the Dashboard on the left sidebar and you will see Google Places API Web Service appear in the list of APIs.
9. Select Google Places API Web Service from the list of APIs and then click the blue Create credentials button
10. Click What credentials do I need? button
11. Click Restrict key
12. Click HTTP referrers (web sites). From there add your domain in the format of *.example.com/*
Note: Google Places API is limited to 1,000 requests per 24 hour period. If you verify your identity with Google then you can get up to 150,000 requests for every 24 hour period. After that you need to purchase a premium plan. Details here.
Part 2: Customize Shopify Checkout With Address AutoComplete
Follow the instructions below to edit checkout.liquid to add this feature.
Don't see a checkout.liquid file? Here are the steps to add it:
Step 1 - Load the necessary external scripts.
In the <head>, call three external scripts:
- A recent version of jQuery.
- The gp_google_autocomplete snippet that you will create.
Step 2 - Add a theme setting to control the customization.
The theme setting will do three things:
- Give the merchant the control to turn the entire customization on and off.
- Allow the merchant to add a site specific API key, this is required to communicate with the Google Places API.
- Give the merchant the control to turn on and off the geolocate feature which biases results based on the geographical location of the users IP address.
Step 3 - Add your error message to translation files.
An error message is required if the user tries to select an address from the autocomplete that is not a valid shipping/billing destination. Add the following to the bottom of your translation file to display an error in the event the location Google places detects is not a valid address.
Step 4 - Create a JS file called gp_checkout_autocomplete.js
This file sets up the Shopify checkout constructor. Defaults are set when creating a `new GpCheckoutAutocomplete` and then to initialize autocomplete, we call `.init(options)` passing in any additional options.
"Please select valid country"
Step 5 - Create a snippet called gp_google_autocomplete
Both `gp_checkout_autocomplete.js` and the Google Places API are loaded `defer async`. This will reduce the impact on page load time, however, inline scripts will execute before these scripts are loaded. `setupGpCheckoutAutocomplete` is passed as the callback to the Google Places API to make sure the script is only called once the API is loaded. Also, Google Places API doesn't load in IE9 so the callback won't fire and no JS errors will happen.
Use the `Shopify.Checkout.step` function to determine what step of the checkout we are on. When we are on the contact_information step or the payment_method step, we'll call the `placesAutocomplete.init()` function.
Copy this code into a snippet, then load that snippet into checkout.liquid · GitHub
Live Example Of Google Autocomplete Address On Shopify Plus Stores
Pura Vida Bracelets and Shopzenger are two Shopify Plus merchants that have already decided to add this functionality to customize their checkout experience. By helping customers complete their address brands are noticing fewer returns from incorrect addresses and even fewer clicks for the customer to complete the checkout.
Need Help? Contact our experts.