How to Add Google Maps Autocomplete to Your Shopify Plus Checkout

How to Add Google Maps Autocomplete to Your Shopify Plus Checkout

Editor's Note:

Google Maps autocomplete in the Shopify Checkout is a standard feature and is supported nativelyThere are no additional steps or workarounds necessary to implement Autocomplete.

Shopify Plus merchants who are currently using a custom setup via Checkout.liquid customizations will need to disable their customization and upgrade to the latest version of checkout to take advantage of the new built-in integration. 

If you'd like to see how Shopify Plus can help you grow bigger, faster please contact us here.

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?

Autocomplete is an amazing feature of the Places library in the Google Maps JavaScript API. You can now provide your customers the same type-ahead-search behavior of the Google Maps search field but on your own Shopify Plus checkout!

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

Before you can use the Places library in the Google Maps JavaScript API there are a few things you need to do:

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

7. Similar to steps 5 and 6 above enable Google Maps JavaScript API

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/*

Congrats - Now you have the Places library in the Google Maps JavaScript API enabled and you can set up the address autocomplete feature for your Shopify Plus checkout.

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:

  1. A recent version of jQuery.
  2. The Google Places Javascript API.
  3. 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. 

Add this to the bottom of your settings_schema.json · GitHub

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. 

 Options
Type
Default
enableGeolocate
boolean
false
countryError
string
"Please select valid country"
addressInput
string
shipping_address


Constructor for Google Place Autocomplete · GitHub

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.

 

Photo of Tommy Walker

About the Author

Tommy Walker is the Editor-in-Chief of the Shopify Plus blog. It is his goal to provide high-volume ecommerce stores with deeply researched, honest advice for growing their customer base, revenues and profits. Get more from Tommy on Twitter.