Pre-populate Phone Input Country Code

You can set the phone number input to be pre-populated with a specific country code by adding this script to your theme files.

To start, navigate to your theme’s code editor and click “Add a new asset” under the assets tab. Select the “Create a blank file” tab, select “js” extension, and name the file.

Paste the following into your newly created file and change the countryCode variable on line 3 to your desired country code.

(() => {

  const countryCode = "+1"; // ADD YOUR COUNTRY CODE HERE

  if (!window.location.href.includes("a/gc/gift-card")) return;

  document.addEventListener('gcp-page-loaded', () => {

    const currentPage = window.GCPSDK.page.get();
    if (!currentPage || currentPage.step !== "gift_card") return;

    const phoneInput = document.querySelector("#gcpMobileSelectInput");
    if (!phoneInput) return;
    
    phoneInput.addEventListener('click', (e) => {
      if (e.target.value === "" || e.target.value === "+") {
        phoneInput.value = countryCode;
      }
    });
    
  });

})();

Add the script to your “theme.liquid” file above the closing body tag </body> and ensure that the file is named appropriately.

<script src="{{ 'your-file-name.js' | asset_url }}" defer="defer"></script>

Now, when a user click the phone input, the input will be pre-populated with the set country code.