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:
You must use the cart widget.
This validation method is not compatible with the checkout extension widget.
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?
When you enable the exact postal code matching, we will add a field to the Local delivery section of our widget.
You will need to enter eligible city names in the location settings.
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
Click Settings, then Local Delivery.
In the Distance validation section, select Exact postal code match.
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
Click Locations.
Click the name of the location you want to edit.
In the Local delivery section, click Edit settings.
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).
Click Save.
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.
Click Settings, then Developers.
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].parentNode.dispatchEvent(new KeyboardEvent('keyup',{'key':'Enter'}));
// 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();Search for "Pick your city".
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.
Click Save.
The widget will now have a dropdown for your delivery areas.
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.
Add the code below.
#deliveryGeoSearchField {
flex-grow: 1 !important;
}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.
Click Settings, then click Text and Design.
In Text and design section, click Show next to Delivery widget.
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)
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.