Skip to main content
All CollectionsLocal Delivery
Delivery validation by city name
Delivery validation by city name
Jelizaveta avatar
Written by Jelizaveta
Updated over a week ago

With our delivery validation feature, you can check if the customer is eligible for delivery.

If your country doesn't use postal codes, you can use our exact postal code matching method to serve as a city name/district matching method.

Exact postal code matching method will check the city name that your customers entered in the widget. That city name will need to match one of the city names you entered in your location settings.

Since this is a string check, you can use city names, district names, or any other set of letters/numbers to match your use case.

Please note that we don't support overlapping city names—each of your locations needs to have a unique set of city names.

To learn more about other delivery validation methods, take a look at our Delivery validation article.


Requirements:


Compare delivery validation methods

If you're not sure if this is the right method for your use case, compare the validation methods we offer.

Recommended use

For delivering to a relatively small area

For delivering to a wide area

For more complex delivery rules

For countries that don't use postal codes

Example zip codes

12345,

SW1A 1AA

123,

SW1A

123*,

SW1A_***

LONDON, MILTONKEYNES

Eligible zip codes

12345,

SW1A 1AA

12345,

1230,

SW1A 1AA

1234,

SW1A 1AA,

SW1A 6TH

London, london, Milton Keynes, miltonkeynes

Non-eligible postcodes

Any postcode that is not added to Zapiet - Pickup + Delivery

Any postcode that does not begin with 123 or SW1A

Any postcode that does not begin with 123 or SW1A, has less or more digits than asterisks and is missing a space

Any city name that isn't LONDON or MILTONKEYNES


How does delivery validation by city name work?

  1. When you enable the exact postal code matching, we will add a field to the Local delivery section of our widget.

  2. You will need to enter eligible city names in the location settings.

  3. Your customers will need to enter their city name in our widget to check if they're eligible for delivery.

    • If the city name is eligible, they will be able to proceed.

    • If the city name is not eligible, they will get an error and not be able to proceed further.


Enable exact postal code matching

  1. Click Settings, then Local Delivery.

  2. In the Distance validation section, select Exact postal code match.

  3. Click Save.

Your delivery validation settings are set, now you need to add eligible city names to every location that offers delivery.


Add city names to a location

  1. Click Locations.

  2. Click the name of the location you want to edit.

  3. In the Local delivery section, click Edit settings.

  4. Under the Distance validation field, enter your city/district names. Separate them with a comma.

    • The feature is not case-sensitive (both “LONDON” and “london” will be accepted).

    • If the city you're adding contains two words (e.g. Milton Keynes), add them as one word (e.g. MILTONKEYNES).

  5. Click Save.

  6. When you've saved, all the city names will be added without the spaces (e.g. “Milton Keyns” will be added as “MILTONKEYNS”)—that is normal because we remove all the spaces when saving.

Repeat for all the locations that offer local delivery, but make sure that every location has a unique set of city names.

We will accept “Milton Keynes” (with a space) that your customers enter in the widget because we remove all the spaces when validating.


Create city name dropdown list

If your customers are frequently misspelling the names of your delivery areas, you can also create a dropdown list of all the areas you deliver to.

  1. Click Settings, then Developers.

  2. In Custom scripts, add the code below.

    function updateSearchField() {
    var i = setInterval(function () {
    if (document.getElementById("deliveryGeoSearchField")) {
    clearInterval(i);
    // Replace the element with id 'deliveryGeoSearchField'
    var deliveryGeoSearchField = document.getElementById(
    "deliveryGeoSearchField",
    );
    var selectElement = document.createElement("select");
    selectElement.id = "deliveryGeoSearchField";
    selectElement.name = "deliveryGeoSearchField";
    selectElement.className = "snize-exclude-input";
    selectElement.style =
    "margin-bottom:0px; border-bottom-left-radius: 7px; height:100%; border-top-left-radius: 7px;";

    // Add options to the select element
    var cities = [
    "Pick your City",
    "London",
    "Milton Keynes",
    ];

    cities.forEach(function (city) {
    var option = document.createElement("option");
    option.value = city;
    option.text = city;
    selectElement.appendChild(option);
    });

    // Replace the existing element with the newly created select element
    deliveryGeoSearchField.parentNode.replaceChild(
    selectElement,
    deliveryGeoSearchField,
    );

    // Add event listener for 'change' event
    selectElement.addEventListener("change", function () {
    selectElement.disabled = true;

    // Perform actions when the select value changes
    document.getElementsByClassName("searchIcon")[0].click();

    // Replace the searchIcon element with a refresh element
    var searchIcon = document.getElementsByClassName("searchIcon")[0];
    var refreshElement = document.createElement("div");
    refreshElement.id = "refresh";
    refreshElement.style = "color:black";
    refreshElement.innerHTML = "✕";

    // Add event listener for 'click' event on the refreshElement
    searchIcon.parentNode.addEventListener("click", function () {
    window.location.reload();
    });

    // Replace the searchIcon with the refreshElement
    searchIcon.parentNode.replaceChild(refreshElement, searchIcon);
    });
    }
    }, 500);
    }

    ZapietEvent.listen("selected_method", function () {
    updateSearchField();
    });

    updateSearchField();

  3. Search for "Pick your city".

  4. Customize the code to match the areas you deliver to.
    You can change the wording, and the names of the cities you deliver to. The names must exactly match the spelling added in Locations > Delivery validation.

  5. Click Save.

    The widget will now have a dropdown for your delivery areas.

  6. You may also wish to edit the styling of this box, to match the width of your widget. By default, the size will be proportionate to your initial wording.
    Find the Custom styles field.

  7. Add the code below.

    #deliveryGeoSearchField {
    flex-grow: 1 !important;
    }

  8. Click Save.

Please note, this code may need to be adapted to your theme. The widget should now look similar to the one below.


Change the wording in the widget

You can change the wording in the widget, if needed.

  1. Click Settings, then click Text and Design.

  2. In Text and design section, click Show next to Delivery widget.

  3. Change the wording according to your business needs. It's important to change any wording that says “postal code” to “city name”. You can edit:

    • Search field placeholder

    • Instructional text (optional)

    • User has not selected a location, date or time (if required)

  4. Click Save.

The changes will be immediately applied to the widget.


Notes

  • If your customers are frequently misspelling the city name, you can add the most commonly misspelt words as available for validation within a location.

    • For example, you can add Milton Keyns, Milton Kiens etc.

    • You can also create a dropdown list to prevent spelling mistakes.

  • One additional step that can help with a misspelling, is changing the wording of the error message.
    Within Settings > Text and design, under Local delivery, find the field for the error message called: “Sorry, delivery is not available in your area.”

    • You can change it to include wording similar to: “Sorry, delivery is not available in your area. Please make sure the city name is spelt correctly.”


Limitations

  • You cannot use the checkout extension with delivery validation by city name.
    If you want to use the checkout extension, you will need to use any of the other delivery validation methods.

Did this answer your question?