Shopify Plugin How-To

Our integration for Shopify supports the following features:

PredictiveAddress
International Telephone Validation
Email Validation
Unusable Name Validation

Our integration will only work at checkout for Shopify Plus members. This is due to Shopify's restriction on editing the checkout theme code.

Step 1: Open theme.liquid file

Log into the admin backend site of your Shopify store.
Under 'Online Store' from the left side menu, click on 'Themes'.
For the live theme, click the 'Actions' dropdown and select 'Edit Code'.
Find the 'theme.liquid' file within the 'Layout' folder.

Step 2: Generate your configuration code using the form below

Simply fill out the form and click generate to get your custom code.

Each validation service requires the necessary credits to function.

An API key is required to use any of the validation or PredictiveAddress services. You can generate one from the Dashboard, under the Validation tab or by clicking here

Client API Key

Perform Validation

Validation will be performed when the value of the field changes

Use PredictiveAddress

Include Multiple Residency Properties (Requires additional licensing)

Include addresses from the UK Multiple Residency database, e.g. multiple flats behind a single letter box, university halls of residence

Include Not Yet Built Properties (Requires additional licensing)

Include addresses from the UK Not Yet Built database, e.g. houses currently being developed

Use Geocoding (Retrieve latitude and longitude information)

Include location information (latitude/longitude, easting/northing and/or grid reference, depending on country) where possible

Use what3words to get Geolocation (Requires additional licensing)

Indicate if the coordinates of the what3words searched for by the user should be included in the response instead of the standard coordinates available for the address. This option consumes a what3words credit in addition to the standard PredictiveAddress credit.

Allowed Countries

An array of ISO2 country codes that the user is allowed to select from, e.g. [ "GB", "US" ] to limit the user to UK and US addresses. Leave this set to null to allow the user to select from all the supported countries

Barred Countries

An array of ISO2 country codes that the user is not allowed to select from, e.g. [ "RU", "CN" ] to allow the user to select any country other than Russia or China. Leave this set to null to not block any countries

Use Name Validation

Use Email Validation

Email Validation Level

In addition to the Server level checks, validates that the mail server accepts mail for the full email address.

Use Phone Validation

Default Country Code

Specify the ISO 2-character country code or international dialling code of the country to validate the telephone number in, unless that number contains an explicit country code prefix. i.e. 'GB' or '44'

Use Custom Fields

This option adds the custom field variables into the generated code for you to populate with field Id's. This option is only necessary if the code doesn't automatically detect the fields on your form.

Copy

Step 3: Add code into theme file

Having generated your code above, you can now copy and paste this into your theme file.

The code should be placed immediately after the {% section 'footer' %} line.

Should you ever wish to remove the Data8 Validation or PredictiveAddress from your Shopify site, simply remove the code from your theme files.

That's it! Data8 Validation and Address Capture has been applied to your site, depending on the options you selected.

Additional Configuration

To configure the validation to suit your needs, open the theme code file (theme.liquid) and change the value of the variables to suit your needs. An API key is required to use any of the validation or PredictiveAddress services. Each validation service requires the necessary credits to function.

If you are using the PredictiveAddress service, please note that the 'county' property of the address is often not populated in the response as it isn't actually required by the Royal Mail and isn't always possible to retrieve. Therefore, it is recommended that you either remove the county field from your forms, or make sure the county field is not required.

PredictiveAddress Options

When the PredictiveAddress service is enabled, the PredictiveAddress Options box will become visible. This box can be left blank to use the default configuration of PredictiveAddress. However, should you wish to customise your integration, you can do so by entering any combination of the options available for the PredictiveAddress service.

For example, enter the following into the PredictiveAddress options box to detect the initial country in the PredictiveAddress search, from the users IP address:

initialCountry: "auto"

PredictiveAddress ///what3words integration

You can search for any 3 word address by simply typing out the three words like so "pitch.tells.civil".

what3words Address

If you wish to store the 3 word address that was used to retrieve the final address, add the class data8_what3words to an input field to indicate where we should store the what3words address.

what3words Location

If you wish to use what3words to get a more precise latitude and longitude, you will need to pass in the options:

includeLocation: true
includeWhat3Words: true

and then add the classes: data8_latitude and data8_longitude to some text inputs to indicate where to store the returned data.

Custom Address Fields

Custom address fields can be entered by enabling the 'useCustomFields' option in the form above, which adds the data8.customAddressFields = []; setting to the configuration. Field id's for custom address fields can be added in the following format. (Only 'line1' and 'postcode' are required):

[
        { element: 'company_FieldId', field: 'organisation' },
        { element: 'street_1_FieldId', field: 'line1' },
        { element: 'street_2_FieldId', field: 'line2' },
        { element: 'city_FieldId', field: 'town' },
        { element: 'region_FieldId', field: 'county' },
        { element: 'zip_FieldId', field: 'postcode' },
        { element: 'country_FieldId', field: 'country' }
];

Usage

After setting up the options to suit your needs, the relevant enhanced data capture and validation will be applied to the appropriate fields on data-entry points around your site. The standard name, email, telephone and address fields will be validated accordingly. Custom/extra fields can be added to the configuration through the 'custom_..' variables in the settings.

The following rules can be used to attach Data8 Validation to acceptable fields:

Email: Either a field name attribute containing email or a text input of type email, or an id attribute listed in data8.customEmailFields.
Telephone: Either a field name attribute containing phone or a text input of type tel, or an id attribute listed in data8.customPhoneFields.
Name: A field name attribute containing name (excluding username and company name) or an id attribute listed in data8.customNameFields.
Address (PredictiveAddress and Postcode Lookup): Standard address fields, or address fields specified in the custom address fields setting.

PredictiveAddress

When PredictiveAddress is enabled, any suitable address entry section on your forms will have use of our address autocomplete and verification tool. Simply begin typing an address/postcode/company name into the Address line 1 or company box to start searching and narrowing down results.

Validation

If entered data is identified as invalid, the error will be highlighted suitably on the form.

When Telephone Validation is enabled, all suitable telephone number fields are validated automatically. The Default Country Code option allows you to specify the ISO 2-character country code or international dialling code of the country to validate the telephone number in, unless that number contains an explicit country code prefix. i.e. setting the Default Country Code option to 'GB' or '44' will ensure that any numbers that are entered in local formatting (07...) will be validated as UK telephone numbers.

When Email Validation is enabled, all suitable email address fields are validated automatically. The level of validation to apply to entered email addresses can be specified in the settings code. Set the value to None to disable email validation. See the table below for information on each level.

Email Validation Levels:

Level	Description
None	Disable email validation
Syntax	The supplied email is checked to ensure that it meets the standard email address format. This is the quickest option and would reject such incorrect email addresses as "noone@nowhere" and "N/A", but would accept incorrect email addresses that are correctly formed but that do not include a valid domain name such as "noone@data-9.com".
Domain	The supplied email is checked to ensure that the domain name (the part to the right of the @ sign) exists and is set up to receive email. This is still normally very quick, but can take a few seconds in some cases. This check would reject incorrectly formatted email addresses in the same way as the Syntax check, and would also reject a misspelled domain name such as "noone@data-9.com". It can also detect when a domain name exists but does not handle email, such as "noone@example.com". It does not verify that the part of the email address to the left of the @ sign exists.
Server	In addition to the Domain level checks, validates that at least one of the mail servers advertised for the domain is actually live.
Address	In addition to the Server level checks, validates that the mail server accepts mail for the full email address.

When Name Validation is enabled, all suitable name fields are validated automatically.

Validation