Display mode

You can choose between two display modes: Card or Droplist.

Card: Displays all available rules, each shown as an individual card.



Droplist: Allows you to select a rule from a dropdown menu, which will then be displayed as a card.

Layout graphic

Rule order

You can customize the rule order, which will be reflected in the storefront, preview, and rule list. This lets you prioritize rules based on their name or preparation/delivery days, allowing you to decide which rule appears first or later. Available sorting methods:
Time created (newest, oldest)
Rule name (first letter) (A-Z, Z-A)
Min/max preparation/delivery (ascending, descending)

Show banner header

Purpose: Display a header above the ETA information when in Card display mode.
How to Use: Toggle this option to show or hide the banner header.

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.

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.

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

Stage 3- Delivery: The range of minimum and maximum delivery date



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

Personalize the colors, text, and border styles for the ETA widget.



Theme templates: 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 the timeline graphic

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

Background color: This will change the background of the ETA banner and 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.

Date appearance

Customize how dates are displayed 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 display mode:
Exact Date: Displays the date in the standard format, including the day/month/year.
Relative Date: Dates matching today’s or tomorrow’s calendar date will be displayed as “today” or “tomorrow.”

Countdown settings

Add a countdown timer to create urgency and inform customers about deadlines. You can include {TimeCountDown} variable to represent the countdown timer in the Message text

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.

Zipcode checker

The Zipcode 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

Custom CSS

Purpose: Apply advanced styling to match the widget’s appearance to your store’s theme.
How to Use: Enter custom CSS code in the provided field to override default styling.

Updated on: 01/06/2025