How to add an autocomplete address field to your forms in Shopify

Hura Product Showcase Builder

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

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:

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:

  1. Go to the Google Cloud Platform Console.
  2. From the Project drop-down menu, select or create the project for which you want to add an API key.
  3. From the Navigation menu, select APIs & Services > Credentials.
  4. On the Credentials page, click Create credentials > API key.
    The API key created dialog displays your newly created API key (an encrypted string).
  5. 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.

Hura Theme Blocks

You may also like...

6 Responses

  1. hannah says:

    hi, where in my shopify code do i put the javascript?

    • Brian Dolphin says:

      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.

      • Harsha says:

        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?

  2. Harsh says:

    Where to put js code? in theme.liquid ?

  3. John S says:

    how can I populate the customer’s delivery address in Shopify based on the autocomplete address field function that you provide?

  4. Amol says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *