Signup

Delivery validator widget (early access)

Please note this feature is still in beta (early access), which means issues are possible. Should you experience any, please contact support@zapiet.com.


Requirements

  • You need to use exact or partial postal code match delivery validation method. 

Enable the delivery validator widget

  1. Within the Store Pickup + 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.
  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 the wording in the widget if you go to Store Pickup + Delivery > Settings > Design and text. Go to the  the Local Delivery section and scroll towards the bottom of the page.


Customize the colors

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

If you're using the 7.0.8. (or higher) version of our app, please keep in mind that the SCSS file is deprecated and that we're using the Assets/storepickup.css.liquid file. You may need to adjust the code to avoid nesting, as it is not supported in the CSS file. 

You can check which version of the app is installed on your theme in the storepickup.liquid file.

Change the primary button color
You can change the color of the "Go" button by adding the following code to your theme's Assets/storepickup.scss.liquid file.

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

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

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

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.

We do not offer custom implementations of the delivery validator widget. We recommend hiring a Shopify Expert to make the customization 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 support@zapiet.com 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.

Did you find it helpful? Yes No

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