Developer

All tutorials

Swiftcomplete Ecwid Integration: Add Address Autocomplete to Checkout

easy

The Swiftcomplete Plugin for Ecwid adds address lookup fields to the billing and shipping fields in your checkout, to capture accurate addresses and improve conversion rates.

1Get a Swiftcomplete API key

Create a Swiftcomplete account (or sign in) if you’re already registered.

GET API KEY

2Add Swiftcomplete to your checkout page

Step 1 – Add script to the Ecwid store

  1. Log in to your Ecwid admin.
  2. Go to Website → Overview → Advanced website settings → Add custom code.
  3. In the “Custom JavaScript code” box
  4. Paste the entire script below. Save.

swifcomplete-ecwid-add-script

Here is the script that you need to use:

<script>
/* ---------- 1.  CONFIG -------------------------------------------------- */
var SWIFTCOMPLETE_API_KEY        = "SWIFTCOMPLETE-API-KEY";
var RETRY_MS                     = 500;        // poll interval while waiting for checkout DOM

/* ---------- 2.  LOAD swiftlookup.js ------------------------------------- */
!function (e, t, c) {
e.swiftcomplete = e.swiftcomplete || {};
var s = t.createElement("script");
s.async = !0, s.src = c;
var r = t.getElementsByTagName("script")[0];
r.parentNode.insertBefore(s, r)
    }(window, document, "<https://assets.swiftcomplete.com/js/swiftlookup.js>");

/* 3.  BOOTSTRAP ------------------------------------------------ */
window.addEventListener("load", waitForEcwid);

function waitForEcwid () {
  /* wait until Ecwid form & inputs exist */
  var form       = document.querySelector("form.ec-form");
  var address1El = document.querySelector('input[name="address-line1"]');

  if (!form || !address1El) {       // not yet rendered → retry
      return setTimeout(waitForEcwid, RETRY_MS);
  }
  initSwiftLookup(address1El);      // attach once
}

function getW3WField () {
  // 1.  find every checkout row title
  const rows = document.querySelectorAll('.ec-form__row');

  for (const row of rows) {
    const title = row.querySelector('.ec-form__title');
    if (title && /what3words/i.test(title.textContent.trim())) {
      // 2.  return the <input> inside this row
      return row.querySelector('input.form-control__text');
    }
  }
  return null;   // not found
}

/* ---------- 4.  INIT SwiftLookup ---------------------------------------- */
function initSwiftLookup (address1El) {

    // give the input an ID if it doesn't have one
    if (!address1El.id) address1El.id = 'ec-address-line1';

    swiftcomplete.runWhenReady(function () {

    /* locate optional what3words field */
    var w3wField = document.querySelector('input[name="kdwcqfx"]'); // change to real name

    /* create control */
    const CONTROL_KEY = address1El.id;          // use the element’s id as map key

    swiftcomplete.controls[CONTROL_KEY] = new swiftcomplete.SwiftLookup({
        field : address1El,
        key   : SWIFTCOMPLETE_API_KEY,
        searchFor        : "what3words,address",
        emptyQueryMode   : "prompt",
        promptText       : "Type your address or what3words",
        manualEntryText  : "Enter address manually",
        noResultsText    : "No addresses found - click to type manually",
        scrollToFieldOnFocus : true,

        populateLineFormat : [
            { field: address1El                                       , format: "BuildingName, BuildingNumber SecondaryRoad, Road" },
            { field: document.querySelector('input[name="address-line2"]'), format: "SubBuilding" },
            { field: document.querySelector('input[name="city"]')         , format: "TertiaryLocality, SecondaryLocality, PRIMARYLOCALITY" },
            { field: document.querySelector('input[name="zip"]')          , format: "POSTCODE" },
            { field: document.querySelector('input[name="Country"]')      , format: "PrimaryCountry" },
            { field: document.querySelector('input[name="organization"]') , format: "Company" },
            { field: getW3WField(), format: 'what3words' }
        ]
    });
    const finder = address1El;  // the field we attached to earlier    
	  finder.addEventListener('swiftcomplete:swiftlookup:manualentry', () => {      
	     // Option 1 – redirect to a “manual address” step      
	     window.location.href = 'https://w3w-test-store.company.site/checkout/address';    
	  });

    /* fine‑tune */
    var ctrl = swiftcomplete.controls[CONTROL_KEY];
    ctrl.groupBy("road,emptyroad");
    ctrl.setMaxAutocompleteResults(5);
    ctrl.setMaxContainerResults(100);
    ctrl.setCountries("gb");
    });
}
</script>
Copied

Tip: Replace the API key with your own; everything else can stay as‑is.

Step 2 – Add a what3words custom checkout field

  1. Go to Settings → Cart & Checkout → Checkout Fields.
  2. Click Add Field → Text.
  3. Configure:
    • Field name: what3words
    • Label (shown to shopper): what3words
    • Checkout step: Shipping & Payment Details (or whichever step you want).
    • Show on invoices & e‑mails: enable both toggles.

Ecwid will create the input inside the checkout form; the script locates it automatically and fills it when the customer selects an address.

swifcomplete-ecwid-create-field

3Swiftcomplete is now active on your checkout page
  1. Open your storefront checkout in a private window.
  2. In Street address, start typing “SW1A 1AA” or ///filled.count.soap.
  3. Select a suggestion – Ecwid should auto‑fill:
    • address lines
    • city, postcode, country
    • what3words field (exact what3words address)

swifcomplete-ecwid-at-checkout

Displayed what3words in the orders, if it is searched in the Swiftcomplete:

swifcomplete-ecwid-at-orders

4Troubleshooting

Need help, or have any questions? Get in touch with our customer support team at support@swiftcomplete.com, and we’ll help you get started with the Swiftcomplete Script Integration.

E-CommerceUse 3 word addresses within an address searchEcwidSwiftComplete

Related tutorials