Shopify Tutorials

Increase Shopify Conversion Rate With Google Autocomplete Address Hack

Want create site? Find Free WordPress Themes and plugins.

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());
                });
            }
        }


    };
}
Did you find apk for android? You can find new Free Android Games and apps.
Previous post

Make More Money In 2 Minutes With Shopify Cash Back Programs

Next post

Shopify and eBay Create A Deep eCom Integration

justin

justin

Justin Cener is a lifelong entrepreneur and proud "crazy cat guy." After launching Crowd Seats, a Groupon-inspired technology startup, Cener sold the business to a venture-backed competitor in Hollywood, CA and moved onto Shopify. On top of running numerous successful stores, Justin mentors countless students and runs a handful of high profile celebrity Shopify stores using the same strategies he teaches in his Bootcamp Coaching Programs.