Overview

The Estimated Delivery widget is composed of three independent parts. Each one can be turned on or off, reordered, restyled and translated separately. They all share the same data — today’s date, the calculated shipping window, the calculated delivery window, the cutoff countdown — but render it differently.

The three parts

Widget	Purpose	Best used when
Message	One-liner with cutoff time and dispatch day	You want a compact “ships Mon” line next to the buy button
Clock	Live countdown until today’s cutoff	You want urgency — “Order in the next 02:34:12 for dispatch today”
Steps	Three-step timeline: Order → Shipping → Delivery	You want a fuller, visual representation on product detail or checkout

You don’t have to pick one. The widget renders all three in one container — turn off the ones you don’t need and reorder the rest. On the cart page you might show just the message, on the product detail page all three.

Composition

Internally the widget is a single <div> wrapping the active components in the order you choose. The order is controlled by Layout → Position on each component, and the spacing between them by Layout → Space between elements.

┌─ widget container ─────────────────────────────────────┐
│  [ Clock ]                                             │  position 0
│                                                        │
│  [ Steps ]                                             │  position 1
│                                                        │
│  [ Message ]                                           │  position 2
└────────────────────────────────────────────────────────┘

Each widget part exposes its own colour, font-size, border and skeleton-loader settings — they can look completely different from each other.

Skeleton loader

The widget is rendered server-side with the dates the storefront knows about, but for highly dynamic setups (e.g. behind Varnish) the final dates come from a small client-side hydration. While that runs, each part displays a shimmer skeleton in its own background colour so the layout doesn’t shift. Skeleton can be disabled per widget via Layout → Skeleton loader.

Where it renders

The same widget is rendered on:

• Product detail page — under the buy button (default placement).
• Cart page — once per cart, typically above the totals.
• Checkout confirm page — once per order summary.
• Account register page — useful for highlighting fast delivery to first-time visitors.
• Any CMS page — via the dedicated Estimated Delivery CMS block in Shopping Experiences.

Each context can independently toggle the widget on or off through its own configuration tab.

Next

• Message
• Clock
• Steps