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.
Can't find the answer in our documentation?
Contact Support Pre-populate Phone Input Country Code
Dynamically Change the Gift Card Image In the Cart to Match the Design Selected
Installing Gift Card Item Properties Snippets (making Gift Card details visible on the Cart page)
Add a Fixed Timezone and Hide the Timezone Selector From your Store
Building your Gift Card Purchasing Form ✏️
Add a Gift Card Link to your Store’s Navigation ✏️
Add a Check Balance Page to your Store ✏️
Choose How Your Shopify Store Handles the Fulfillment Status of a Purchased Gift Card ✏️
Using Gift Card Pro in Multiple Languages ✏️
Uploading Your Own Gift Card Designs ✏️