Increase Shopify Conversion Rate With Google Autocomplete Address Hack

Check out the step-by-step walkthrough in the video here as I install Google Autocomplete Addresses onto the Shopify Checkout. This free integration adds some pretty awesome functionality to your checkout page. Whenever a customer starts typing in their address, the Google Autocomplete box pops up and helps them in two ways.

First, it will increase the speed of checkout since it will autocomplete the address. Second, your shipping accuracy will increase as this is a great way to prevent customer typos when filling out the checkout form. The Autocomplete won’t show incorrect addresses, thus eliminating this issue completely!

H/t to Conversionpirate.net and the cool dude over there who converted this code into something we can all (not just Shopify Plus) enjoy!.

Watch the video again, but here are the steps. There’s basically 2 portions to this.

#1 – Google APIs

1. Go to the Google API Console
2. Create a new project
3. Enable 2 APIs: Google Places API Web Service and Google Maps JavaScript API
4. Generate credentials for the Google Places API and save the API Key

#2 – Shopify

1. Go to your Shopify Dashboard and go to Online Store –> Preferences
2. Copy and paste the code below and replace YOUR_API_KEY with the API Key provided by Google API Console in Step 4 above.
3. Place this code into the “Additional Google Analytics Javascript” and save. (Note: You need to already have Google Analytics installed on your store, but this is a must-install for any store anyways!)

Here’s the code, again h/t to ConversionPirate.net.

// Conversionpirate.com
if (window.location.href.indexOf('checkout') > -1) {
    window.onload = function() {

        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places";
        script.async = "true";
        script.defer = "defer";
        document.body.appendChild(script);

        setTimeout(initAutocomplete, 2000);

        var lookup = {
            "street_number": document.getElementById('checkout_shipping_address_address1'),
            "route": document.getElementById('checkout_shipping_address_address1'),
            "fullAddress": document.getElementById('checkout_shipping_address_address1'),
            "locality": document.getElementById('checkout_shipping_address_city'),
            "neighborhood": document.getElementById('checkout_shipping_address_city'),
            "administrative_area_level_1": document.getElementById('checkout_shipping_address_province'),
            "country": document.getElementById('checkout_shipping_address_country'),
            "postal_code": document.getElementById('checkout_shipping_address_zip')
        };
        var placeSearch;
        var autocomplete;
        var componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            administrative_area_level_1: 'long_name',
            country: 'long_name',
            neighborhood: 'long_name',
            postal_code: 'short_name'
        };

        function initAutocomplete() {
            document.getElementById('checkout_shipping_address_address1').onFocus = "geolocate()";

            autocomplete = new google.maps.places.Autocomplete(
                (document.getElementById('checkout_shipping_address_address1')), { types: ['geocode'] });

            autocomplete.addListener('place_changed', fillInAddress);
        }


        function fillInAddress() {
            var place = autocomplete.getPlace();
            for (var component in componentForm) {
                lookup[component].value = '';
            }
            var fullAddress = '';
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                var val = place.address_components[i][componentForm[addressType]];
                if (componentForm[addressType]) {
                    switch (addressType) {
                        case 'street_number':
                            fullAddress = val + fullAddress;
                            break;
                        case 'route':
                            fullAddress = fullAddress + ' ';
                            fullAddress = fullAddress + val;
                            break;
                        case 'neighborhood':
                            lookup.neighborhood.value = val;
                            break;
                        case 'locality':
                            lookup.locality.value = val;
                            break;
                        case 'administrative_area_level_1':
                            lookup.administrative_area_level_1.value = val;
                            break;
                        case 'country':
                            lookup.country.value = val;
                            break;
                        case 'postal_code':
                            lookup.postal_code.value = val;
                            break;
                    }
                }
            }
            lookup.fullAddress.value = fullAddress;
        }

        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        }


    };
}