The Field Appearance section helps you personalize how the delivery date and time fields, labels, placeholders and control how the fields are shown on the cart and checkout pages.

Customize Delivery Fields Appearance on Cart & Checkout Pages #

To configure these settings :

• Go to the Shopify admin dashboard and go to Apps > Flexi Delivery & Pickup Date > Settings → Appearance, and click on Field Appearance.

• Under field appearance, you’ll find two main sections:

1. Display Settings: Control how calendars and slots appear
2. Field Appearance: Customize field labels, placeholder text, and more.

The following settings determine how delivery fields appear on the cart and checkout pages.

Display Settings #

Customize how the delivery selection appears to customers:

• Show time slots in a list view– Enabling this option will display all available time slots vertically as a list.

Frontend Experience:

On the checkout page, the time slots will be shown in a list view.

• Show delivery dates in a dropdown-Enabline this option to dispaly dates in a dropdown view instead of a calendar view.

Frontend Experience:

On the checkout page, the time slots will be shown in a dropdown view.

• Calendar Display Mode controls how the calendar looks and behaves.
  • Open calendar on click of input field– The calendar appears only when the user clicks the date input field.
  • Always show calendar open
    The calendar remains visible by default without requiring a click.

Field Appearance #

Customize the text your customers see around the delivery date and time fields on the cart and checkout pages.

Field Note Text-Displays a short message below the delivery date field. Example: “We will try our best to deliver your order on the specified date.”

Frontend Experience:

On the checkout page, the text entered in the Field note text field will appear as below.

Estimated Delivery Date Text-Set a message using placeholders to show the expected delivery timeline.

Example:“Great news! Your order is expected to ship on %shipping_date%. Once shipped, it should arrive within %delivery_range_start_days% to %delivery_range_end_days% business days.”

Frontend Experience:
Note: This message will only appear on the frontend if the “Estimated Delivery Date” option is enabled.

Once configured, this message appears on the cart and checkout pages, just below the delivery date field.

Preselect first available delivery date– Enabling this option will auto-select the first available delivery date on the checkout page.

Preselect first available time slot– Enabling this option will auto-select the first available time slot on the checkout page.