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

Requirements

You need to use exact or partial postal code match delivery validation method. Learn more in our Delivery validation article.

Enable the delivery validator widget

Within the Zapiet - Pickup + Delivery app, click Settings and then Local Delivery.
Find the Delivery Validator Widget section and click Enable.
Click Save.

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

When a customer enters a valid postal code, they'll 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".

Customize the wording

You can customize the wording in the widget to your liking.

Within the Zapiet - Pickup + Delivery app, click Settings and then Text and design.
Find Delivery widget, and click Show.
Search for the "delivery validator" fields, and edit them accordingly.

Customize the colors

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

If you're using the newest version of our app (OS2.0 app embed), CSS should be added in Zapiet - Pickup + Delivery > Settings > Developers, under Custom styles.

If you're using the 7.1.2. version (or older) of our app, CSS should be added in the storepickup.css.liquid file on your theme.

Which version of the widget am I using?

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 yellow and the font color dark grey.

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

Change the top bar background color

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

Change the close button color

.zapiet-delivery-validator__close svg {
  fill: #888 !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

If our widget is not be 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.

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" />
</form>
    
<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
      Zapiet.DeliveryValidator.eligibleForDelivery(response);
   }, function() {
      // Not eligible callback
      Zapiet.DeliveryValidator.notEligibleForDelivery();
   }, function() {
      // Error callback
      Zapiet.DeliveryValidator.error();
   });
        
   return false;
}
</script>

Gist available here: https://gist.github.com/cargix1/fdecb654aaf21118ce4e08e30c6a0952

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

Limitations

The delivery validator only works when your validation settings are configured to exact postal code or partial postal code matching. It is not compatible when using maximum driving distance or radius validation methods.