- In the ‘Style’, you can configure the ‘Calendar Day Text Settings’, ‘Calendar Month Text Settings’, ‘Text Settings’ and ‘Color Settings’ for the Delivery Date to display on the Store view (Frontend View).
- To navigate to Style, go to Settings -> Style.
- You will get the delivery date block display on the Product page or Cart page whichever you have selected as per the configuration in the Text Settings and the Color Settings.
How to change Calendar Text Settings
Calendar Day Text Settings
- Set the text caption for each day that will be visible on the store. For example if you insert “Sun” for Sunday then Sun will be visible in place of Sunday.
Calendar Month Text Settings
- Here you have to set the text caption for each month that will be visible on the store. For example if you insert “Jan” for January then Jan will be visible in place of January.
How to change Text Settings
As per the texts you are entering in this section, in the frontend it will be displayed in such a way. You can configure & set the caption as below :
- Select Date Label: Set a label text for date selection.
- Placeholder Text: Set a Text caption that will be seen by default.
- Timeslot Label: Set the text caption for the Time slot selection.
- Error Message: Set a message in this section that will be displayed when an error occurs.
- Comment Box Label: To display any notes or instructions you have to set the caption in this section.
- Additional Notes: Set additional notes regarding Add to Cart or any important note.
- Thank You Page Delivery Date Heading: You can set Date Heading for the delivery page here.
- Thank You Page Delivery Date Label: You can set a date label which displays in the thank you delivery page.
- Thank You Page Delivery Time Label: You can set a time label which is displayed in the thank you delivery page.
- You will get the real-time preview as you configure the text settings.
How to change color Settings
- The custom color picker is provided to set the color for different elements of Date block & Calendar based on your store’s theme.
- Choose the Color for Button Background and its Text which are displayed on the Cart page.
- Label Color: Choose the color for the label message.
- Error Message Text color: Choose the Text color to display the error.
- Additional Notes Text Color: Choose the Text color for ‘Additional Notes’ which will be displayed at the time of checkout (Cart page).
- Button Background Color: Choose the Background color for the buttons
- Button Text Color: Choose the Text color for the buttons.
- Calendar Background Color: Choose the background color of the Calendar view.
- Calendar Available Date Text Color: Choose the color to display the available dates for delivery.
- Calendar Disable Date Text Color: Choose the color to display the dates that have passed or are unavailable for delivery.
- Next Month Date Text Color: Choose the color to display the dates for the coming months.
- Selected Date Background: Choose the Background color for the selected date to be displayed on the calendar when the date is selected for the delivery.
- Selected Date Text Color : Choose the color to display the selected date’s text color.
- By clicking on the color box, the color picker tool will appear. you can choose the color, or you can directly insert the Hex code (HTML code) or RGB code of the color.
- After configuring the style for Text settings & Color Settings, click on the Save button.