How to Set Up the Estimated Delivery Widget

The Estimated Delivery Widget helps customers understand when their order will arrive by showing real-time delivery estimates directly on the product page.

Below is a step-by-step guide to setting it up.

Conditions Tab

Use this tab to define how delivery dates are calculated and the markets in which the widget appears.

Widget

• Title

  Internal name for the widget. This is only visible to you.

Order Processing Settings

These settings define how long it takes to prepare an order before shipping.

• Processing time
  • Shortest: minimum number of processing days
  • Longest: maximum number of processing days

• Processing cutoff time

  Orders placed after this time start processing on the following day, and only your selected processing working days are counted. The cutoff is checked against the shopper's device clock.

• Processing working days

  Select the days you process orders (e.g. Monday–Friday).

• Blocked dates (Holidays)

  Add specific dates when orders should not be processed (for example, December 25). New widgets include December 25–26 every year by default. You can add up to 10 entries, and each one can repeat every year.

Order Transit Settings

These settings control how long delivery takes once the order has been shipped.

• Order transit time
  • Shortest: minimum transit days
  • Longest: maximum transit days

• Order transit days

  Select the days when orders are in transit.

• Blocked dates (Holidays)

  Exclude specific non-shipping days during transit.

Markets

Choose where the widget will be visible:

• All markets
• Specific markets only

Content Tab

Use this tab to customize the text, variables, icons, and labels shown to customers.

Widget Layout

Choose Full bar (a three-step timeline with icons) or Minimal (one compact line with one icon). You can also untick Enable description to hide the text above the timeline.

Description

This is the main message displayed above the delivery timeline.

Example:

🕚 Order today within {counter}, you’ll receive your package between {delivery_from} to {delivery_to} 

Available Variables

You can dynamically personalize the message using these variables:

• {counter}     – Countdown timer until the processing cutoff time
• {ordered_date}     – Date when the order was placed
• {processing_from}     – Estimated processing start date
• {processing_to}     – Estimated processing end date
• {delivery_from}     – Estimated delivery start date
• {delivery_to}     – Estimated delivery end date
• {stock_left}     – Number of items left in stock
• {product_name}     – Product name

Date Settings

• Date format (e.g. 03/02/2026    )
• Date separator (e.g. /    )
• Include year (optional)

These settings apply to the dates in your description. The dates under the timeline icons always show a short month and day (for example, Oct 30 - Nov 02).

Icons

Customize each step of the delivery timeline:

“Order purchased” element

• Title
• Icon (upload or select)
• Optional color filter

“Order processing” element

• Title
• Icon
• Optional color filter

“Order delivered” element

• Title
• Icon
• Optional color filter

Note: The recommended icon upload size is 25 x 25 px

Translations

Translate all widget content into different languages using the Translations section.

Design Tab

Use this tab to control the widget’s visual appearance.

• Background (single color or gradient)
• Border radius, width, and color
• Spacing (top, middle, bottom)
• Icon size
• Progress line width and color
• Typography (font, size, and color). Choose Use your theme fonts to match your store's font.

Use the Template and Template colors at the top of the tab for a quick starting point.

Placement Tab

Choose where the widget appears:

• All products
• Collections
• Specific products

If more than one widget matches a product, only one is shown: a Specific products widget first, then a Collections widget, then an All products widget.

After you publish the widget, the Placement tab also shows Reposition with app block, which opens your theme editor so you can move the widget.

Code Snippet

You can also manually place the widget using this snippet:

<div class="essential-estimated-delivery-block-liquid"></div> 

Paste it anywhere in your product page template on your theme editor or theme files where you want the widget to appear.