Appearance
Last updated
Last updated
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.
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)
With Display mode as Card, you can configure the shipping banner.
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 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.
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.
You can select the direction (horizontal or vertical) and icon (dash or arrow) for the date range.
Set up the look and feel of the ETA banner.
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.
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 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 include {TimeCountDown} variable to represent the countdown timer in the Message text (Refer to Date variables).
You can customize how the timer is displayed, choosing to show days, hours, minutes, and seconds according to your preference.
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.
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
