Shopify address and postcode lookup plugin

Our Shopify plugin adds UK and international address lookup to the checkout and customer address pages on your Shopify store.

Follow the instructions below to set it up, or contact us for help and advice.

How it works

The plugin acts as a simple-to-use front-end for PostCoder, our address lookup web API. It detects address forms within your Shopify store and inserts an address lookup "widget" in the appropriate area on the page.

The plugin enables your users to enter a postcode or address fragment into the widget search box, and then select an address from a drop-down list. The address form fields are then automatically populated.

Installation

Important: Google Analytics must be installed

Google analytics must be set up on your store or the Additional Google Analytics Javascript box will not appear and the plugin cannot be installed.

See an introduction to Google Analytics in Shopify.

The important item is the tracking code (looks like "UA-1234-567"). A dummy code may be used, but is not recommended.

1. Download the Shopify plugin package

The script you need to upload and customisation instructions are available in this Shopify plugin package »

2. Sign up for a free PostCoder account to get an API key

If you already use PostCoder, you can use your existing API key.

If you're not, simply sign up for an account. You will receive an email containing your API key, and 50 free lookups to try.

If at any time you lose your API key, log into your account and go to the API Credentials page.

3. Upload the plugin to your Shopify store

Upload the postcoderShopifyPlugin.js file to your Shopify Store via the Files Settings page of your admin area.

Read more on Shopify File uploads

Once uploaded, you will see the file in the list. Copy the address from the URL column, as you'll need it for the next step.

4. Edit the loader script to add your API key

Copy the script below and replace [API-KEY] with your API key (keeping the quote marks) and replace [PLUGIN-URL] with the URL obtained from step 3 above.


(function() { var postcoderkey = '[API-KEY]'; var pluginurl = '[PLUGIN-URL]'; function postcoderpluginload(){window.postcoder=window.postcoder||{};window.postcoder.postcoderkey=postcoderkey;var b=document.createElement("script");b.type="text/javascript";b.async=true;b.src=pluginurl;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(b,a)} window.attachEvent?window.attachEvent("onload",postcoderpluginload):window.addEventListener("load",postcoderpluginload,false); })();

5. Insert the loader script to the Google Analytics code field

Paste the edited script into the Additional Google Analytics Javascript box:

  • Goto Settings > General in your Shopify Admin
  • Find the "Google Analytics" section
  • If necessary, enter a Google Analytics tracking code
  • If necessary, click "add custom JavaScript to Google Analytics"
  • The "Additional Google Analytics Javascript" box should now be visible
  • If there is already additional code, paste after it

Then save your Shopify settings.

Support

Email, telephone and live chat support is available via the Support page on our website »

Tested with themes

The plugin functions correctly with the following Themes on the Checkout Page and Customer Address Page:-

blockshop, clean, clearflex, couture, envy, expo, Fashionopolism, flex, kickstand, launchpad, lookbook, lucid mobile, masonry, megatronic, minimal, mobilia, mr parker, new standard, paradigm, radiance, react, responsive, retina, simple, solo, sunrise, symmetry, vantage, vanity and expression.

The plugin functions correctly with the following Themes on the Checkout Page:-

supply, atlantic, Jitensha, reign, startup, altron, providence, pop and editions.