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
Click Settings then Local Delivery.
In Delivery validator widget section, select the theme you'd like to install our widget on, and click Preview in theme.
This will open the Customize settings on your theme, and enable our delivery validator widget on that theme.
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 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.
Click Settings, then Text and design.
Click Show next to Delivery widget.
Search for the delivery validator fields, and edit them accordingly.
If you're using maximum radius or maximum driving distance delivery validation methods, change postal code to address.
You can change the link that redirects customers based on their delivery eligibility.
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 [email protected], 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.
Enable the custom delivery validator widget
After you have created your custom widget, you will also need to add styling to hide the old widget and then enable the widget app block.
Add this styling to your custom widget code.
This will hide our default delivery validator widget.
<style>
#zapiet-delivery-validator__topbar {
display: none !important;
}
</style>Follow the steps above to Enable the delivery validator widget.
After the app block is enabled, your custom widget will show.
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.ZapietDeliveryValidator === '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 [email protected] for assistance.');
return false;
}
ZapietDeliveryValidator.checkEligibility(zipcode, function(response) {
// Eligible callback
ZapietDeliveryValidator.eligibleForDelivery(response);
}, function() {
// Not eligible callback
ZapietDeliveryValidator.notEligibleForDelivery();
}, function() {
// Error callback
ZapietDeliveryValidator.error();
});
return false;
}
</script>
Gist available here:
Delivery Validator API
ZapietDeliveryValidator.checkEligiblity(postal_code, eligible_callback, not_eligible_callback, error_callback);
ZapietDeliveryValidator.updateModalContent(heading, content, button_label);
ZapietDeliveryValidator.showTopBar();
ZapietDeliveryValidator.hideTopBar();
ZapietDeliveryValidator.showModal();
ZapietDeliveryValidator.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
Disable delivery validator widget
If you don't need our delivery validator widget on a certain theme any more, or just want to remove it, you can disable delivery validator widget on your theme.
Click Settings then Local Delivery.
In Delivery validator widget section, select the theme you'd like to disable our widget on, and click Preview in theme.
This will open the Customize settings on your theme.
Click the trash can icon next to the delivery validator widget.
Click Save.
Our delivery validator widget should not show on this theme any more.