Übersicht

Das Estimated-Delivery-Widget besteht aus drei unabhängigen Teilen. Jeder kann separat ein- oder ausgeschaltet, neu angeordnet, anders gestylt und übersetzt werden. Alle teilen sich dieselben Daten — das heutige Datum, das berechnete Versandfenster, das berechnete Lieferfenster, den Cutoff-Countdown — rendern sie jedoch unterschiedlich.

Die drei Teile

Widget	Zweck	Am besten, wenn
Nachricht	Einzeiler mit Cutoff-Zeit und Versandtag	Sie eine kompakte “ships Mon”-Zeile neben dem Kaufbutton möchten
Uhr	Live-Countdown bis zum heutigen Cutoff	Sie Dringlichkeit möchten — “Order in the next 02:34:12 for dispatch today”
Schritte	Drei-Schritt-Zeitleiste: Bestellung → Versand → Lieferung	Sie eine vollständigere, visuelle Darstellung auf Produktseite oder Checkout möchten

Sie müssen sich nicht für eines entscheiden. Das Widget rendert alle drei in einem Container — schalten Sie die nicht benötigten aus und ordnen Sie den Rest neu an. Im Warenkorb zeigen Sie vielleicht nur die Nachricht, auf der Produktseite alle drei.

Komposition

Intern ist das Widget ein einzelnes <div>, das die aktiven Komponenten in der gewählten Reihenfolge umschließt. Die Reihenfolge steuert das Feld Position an jeder Komponente, der Abstand dazwischen das Feld Space between elements.

┌─ Widget-Container ─────────────────────────────────────┐
│  [ Uhr ]                                               │  Position 0
│                                                        │
│  [ Schritte ]                                          │  Position 1
│                                                        │
│  [ Nachricht ]                                         │  Position 2
└────────────────────────────────────────────────────────┘

Jeder Widget-Teil hat eigene Farb-, Schriftgrößen-, Rahmen- und Skeleton-Loader-Einstellungen — sie können völlig unterschiedlich aussehen.

Skeleton-Loader

Das Widget wird serverseitig mit den Daten gerendert, die der Storefront kennt; bei sehr dynamischen Setups (z. B. hinter Varnish) kommen die finalen Daten aus einer kleinen Client-seitigen Hydratation. Während diese läuft, zeigt jeder Teil ein Shimmer-Skeleton in seiner eigenen Hintergrundfarbe — damit das Layout nicht springt. Das Skeleton kann pro Widget über Layout → Skeleton loader deaktiviert werden.

Wo es gerendert wird

Dasselbe Widget wird gerendert auf:

• Produktseite — unter dem Kaufbutton (Standard-Platzierung).
• Warenkorbseite — einmal pro Warenkorb, üblicherweise über den Summen.
• Checkout-Bestätigung — einmal pro Bestellübersicht.
• Konto-Registrierungsseite — nützlich, um schnelle Lieferung für Neukunden hervorzuheben.
• Beliebige CMS-Seite — über das dedizierte Block Estimated Delivery in Shopping Experiences.

Jeder Kontext kann das Widget unabhängig über seine eigene Konfigurations-Tab ein- oder ausschalten.

Weiter

• Nachricht
• Uhr
• Schritte