Datetime
The Datetime option type allows customers to select a specific date and time. This is particularly useful for products or services that require scheduling, such as booking appointments, selecting delivery dates, or reserving a product for a specific time.
Basic option settings
1. Option Name
This is the internal name for the Datetime option within the app’s settings. It helps you manage and identify the option but does not appear on the storefront product page.
2. Label on Product
This is the text that appears above the Datetime picker on the product page of your storefront. It provides context or instructions for the customer, such as "Select your delivery date" or "Choose an appointment time."
3. Label on Cart
This is the text that appears on the Cart summary screen, Checkout, and Order detail page, next to the date and time selected by the customer. It helps display the specific datetime chosen by the customer, such as "Delivery Date: August 25, 2024, 10:00 AM."
4. Add-On Product
This feature allows you to apply an additional charge based on whether or not the customer selected the date or time.
For example, if the customer chooses a specific time or date for delivery instead of using the normal delivery service, an extra fee can be automatically added to the product’s price.
5. Conditional Logic
This feature allows you to set rules for when the Datetime field should be shown or hidden based on other customer selections.
For instance, the Datetime option might only appear if a customer selects a certain delivery option or service.
Advanced option settings
1. Required Field
This setting determines whether the Datetime field must be completed by the customer before they can proceed with their purchase. Enabling this ensures that a date and time are selected.
2. Hide "Label on Product"
This option allows you to hide the label that typically appears above the Datetime picker on the product page. This can be used to streamline the interface if the label is not necessary for customer understanding.
3. Min/Max Date
These settings define the range of dates customers can select. Each includes three options:
Today: Restricts the date selection to today’s date.
Designated Date: Allows you to set a specific start or end date that customers can choose.
Fixed Number of Days: Enables you to set a dynamic range by specifying a number of days relative to today. For example, setting a Min Date to "3 days from today" ensures that customers cannot select a date earlier than three days from the current date.
4. Date Format
This setting controls how the date is displayed in the Datetime picker and on various screens. Formats like "MM/DD/YYYY," "DD/MM/YYYY," or "YYYY-MM-DD" can be chosen to match regional preferences.
5. Tooltip
This setting allows you to provide additional information in a pop-up message when the customer hovers over the information icon. It provides brief, contextual information without cluttering the interface.
6. Help Text
This setting displays directly beneath the Text option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.
7. Placeholder
This is the text displayed inside the Datetime picker field before the customer makes a selection. It serves as a prompt, such as "Select a date" or "Choose a time."
8. Class Name
This setting allows you to assign a custom CSS class to the Datetime field, enabling you to apply specific styling or behavior according to your design requirements.
Last updated