So this happened last weekend, I got a call from my client and he wanted me to restrict shipping only for specific Pin Codes for his Shopify store and he wanted that functionality in short period of time.

See firstly I am a Woocommerce Guy, and if it was WooCommerce, I could just use the default Shipping Zone feature to restrict pin codes. But this was not Woocommerce, and there was no default way to limit shipping for specific pin codes in Shopify.

As time frame was limited, I tried first to check if I can find any Apps, and to my surprise, all the apps I found were substandard.

So I looked at the checkout page’s dom and decided to use client-side restriction using JavaScript. I must confess JavaScript is a lifesaver.

So let’s begin, I will show you what exactly I have done to achieve the goal of restricting shipping to specific pin-codes on Shopify. Also one more thing for this to work you will need access to your checkout page, which Requires Shopify Plus.

I am assuming that you know little bit about Shopify and are able to navigate to specific sections.

Step 1: Creating a Js file in Assets folder to store all your pin codes in an array.

So first things first Lets create a blank JS file in your themes Assets folder and name it allpincodes.js (you can name it anything).

Step 2: Create an Array with your pincodes in Your newly Created allpincodes.js file.

So once you have created the allpincodes.js file, lets create a javascript array to store your pincodes.

once this is done, lets go to our checkout.liquid template and include this javascript.

<script src=”{{‘allpincodes.js’ | asset_url}}” > </script>

So once you have included the Javascript file in checkout.liquid template now you have access to the pin codes array from allpincodes.js

Step 3: Get pin code entered by user on Shopify checkout page

So first of all let’s create a Script tag in checkout.liquid file, and create a Jquery Document ready function

$(document).ready(function(){
//Your Code here
});

We are using this function because we want our code to run once the dom is loaded.

jQuery(".step__footer__continue-btn").click(function(){

    var pincode = jQuery('.field__input-wrapper input[name="checkout[shipping_address][zip]"]').val();

    document.cookie = 'pincode' + "=" + pincode ;

    });

    const newpincode =  getCookie("pincode");

So as you can see the code above is in the Code Block 1 in Image. And in this code we are using a Click event listener on Continue To Shoping Button in the Checkout page.

The Event listener is checking for the User inputted Pin code and storing it into a cookie named pincode.

And Outside of the event listener, we are getting the pincode cookie value and storing it into a newpincode variable.

Step 4: Check if user submitted pincode is available in pincodes array.

       var checkpincodes = pincodes.filter(function(item) {
          if(item === parseInt(newpincode)){

           return item;

          }});

          const filteredpincode = checkpincodes[0];

So as we have access to our pincodes array from allpincodes.js file which we created in Assets folder and later included into Checkout.liquid file.

We can use the filter method on our array. The filter() method creates an array filled with all array elements that pass a test, in our case, it will only return 1 value in our array if it passed the if statement else it will return undefined.

So in the above code snippet inside our checkincodes method, we are checking if the Pincode from our array is equal to the newpincode which user inputted. if it’s true it will return that particular Pincode, we can also simply return true and use that for our conditional statement, but I want to return entire Pincode for now.

If the Pincode user-inputted matched with the Pincode from our pincodes array, we will have access to that Pincode at checkpincodes[0]. Later we created another constant called filteredpincode and assigned checkpincodes[0] to it.

Step 5: Once again check and matched the pincodes and take actions.

        if(filteredpincode == newpincode){
          console.log('All good, Nothing to do here')

        }

          else{

          setTimeout(function(){ 

            jQuery("#continue_button").css("display", "none");

              jQuery("<span>Sorry We Do Not Deliver To Your PinCode!</span>").insertBefore(".section--shipping-method");
          }, 1000);



        }

So you must be wondering why we are checking this again? you are right we could check the pincode and take actions right there in our array filter method, but I wanted to keep the conditional separate from that statement, it’s all preference.

So in above code we have an if and else code block. In here we are checking that if the filteredpincode is equal to the pincode user inputted, then do nothing, and just console log a message.

But in case it doesn’t match and filteredpincode is undefined we have used a setTimeout Function and after 1 second we disable the continue Shopping button and add a message “Sorry We Do Not Deliver To Your PinCode!” on the shipping page and restrict the user from making a purchase.

Thats it Guys, if you have any questions do comment below, I will definitely help you out.