🎨Appearance - Layout, Color, Date time format

Each condition has its respective ETA message and banner design. By switching between conditions, the appearance will also be changed. The appearance of the timeline graphic will not be affected by these changes, which means you can use either of the conditions, display its message, and simultaneously display the timeline graphic. The design of the timeline graphics, however, maybe affected by the design of the message and/or banner.

Display format

For Delivery methods, there are 2 layouts for the ETA banner: Card or Droplist.

• Card: This layout displays all delivery methods, each represented by a 'card.' Each card visually represents a different delivery method.

• Droplist: In this layout, delivery methods are organized in a dropdown list, showing only the name of each method. When a user selects a method from the list, only the ETA banner for that chosen method is displayed.

Layout graphic

Show header on banner

This setting will only be shown if you

• Use Delivery Method

• AND choose Card as the Display format.

Set up how to show estimated delivery information to customers. You can choose either ETA information or a timeline graphic to appear on the ETA banner area.

Show delivery method name

For delivery method rules with Card display format, you can configure whether to show or hide delivery method name.

ETA information

The ETA information section features several details, including the delivery method name, estimated text, message, country delivery label, custom text, extra information text, and a countdown message.

Note that if you disable the ETA information in the layout options, all these text elements will be hidden at once, if any.

Timeline graphic

Timeline graphics serve as a visual aid within the ETA banner. Creating a graphic helps customers better understand when their product will arrive and makes the presentation more appealing, potentially boosting conversion rates.

Note that only Delivery methods as estimate rule will feature a timeline graphic.

Stage icons, titles, tooltips

You can display from 1 to all 3 stages on the timeline.

• Stage 1 - Order received: The date when the order is placed. Usually, it is today, but it can be another day if the order is placed after the cut-off time.

• Stage 2 - Preparation The range of minimum and maximum preparation date (Refer to Date setup fields).

• Stage 3- Delivery: The range of minimum and maximum delivery date (Refer to Date setup fields).

You can customize icons, title, tooltips for additional information suitable for your sales and logistics activities.

Date range

You can select the direction (horizontal or vertical) and icon (dash or arrow) for the date range.

Visual appearance editor

Set up the look and feel of the ETA banner.

• Sample layouts: pre-created visual layout so that you can choose quickly

• Text color: General color for texts on the ETA banner. Note that if you adjust the text visual by text editors when setting up the rule, the text will follow the text editor one while unaffected text follows the general color in the Appearance setting.

• Timeline icon color: Color for icons displayed on timeline graphic

• Text size: The size is set for all texts by default unless a specific size is set by text editor.

• Background color: This will change the background of the ETA banner and the background of the timeline graphics. You can set color or transparent.

• Border color: will affect the border of the banner and the border of the timeline graphics. You can set color or transparent.

Postal code checker settings

Note that this section is available only for Postal code delivery as one of the Estimate types.

The Postal Code Checker validates customers' postal codes and displays the ETA accordingly. You have the flexibility to customize both the information and the appearance of this postal code checker.

• Checker's title: The title at the top of the section, typically instructs customers on what action to take.

• Postal code text: The placeholder or instructional text inside the text box.

• Check text: The wording on the button used for validation.

• Check text color: The color of the text on the validation button.

• Button background color: The background color of the validation button.

• Valid/Invalid postal code: Text displayed when a postal code is available/not available for delivery

Date appearance

You have the option to customize the appearance of dates in the ETA banner:

• Date format: This allows you to select how the date is displayed. You can choose the arrangement of the day, month, and year.

• Date language: You can set up language used in the date display format. If you opt to include the day of the week and/or month name in the display, you can select your preferred language for these elements here.

• Date display mode: You can choose to show relative dates as today or tomorrow

  • Exact date: This option displays the date in the standard format, including the day/month/year.

  • Relative date (today, tomorrow): Dates matching today's or tomorrow's calendar date will be displayed as such.

  • You can change the language of the "today" and "tomorrow" text by modifying the Date Language setting.

Countdown settings

You can include {TimeCountDown} variable to represent the countdown timer in the Message text (Refer to Date variables).

Countdown timer format

You can customize how the timer is displayed, choosing to show days, hours, minutes, and seconds according to your preference.

Show timer after cut-off time & Countdown option

You can choose whether to display the countdown after the cut-off time and select the method of calculation.

• By default, the countdown timer is shown after the cut-off time.

• 2 options for countdown:

  • (1) Count to the next cut-off time (including non-working days and holidays) - For example, if today is Friday and the cut-off time is 18:00, and Saturday and Sunday are off days, at 19:00 the next cut-off is 18:00 on the following Monday. The countdown should display 71 Hours (24-19 + 24 + 24 + 18). If users choose a Timer Format including Day, then it will show as 2 Days 23 Hours.

  • (2) Count to 23:59 every day.

Caution when turning off show timer after cut-off time: Since the countdown is a variable in the text as {TimeCountDown}, if there is text before or after it and the countdown is turned off, only the variable is hidden, not the entire text. This may result in nonsensical text.

To avoid this, you should write {TimeCountDown} on a single line in the Message text with no letters or symbols before or after it.