How to Add Google Maps Autocomplete to Your Shopify Plus Checkout

How to Add Google Maps Autocomplete to Your Shopify Plus Checkout

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...

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.

Customize Shopify Checkout With Address AutoComplete

Here are the two code snippets you need to copy into your checkout.liquid layout file right before the closing body tag

Don't see a checkout.liquid file? Here are the steps to add it:

Part 1 - Google Maps API

*Make sure to change the API key to yours as shown in Step 11 above.

Part 2 - Add Autocomplete

Still not working? Make sure you added jquery in your checkout.liquid layout file above the closing head tag:

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.

How Does Google Places Compare To Addrexx?

While Google Places is a great (free) solution for those that don't have any autocomplete functionality on their Shopify checkout there are some known issues. Here is an example showing how Google Places actually autocompletes to an undeliverable order:


Address: 12345 Wright Drive Huntingdon Valley, PA, United States 19006

In addition there are some functionality that a merchant may want that Google Places does not support. The reason for this is because Google Places was not built for address validation. It is a maps tool to help people find places.

If you are looking for a more robust address validation implementation, Addrexx would be our recommendation. Though costly, Addrexx provides an entirely different approach to address validation which eats Google Places for lunch. Because their solution is build specifically for address validation on checkouts, Addrexx is able to offer additional functionality such as:

  • validate address to apartment or suite level
  • check for missing apartment or suite and prompt user to provide this info
  • restrict shipments to PO boxes
  • modify shipping options based on product type and address

Keep in mind no solution is perfect so it is up to you on which solution you look to implement. If Google Places doesn't cut it for you then Addrexx is something you should definitely check out.

----

The following article was republished with permission from James Corr at OnlyGrowth.com

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.