Delivery validator widget (early access)

Please note this feature is still in "early access" which means you may run into issues. If you experience any problems, please contact [email protected] immediately for assistance. 

How to activate the delivery validator widget

  1. Within the Store Pick + Delivery app, click Settings and then Local Delivery
  2. Scroll down until you see the Delivery Validator Widget section and click Enable
  3. Click Save at the top of the screen
  4. Visit your store. You should see the Delivery Validator Widget appear at the top of the screen
  5. When a customer enters a valid postal code, they'll see the following:
  6. When a customer enters a non-eligible postal code, they will see this:

Customize the wording

You can customize all the text via the apps Design and text settings page. Got to the Local Delivery section and scroll towards the bottom of the page.

Customising the colours

The Delivery Validator Widget is built using HTML, CSS and a little JavaScript. This means you can easily modify the colours of all the elements via CSS.  

How to change the primary button color
You can easily change the color of the "Go" button by adding the following code to your themes Assets/storepickup.scss.liquid  file.

.zapiet-delivery-validator__submit {
  background: #FFC107 !important; 
  color: #383838 !important;

The above code will make the background of the button yellow and the font color dark grey.

How to change the top bar background color

Following the same principles as above add the following code to the bottom of your Assets/storepickup.scss.liquid file.

#zapiet-delivery-validator__topbar {
  background: white !important;  

How to change the close button color

.zapiet-delivery-validator__close svg {
  fill: #888 !important; 
How to change the prelude color
#zapiet-delivery-validator__label {
  color: #333 !important; 
By combing the above three rules, you can easily create a light version of the widget as shown below. 

Customising the delivery validator

Sometimes our widget might not be suitable for your use case. We have provided a number of functions you can use to write your own delivery validator.

Example Custom Validation 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" />
<script type="text/javascript">
function validateZipCode(e) {        
   const zipcode = document.getElementById('zipcode').value;
   // Checks to ensure Store Pickup + Delivery is installed correctly.
   if (typeof window.Zapiet === 'undefined' || typeof window.ZapietCachedSettings === 'undefined' || 
       typeof window.Zapiet.DeliveryValidator === 'undefined' || window.ZapietCachedSettings.cached_config === 'undefined' || 
       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;
   Zapiet.DeliveryValidator.checkEligiblity(zipcode, function(response) {
      // Eligible callback
   }, function() {
      // Not eligible callback
   }, function() {
      // Error callback
   return false;

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);





JavaScript Events


Ismail is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.