All Collections
Local Delivery
Delivery validator widget
Delivery validator widget

Let customers check if they are eligible for local delivery on your home page

Jelizaveta avatar
Written by Jelizaveta
Updated over a week ago

The delivery validator widget appears on every page of your store, and asks the customers to validate their postal code or address before the cart page.

Delivery validator widget works with every delivery validation method.


Enable the delivery validator widget

  1. In Zapiet - Pickup + Delivery, click Settings then Local Delivery.

  2. In Delivery validator widget section click Enable.

  3. Click Save.

The delivery validator widget will now appear at the top of the screen on your Online store.


How does it work?

Postal code validation

If you're using exact or partial postal code matching validation methods, your customers will need to enter their postal codes.

  • When a customer enters a valid postal code, they will get the message “Great, we deliver to your area”.

  • When a customer enters a non-eligible postal code, they will get the message “Sorry, we do not deliver to your area”.

Address validation

If you're using maximum radius or maximum driving distance delivery validation methods, your customers will need to enter their address.

If you have Enable address autocompletion setting enabled in Zapiet - Pickup + Delivery > Local Delivery > Delivery validation, your customers will be able to select their address from the drop down menu.

  • When a customer enters a valid address, they will get the message “Great, we deliver to your area”.

  • When a customer enters a non-eligible address, they will get the message “Sorry, we do not deliver to your area”.


Customize the wording

You can customize the wording in the widget depending on what delivery validation method you're using.

  1. In Zapiet - Pickup + Delivery click Settings, then Text and design.

  2. Click Show next to Delivery widget.

  3. Search for the delivery validator fields, and edit them accordingly.

  4. You can change the link that redirects customers based on their delivery eligibility.

  5. Once the changes are made, click Save.

Changes will be immediately applied to the delivery validator widget.

If you've edited the link, the Continue shopping button will redirect your customers to another page within the store.


Customize the colors

The Delivery validator widget is built using HTML, CSS and a little JavaScript. This means that you can modify the colors of all of the elements with CSS.

Proceed with the steps, if you're using Zapiet - Pickup + Delivery widget version 1 or 2. Take a look at our Which version of the widget am I using? article.

If you're on a legacy version, please reach out to us at support@zapiet.com, and we would be happy to install the update for you!

Add the CSS in Zapiet - Pickup + Delivery > Settings > Developers > Custom styles.


Change the primary button color

You can change the color of the “Go” button.

For example, this code will make the background of the button green and the font color dark grey.

.zapiet-delivery-validator__submit {
background: #00A29B !important;
color: #383838 !important;
}

Change the top bar background color

#zapiet-delivery-validator__topbar {
background: #EAE8EB !important;
}

Change the close button color

.zapiet-delivery-validator__close svg {
fill: #888888 !important;
}

Change the prelude color

#zapiet-delivery-validator__label {
color: #333 !important;
}

By combining the code above, you can create a light version of the widget, as shown below.


Customize the delivery validator widget

If our widget is not suitable for your use case, you can use a number of functions to write your own delivery validator.

We do not offer custom implementations of the delivery validator widget. We recommend hiring a Shopify Expert to make the customizations for you.

You can use all delivery validation methods with custom-built validator widget. If you decide to use maximum radius or maximum driving distance, you will need to build Google address autocompletion manually.

Example custom validator widget

Below is an example of how you can use the API to create your own custom validation widget.

<form onsubmit="validateZipCode(); return false;">
<input type="text" id="zipcode" placeholder="Enter zipcode here ..." />
<input type="submit" value="Go" />
</form>

<script type="text/javascript">
function validateZipCode(e) {
const zipcode = document.getElementById('zipcode').value;

if (
typeof window.Zapiet === 'undefined' ||
typeof window.ZapietCachedSettings === 'undefined' ||
typeof window.Zapiet.DeliveryValidator === 'undefined' ||
typeof window.ZapietCachedSettings.cached_config === 'undefined' ||
typeof window.ZapietCachedSettings.cached_config.delivery_validator === 'undefined'
) {
console.warn('Zapiet - Custom delivery validator error. Please ensure you have Store Pickup + Delivery correctly installed. Contact support@zapiet.com for assistance.');
return false;
}

Zapiet.DeliveryValidator.checkEligibility(zipcode, function(response) {
// Eligible callback
Zapiet.DeliveryValidator.eligibleForDelivery(response);
}, function() {
// Not eligible callback
Zapiet.DeliveryValidator.notEligibleForDelivery();
}, function() {
// Error callback
Zapiet.DeliveryValidator.error();
});

return false;
}
</script>

Gist available here:


Delivery Validator API

Zapiet.DeliveryValidator.checkEligiblity(postal_code, eligible_callback, not_eligible_callback, error_callback);

Zapiet.DeliveryValidator.updateModalContent(heading, content, button_label);

Zapiet.DeliveryValidator.showTopBar();

Zapiet.DeliveryValidator.hideTopBar();

Zapiet.DeliveryValidator.showModal();

Zapiet.DeliveryValidator.hideModal();

JavaScript Events

delivery.validator_widget.top_bar.opened
delivery.validator_widget.top_bar.closed
delivery.validator_widget.modal.opened
delivery.validator_widget.modal.closed
delivery.validator_widget.modal.content_updated
delivery.validator_widget.eligible
delivery.validator_widget.not_eligible
delivery.validator_widget.error
Did this answer your question?