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

Within the Store Pick + Delivery app, click Settings and then Local Delivery

Scroll down until you see the Delivery Validator Widget section and click Enable

Finally click Save at the top of the screen

Now visit your store front and you should see the Delivery Validator Widget appear at the top of the screen

When a customer enters a valid postal code, they'll see the following:

When a customer enters a none eligible postal code, they will see this:

Customise the wording

You can customise all the text via the apps Design settings page. Just look for 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
Your can easily change the color of the "Go" button by adding the following code to your themes snippets/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 snippets/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 

We recognise that our widget is not going to be suitable for all use cases and so we have provided a number of functions you can call upon 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

Did this answer your question?