Skip to the content

Shopify Plugin

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.

Installation

To integrate Data8 Validation or PredictiveAddress into your Shopify site, edit your theme code (theme.liquid) and paste the following after the footer section:

 <!-- Data8 Custom Validation Code -->
    <script type="text/javascript">
    if (typeof data8 === "undefined")
        window.data8 = function () { };

      // Client-side API Key
      data8.clientAPIKey = 'your-api-key-here';

      // Boolean value to control when validation is performed
      data8.useOnChange = false;

      // PredictiveAddress service
      data8.usePredictiveAddress = false;
      data8.predictiveAddressOptions = {
          initialCountry: "GB",
          allowedCountries: ["GB", "US"]
      };

      // Name Validation
      data8.useNameValidation = false;

      // Email Validation
      data8.useEmailValidation = false;
      data8.emailValidationLevel = 'Address';

      // Phone Validation
      data8.usePhoneValidation = false;
      data8.defaultCountryCode = '44';

      // Custom Fields to attach validation or PredictiveAddress to (Array of field ID's)
      data8.customEmailFields = ['example_E-mail_Field', 'eAddressField2'];
      data8.customPhoneFields = ['example_TelField', 'telField2'];
      data8.customAddressFields = [
        { 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' },
      ];
    </script>
    {{ 'https://webservices.data-8.co.uk/javascript/shopify.js' | script_tag }}
    <!-- /Data8 Custom Validation Code -->

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

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.

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): Field id's for custom address fields can be added data8.customAddressFields 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' }
];

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.

PredictiveAddress

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

Start a Free 14 Day Trial Today

Register below to start a free trial of our services