Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I want to add a custom field for mobile phone number using the third-party JavaScript library intl-tel-input. I also want to add another custom field for a date/time picker using the third-party JavaScript library flatpickr. Both of these fields need to be added to the product page for certain products (for example, a specific collection). I have a few requirements that must be met:
1. Both of these custom fields must be on the product page. Please do not suggest capturing this user input later in the checkout process such as on the billing form. It must be per product added to the cart.
2. I need to use the intl-tel-input library (https://intl-tel-input.com) with a specific configuration that will be the same for every mobile phone number field on every product page. This config can be hard-coded. I do not need any admin functionality to create or configure the custom field. Please do not suggest using an existing Shopify app which offers similar functionality. I have to use intl-tel-input and be able to update the source code as needed when the library is updated.
3. Similar to above, I need to use the flatpickr library (https://flatpickr.js.org/) with a specific configuration that will be the same for every custom date/time picker field on every product page. The config can be hard-coded and I do not need any admin functionality. Please do not suggest using an existing Shopify app that provides date picker functionality. I need to be able to update my code when the flatpickr library is updated.
How would I go about implementing this? I am unclear if I need to develop a custom Shopify app or not. If so, it does not need to be in the Shopify App Store and can be private/internal only to my store. Any relevant documentation and/or examples would be appreciated. I found this article on Theme App Extensions but am not sure if this is the correct approach for what I need:
Do I need to create a Shopify app with 2 different Theme App Extensions, one for each of my custom fields? Will this allow me to add the custom fields to the product page or is there a better way?
Hi,
Seems it can be done without app
After including intl-tel-input and flatpickr you need to Initialize Libraries
Create custom.js at assets
Code example
// Initialize intl-tel-input
document.addEventListener('DOMContentLoaded', function() {
var phoneInput = document.querySelector("#phone-input");
if (phoneInput) {
intlTelInput(phoneInput, {
initialCountry: "auto",
geoIpLookup: function(callback) {
fetch('https://ipinfo.io/json?token=YOUR_TOKEN')
.then(response => response.json())
.then(data => callback(data.country_code))
.catch(() => callback('US'));
},
separateDialCode: true
});
}
// Initialize flatpickr
var dateInput = document.querySelector("#date-input");
if (dateInput) {
flatpickr(dateInput, {
dateFormat: "Y-m-d",
minDate: "today",
enableTime: false
});
}
});
Include custom.js to theme.liquid
Add Custom Fields to Product Page
Code example
<div class="custom-fields">
<!-- Phone number input -->
<div class="form-group">
<label for="phone-input">Mobile Phone Number:</label>
<input type="tel" id="phone-input" name="phone_number" class="form-control">
</div>
<!-- Date/time picker -->
<div class="form-group">
<label for="date-input">Select Date/Time:</label>
<input type="text" id="date-input" name="date_time" class="form-control">
</div>
</div>
Use CSS for style
I am using a Shopify 2.0 theme such as Dawn or Spotlight so it seems like I need to create a custom section or snippet that contains the 2 fields, and then create a custom product template that includes it. (I should note that my 2 custom fields are dependent upon each other and interact together which is why I am grouping them together.)
@Small_Task_Help You solution seems to be the vintage approach and not suited for the current 2.0 theme architecture.
Does anyone have a relevant example of how to implement this in the Shopify 2.0 theme architecture?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025