Date Picker adds a calendar field to your product, allowing shoppers to either type in a date or select one directly from a visual calendar. You can connect a Date Picker to different elements in your design, depending on what you want to show. For example, display the selected date as text, mark it on a calendar, or reveal the moon phase for that night.
You can configure how the date picker behaves, and decide how that input will be used to personalize.
In this article:
Settings you can configure on a Date Picker
When you select Date Picker as the option type, you’ll be able to configure how the date selector behaves and appears in your store.
To configure these, expand the option in your Option Set and scroll through the available settings.
Text inputs come with a wide range of settings. Click any item below to jump directly to it:
🛠 Basic Settings
⚙️ Advanced Settings
Label
Text that appears above the date picker field on your product page (e.g., “Choose a date”)
Required
Make this field mandatory by enabling this toggle. If it's required, shoppers won't be able to complete their purchase without selecting a date. An * next to the option label will indicate it is required on the storefront.
Help Text
Add a short description below the picker to guide your shoppers. For example: “Select a meaningful date — you can type it or choose from the calendar.”
How Date Pickers Can Be Used to Personalize
Date Pickers let shoppers choose a specific date — but what that date does depends on the function you assign to the option.
You can learn more about functions and how they work here.
To assign a function to a Date Picker, expand the Function tab of your option and choose how it should interact with your template.
Date Pickers can power a variety of personalization types by assigning functions to them. Here are the functions that work with text inputs, click on each one to learn how they can personalize your product:
Text
Displays the shopper’s date on a text element in your template.
Calendar
Displays the shopper’s date on a calendar element in your template.
Moon Phase Calendar
Displays the moon phase for the specific date the shopper selected on a Moon Phase element in your template.