Shopify Checkout Address Autocomplete for Any Store


by Eric Nguyen -

Everyone knows that the faster and more convenient your checkout page is, the higher conversion rate you will get.

About two weeks ago I had a chance to read an article called "Reduce Returns on Shopify Plus By Helping Customers Autocomplete Their Address" from Onlygrowth where he explained the process of adapting the address autocomplete function to your Shopify Plus checkout page which could significantly improve the speed of form filling.

However, this solution works only with Shopify Plus plan which costs more than $1,500/month - way more expensive for most of us, right?

As a regular plan Shopify store owner, I decided that I need to find a way to incorporate that auto-complete function into my store.

I knew that the whole Google Address completion code is in Javascript and I have successfully used other Javascript codes on my Shopify checkout pages before, so I believed I could solve this puzzle. 

And, you guess what?

BOOM! I did it!

And, the Result?

Sale-increase

Within 2 weeks, the revenue increased by 43%, conversion rate increased by 34% and I got 40% more order while the order value stays the same.

Pretty impressive for 2 weeks, right? 

I think that you will love me now because I am about to share what I've done step by step to implement the function into any Shopify store including yours!

Don't have time for the technical stuff? Skip the reading and let me help you.

Shopify will not like me but I believe that I will get more lovers :)

Let's get started!

Step 1: Setting up Google Autocomplete API


Before you can use Places library in the Google Maps JavaScript API, you need to do some preparations first:

  1. Go to the Google API Console. You can login with your current Gmail account or create a new one (It's Free).

  2. Once you logged in, click 'Create Project'

create project

  1. A new window will pop up where you can put a 'Project Name' that you want. I named it "Shopify Plus Checkout" just to be cool. Then click 'Create'

create project name

  1. Once the project is created, go back to the Dashboard and click on 'ENABLE API.'

enable API

  1. Search for a phrase 'Google Places API Web Service ' and open it. If you cannot find it through the search box, then you can simply navigate through the list of all API's below.

google_places_api_web_service

  1. Click 'ENABLE.'

select_enable

  1. Now repeat step 5 and 6 to enable "Google Maps JavaScript API" as well. It is critical to have both API's active otherwise, the autocomplete function will not work.
  1. Go back to the 'Dashboard' and open Google Places API Web Service from the list.

dashboard Google Places API

  1. In the new window press 'Create credentials.' at the top right corner. 

create credentials

  1. Once you get into 'Credentials' sections click 'What credentials do I need?' and you will see the API key similar to the image below. Copy the key script to a notepad to use later. Then Click 'Done.'

google api key

Congratulations! You have enabled your Places library, and now you can use it in the Shopify checkout page.

Before we start implementing the code into our Shopify website, I have to inform you that Google Places API allows only 1000 requests per 24 hours period. If you want more, you need to verify your identity, and the limit will increase to 150.000 requests. Everything above requires purchasing a premium plan.

Step 2: Setting up your checkout page


So, the final step is to set everything up in your Shopify website. Go to Online Store -> Preferences and scroll down to Analytics section. Paste the code from below into this field and change YOUR_API_KEY with a real key from Google Places API. And that is it! You can enjoy your autocomplete checkout form now. 

Love the trick that much? Please subscribe to get the next trick delivered to your inbox.

Also, I know that a lot of Shopify Store owner out there do not know this hack, so please take few second to share the article with other entrepreneurs just like you.

Let's hack together!

 Checkout---autocomplete

Need Help?


If you would like to implement checkout address autocomplete into your Shopify store but do not have enough time to do that by yourself, or it is too technical for you, then fuel me up with some coffees and I will gladly help you in return.

No worry, if you are tight on a budget or just starting out, I would be glad to help you in exchange for a friendship. I love you all entrepreneurs!

But to let you know, my time is limited (full-time Marketing and Web developer + part-time baby sister for my 18 months daughter), so I might not be able to satisfy everyone's needs at the same time.

That's why people who buy me a coffee get my attention first and only then if there is still time left, I will help others.



Eric Nguyen
Joined e-commerce community since 2010, experienced with Shopify, Amazon, eBay, Etsy. A Shopify expert enthusiastic and multiple Shopify stores co-founder.
Codi-net is a place where I share my personal experience, tips, tricks to grow a Shopify store and most importantly to make friend with other entrepreneurs.
Featured Article