Please note this feature is still in beta (early access), which means issues are possible. Should you experience any, please contact us at [email protected].


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 to the Delivery Validator Widget section and click Enable.

  3. Click Save.

The delivery validator widget will now appear at the top of the screen.

When a customer enters a valid postal code, they'll get the message:

When a customer enters a non-eligible postal code, they will get the message:


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 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 modify the colors of all the elements via CSS.

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

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


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.css.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 [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.

Did this answer your question?