How to Preselect a Country in the Country of Residence Field

This guide provides step-by-step instructions on how to preselect a specific country in the "Country of Residence" field during the checkout process. Additionally, it outlines how to hide all other countries from the selection list. This customization is useful for scenarios where you want to streamline the user experience by automatically setting the default country.

1. Open the Checkout template under Manage → Templates

2. Insert the following script at the end of the template in a script tag:

   XML

   <custom-script>
   var preselectedCountry = "<MyCountry>";
   
   var timer1 = setInterval(function() {
     // if page is loaded
     if(document.querySelector(".tp-dropdown__select[tp-country-selector]")) {
       clearInterval(timer1);
       // hide the selector 
       document.querySelector(".tp-dropdown__select[tp-country-selector]").style.visibility = "hidden";
       // wait 500ms
       setTimeout(function() {
         // show the selector
         document.querySelector(".tp-dropdown__select[tp-country-selector]").style.visibility = "visible";
         
         // open the dropdown
         document.querySelector(".tp-dropdown__select[tp-country-selector]").click();
         // wait until the country list is loaded
         var timer2 = setInterval(function() {
           if(document.querySelector("[dynamic-html='countryListHtml'] .tp-dropdown__link")) {
             clearInterval(timer2);
             // load all countries
             var allCountries = document.querySelectorAll("[dynamic-html='countryListHtml'] .tp-dropdown__link");
             allCountries.forEach(el => {
               var country = el.querySelector("span").innerHTML;
               // select the Country
               if(country == preselectedCountry) {
                 el.click();
               }
             });
             // set timer to hide all other countries (continuously)
             countryHider();
           }
         }, 20);
         
       }, 500);
   
     }
   }, 50);
   
   // hide all other countries (continuously)
   function countryHider() {
     var timer3 = setInterval(function() {
       
       if(document.querySelector("[dynamic-html='countryListHtml'] .tp-dropdown__link")) {
         // load all countries
         var allCountries = document.querySelectorAll("[dynamic-html='countryListHtml'] .tp-dropdown__link");
         // hide all countries
         allCountries.forEach(el => {
           var country = el.querySelector("span").innerHTML;
           if(country != preselectedCountry)
             el.style.display = "none";
         });
       }
       
     }, 20);
   }
   </custom-script>
   

   Replacing the placeholder <MyCountry> with the actual value of the country name that you'd like to show as pre-selected (e.g. Estonia, France, or Germany).

   After this, the field would look similar to this, regardless of the user's GeoIP location.

Last updated: June 26, 2026