Shopify Integration Guide

Integration with Shopify address forms made simple

A step-by-step guide to integration with Shopify address forms.

Preparation

Download

Download one of our Shopify plugins from the plugins page. We offer plugins for Address Auto-Complete (global address lookup for over 240 countries) and Postcode Lookup (UK only). The plugins are free to download.

Visit the download page  

Sign Up

First, you need to sign up for a Crafty Clicks account.

When you sign up, you will receive an access token by email. There is no obligation to buy anything and you automatically get 30 trial credits. If you need more credits to test the integration, please get in touch (support@craftyclicks.co.uk) and we will try to accommodate you.

Installation

Select the plugin you would like to install.

Install Address Auto-Complete

Step 1

In order to use the plugin, you need to set up Google Analytics first.

If you have already done this, you can go straight to step 2.

If not, Shopify have written a guide which explains how to set up Google Analytics.

Step 2

In the Shopify admin panel go to Sales Channels Online Store Preferences.

If you have set up Google Analytics correctly, you should see your Google Analytics account number displayed here. Under this should be a text box titled “Additional Google Analytics Javascript”. Into this you should paste all of the code below (but replace xxxxx-xxxxx-xxxxx-xxxxx with your real access token):

var crafty_cfg = document.createElement('script');
crafty_cfg.setAttribute('type', 'text/javascript');
//CONFIGURATION
var c2a_config = {
	active : true,
	showLogo: false,
	access_token: 'xxxxx-xxxxx-xxxxx-xxxxx',
	position: 0, // 0 - new input field for search, 1 - uses address line 1 for search
	hideFields: 0, // 0 - do not hide address fields, 1 - hide address fields
	countrySelector: true,
	enabledCountries: [],
	design: {
		mode: 1,
		ambient: 'light',
		accent: 'default'
	},
	texts: {
		country_button: 'Select Country',
		country_placeholder: 'Type here to search for a country',
		default_placeholder: 'Start with post/zip code or street',
		generic_error: 'An error occured. Please enter your address manually',
		no_results: 'No results found',
		search_label: 'Address Search'
	}
};

crafty_cfg.innerHTML = 'var c2a_config = ' + JSON.stringify(c2a_config) + ';';
document.getElementsByTagName("head")[0].appendChild(crafty_cfg);

var _cc_s = document.createElement('script');
_cc_s.type= 'text/javascript';
_cc_s.src = 'https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js';
document.getElementsByTagName("head")[0].appendChild(_cc_s);

_cc_s = document.createElement('script');
_cc_s.type= 'text/javascript';
_cc_s.src = 'https://cc-cdn.com/shopify/scripts/v1/cc_c2a_shopify.js';
document.getElementsByTagName("head")[0].appendChild(_cc_s);

Step 3 (Optional)

Edit the configuration section under “Additional Google Analytics Javascript” to customise the search interface to suit your checkout.

A quick customisation guide can be found here.

Install Postcode Lookup

If you are using the updated version of the Responsive Checkout (introduced Q2 2015), then you can proceed with this guide. If you have registered with Shopify since Q2 2015, you are using this latest version of the checkout. Otherwise, if you want to use the latest version you must upgrade your checkout manually.

If you are using the original Shopify checkout (before 2015) or the first version of the Shopify Responsive Checkout (introduced 29/10/2014), then you will need a legacy version of the plugin.

Please contact us at support@craftyclicks.co.uk for a copy of the older JavaScript file.

Step 1

In order to use the plugin, you need to set up Google Analytics first.

If you have already done this, you can go straight to step 2.

If not, Shopify have written a guide which explains how to set up Google Analytics.

Step 2

In the Shopify admin panel go to Sales Channels Online Store Preferences.

If you have set up Google Analytics correctly, you should see your Google Analytics account number displayed here. Under this should be a text box titled “Additional Google Analytics Javascript”. Into this you should paste all of the code below (but replace xxxxx-xxxxx-xxxxx-xxxxx with your real access token):

var crafty_cfg = document.createElement('script');
crafty_cfg.setAttribute('type', 'text/javascript');
var cc_config = {
	// CONFIGURATION (REQUIRED)
	_cp_access_token : 'xxxxx-xxxxx-xxxxx-xxxxx',
	// CONFIGURATION (OPTIONAL)
	_cp_hide_fields : false, // Hide address fields until result selected
	_cp_button_below_postcode : false, // Place the 'Find Address' button below the postcode field rather than next to it - true/false
	_cp_button_text : 'Find Address', // Text displayed on the lookup button
	_cp_button_class : '', // Class applied to the button
	_cp_busy_img_url : '' // The url of the image to show while waiting for lookup results, e.g. a spinning wheel
};
crafty_cfg.innerHTML = 'var cc_config = ' + JSON.stringify(cc_config) + ';';
document.getElementsByTagName("head")[0].appendChild(crafty_cfg);

var _cc_url = "https://cc-cdn.com/shopify-uk/scripts/v1/shopify_crafty_clicks.js";
var _cc_s = document.createElement('script');
_cc_s.type= 'text/javascript';
_cc_s.src = _cc_url;
document.getElementsByTagName("head")[0].appendChild(_cc_s);

Step 3 (optional)

Edit the configuration section under “Additional Google Analytics Javascript” to customise the plugin to suit your checkout.

FAQ

Test

Before you go live, test the integration to make sure it is working properly.

For the Postcode Lookup integration only, we have the following free postcodes for testing: AA1 1AA, AA1 1AB, AA1 1AD and AA1 1AE.

If you need assistance, drop us an email on support@craftyclicks.co.uk – we will help!

Go Live

Once your trial credits run out, you will need to decide on the best purchasing option based on the volume of usage you expect on your site. If you would like us to advise you then please get in touch.

Questions

  • Do you offer support? Yes, we do offer support during normal business hours in the UK. If you run into any issues, let us know and we will be happy to help.
  • Is this free? The extension is free to download and try, but to use it on a live site you will need a paid account with us.
  • Do I need to sign up for an account to try it? Yes, you’ll need a trial account, at least. You can easily sign up for a free trial account.
Last Updated: 9/11/2018, 1:32:56 PM