The Date Picker option type offers a user-friendly calendar for customers to select specific date(s), either within a set date range determined by the admin or across all available days. Useful for choosing delivery or store pickup dates.
For scenarios where a broader timeframe is essential, such as when dealing with rental services, opting for the Date Range is a more fitting choice. Unlike the single-date selection of the Date Picker, it empowers customers to pick a range of dates (selecting the start and end dates) that align with their preferences.
Option Settings #
Basic settings #
- Option name: Give your Date Picker option a unique internal name, which will also be visible to your customers. Ensure that different options in the option set have distinct names.
- Option label: Add a label that is visible to your customers such as “Delivery Date”. Option labels can be the same or different for various options in the option set.
- Hidden: Hide the option label if you want to keep the interface cleaner or prefer it not to be visible to users.
- Required field: Make the Date Picker a mandatory field if you want, ensuring customers select a date before adding the product to cart.
- Multiple selection: By default, customers can only select one specific date from the calendar. If you allow customers to select multiple dates, select the “Multiple selection” checkbox and set the minimum and maximum number of dates allowed for selection, or leave it as default for unrestricted selections.
- Placeholder: Add a short text inside the date picker field when no date is selected yet. For instance: “Select a date”, “Select your delivery date”.
- Help text: Provide additional instructions or information for your customers to assist them in the date selection process.
- Info: Create an informative tooltip that appears when users hover over a small icon, providing more context or assistance.
- Column width: Adjust the width of the Date Picker field if you want, choose from 25-33-50-66-75-100%. For instance, if you intend to incorporate both the Date Picker and Time Picker on a single line to optimize the product page space, simply adjust the column width of each to 50%.
Advanced settings #
- Date for selection: Specify the date range within which customers can make selections.
- All days: By default, customers can select any date on the calendar. Use case: Ideal for general-purpose stores without specific date constraints, allowing customers the convenience of choosing any day. To limit the selection range or enable/disable specific days, uncheck this option and use the settings below.
- Enable specific date ranges: Define one or multiple date ranges available for selection. Customers can only choose dates within these ranges. Click on the field to select the start and end dates for each range. Click “Add range” to include additional date ranges. Use case: a florist might use this feature to allow customers to select delivery dates only during holiday periods like Valentine’s Day or Mother’s Day, ensuring availability during peak seasons.
- Enable specific dates: Restrict customers to choosing only from a predefined list of dates. Use case: Perfect for event-based products like concert tickets, workshop enrollments, or special event services where the service/product is only available on certain dates.
- Disable specific dates: Specify certain dates to be disabled, preventing customers from selecting them. Use case: Useful for days when the store is closed, such as public holidays, maintenance days, or blackout dates for delivery services.
- Enable dates after X days from today: Set a number of days from “today” (the day customers place their order) that are not selectable. This means all past days and the next X days will be disabled, leaving the remaining dates available for selection. Use case: Useful for days when the store is closed, such as public holidays, maintenance days, or blackout dates for delivery services.
- Disable past dates: To prevent customers from selecting past dates, enable this option. If you consider “today” (the order placement day) as a past date, also enable the “Include today” checkbox to block both past dates and “today”. Use case: Ensures customers can only select future dates for deliveries or appointments, such as in online booking systems for services like spa treatments or consultations.
- Disable dates before: To block all dates before a specific date, enable this option and select your date milestone. Use case: Useful for product launches where orders can only be placed after a certain date, or for managing availability of new arrivals.
- Disable dates after: To block all dates after a specific date, enable this option and select your date milestone. Use case: Perfect for clearance sales or promotions that have a definitive end date, ensuring that customers can only select dates within the promotional period.
- Disable days of the week: Disable specific weekdays (e.g., Monday) to prevent customers from selecting dates on those days. Use case: Ideal for businesses that do not operate on certain days, such as restaurants that are closed on Mondays or delivery services that do not operate on weekends.
Notes: You can combine different date range conditions to fit your needs, as long as they do not conflict with each other. If you need assistance setting up your date range, chat with us via in-app live chat for quick support.
- Conditional logic options: Determine the visibility of the Date Picker, ensuring it appears only when specific custom options or Shopify variants are selected. To set up the condition logic for your Date Picker, follow this guide.
- Add price: Set an additional price for this option if you want to charge a fee for date selection.
- One-time charge: If you set an extra price for date selection and want to apply that fee once regardless of the quantity of main products (e.g., cakes) in the order, enable one-time charge. This way, customers will be charged only once for selecting their preferred delivery date, whether they buy 10 or 100 cakes.
Need Assistance? #
If you run into any challenges while configuring your custom options, feel free to reach out to us for assistance through our convenient in-app live chat, by submitting your request via our contact form, or by sending an email to support@tigren.com. We’re here to help!