Shopify Plus Integration Guide

Integration with Shopify Plus address forms made simple

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

If you have a standard Shopify store, click here.

Preparation

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 100 trial lookups. If you need more lookups to test the integration, please get in touch (support@craftyclicks.co.uk) and we will try to accommodate you.

Installation

We offer plugins for Address Auto-Complete (global address lookup for over 240 countries) and Postcode Lookup (UK only).

Select the plugin you would like to install.

Install Address Auto-Complete

Step 1

In the admin panel for your store, you can add in our custom code to the checkout's layout. This an be found in Online Store / Themes / Your theme -> Edit HTML / CSS.

Then, if you don't have the checkout layout existing yet, add a new layout (from checkout). Otherwise, use the already existing checkout.liquid file.

Find an ideal place (we suggest before the end body tag, right after the tracking code) and copy and paste the following code snippet to allow our extension to load on the page. Replace xxxxx-xxxxx-xxxxx-xxxxx with your real access token.

<script 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'
	}
};
</script>
<script src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js" type="text/javascript"></script>
<script src="https://cc-cdn.com/shopify/scripts/v1/cc_c2a_shopify.js" type="text/javascript"></script>

Step 2 (Optional)

Edit the other configuration options in the code snippet to customise the search interface to suit your checkout.

A quick customisation guide can be found here.

Install Postcode Lookup

Step 1

In the admin panel for your store, you can add in our custom code to the checkout's layout. This an be found in Online Store / Themes / Your theme -> Edit HTML / CSS.

Then, if you don't have the checkout layout existing yet, add a new layout (from checkout). Otherwise, use the already existing checkout.liquid file.

Find an ideal place (we suggest before the end body tag, right after the tracking code) and copy and paste the following code snippet to allow our extension to load on the page. Replace xxxxx-xxxxx-xxxxx-xxxxx with your real access token.

<script type="text/javascript">
//CONFIGURATION
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
};
</script>
<script src="https://cc-cdn.com/shopify-uk/scripts/v1/shopify_crafty_clicks.js" type="text/javascript"></script>

Step 2 (Optional)

Edit the other configuration options in the code snippet to customise the search interface to suit your checkout.

FAQ

Do you have a Shopify App?

Shopify prevents Apps from modifying the checkout in any way. There are no APIs that allow an app to pre-fill the checkout form with any data. (via Draft Orders or by other means). The only option to add an auto-fill function to the checkout, is to insert a custom JS code directly into the template. Due to this, we cannot offer the integration via an App.

Why does the integration require Shopify Plus?

While in the past we supported Shopify's basic version, a recent change (February 2019) has resulted in Shopify locking down the checkout entirely for non Shopify-Plus merchants. Shopify allows Plus merchants to customise the template for the Checkout, so Shopify Plus merchants still have the capability to add in Postcode Lookup, or similar checkout improvements to their store.

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 lookups 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: 2/11/2019, 1:00:05 PM