Widget

Zakładka Widget jest największa — kontroluje wszystko, co widzi klient: które widgety są aktywne, ich kolejność, kolory i fonty, oraz tekst tooltipa.

Prawa strona ma live preview, który re-renderuje się przy każdej edycji. Iteruj nad stylizacją bez przeładowywania storefrontu.

Karta Layout

Kontroluje kompozycję widgetu — które części renderować, w jakiej kolejności, jak je rozdzielić.

Pole	Zastosowanie
Message (`messageActive`)	Włącz/wyłącz linię komunikatu
Message Position (`messagePosition`)	Gdzie komunikat siedzi wśród innych widgetów (mniejszy numer = wyżej)
Clock (`clockActive`)	Włącz/wyłącz żywy zegar
Clock Position (`clockPosition`)	To samo, dla zegara
Steps (`stepsActive`)	Włącz/wyłącz trzykrokową oś
Steps Position (`stepsPosition`)	To samo, dla kroków
Space between elements (`layoutGap`)	Jednostka CSS — gap między aktywnymi częściami
Padding (`layoutPadding`)	CSS shorthand — padding wewnętrzny wrappera
Margin (`layoutMargin`)	CSS shorthand — margin zewnętrzny wrappera
Skeleton loader (`skeletonLoaderActive`)	Master włącznik shimmer skeleton

Pozycje to zwykłe liczby — 0, 1, 2. Ustaw dowolny aktywny komponent na niższy numer, żeby przesunąć go na górę widgetu.

Karta Message

Standardowy look-and-feel linii komunikatu plus sam tekst. Placeholdery dostępne w tekście opisane w Widgets → Komunikat.

Pola: messageColor, messageBackground, messagePadding, messageBorderWidth, messageBorderColor, messageBorderRadius, messageBorderStyle, messageFontSize, messageText plus trzy kolory skeleton.

Tooltip to mała ikona (i popover za nią), którą wstawia placeholder %tooltip% w tekście komunikatu.

Pola: tooltipIconColor, tooltipIconBackground, tooltipTextColor, tooltipTextBackground, tooltipTextFontSize, tooltipMinWidth, tooltipMaxWidth, tooltipText.

Karta Clock

Zegar ma najwięcej opcji, bo ma dwa layouty, dwa warianty i osobną ikonę. Zobacz Widgets → Zegar dla wizualnej różnicy.

Najważniejsze pola:

Layout: default (stos) lub compact (obok siebie)
Compact text order: orderFirst lub dispatchFirst (tylko w compact)
Variant: default (kółka) lub boxes
Border width / radius: tylko w wariancie boxes
Date format: nadpisanie formatu daty per zegar
Snippety: clockOrderInTheNext, clockOrderInTheNextWithDays, clockForDispatch, clockForDispatchDate
Kolory: clockBackground, clockTextColor, clockIconColor, clockDigitsColor, clockCircleBackground, clockCircleHoursColor, clockCircleMinutesColor, clockCircleSecondsColor
Rozmiary: clockTextFontSize, clockDigitsFontSize, clockUnitsFontSize, clockIconSize

Karta Steps i Step 1 / Step 2 / Step 3

Karta Steps kontroluje ogólny wygląd osi czasu (wariant, typografia tytułów/dat, styl ikony). Każdy krok ma potem własną kartę z:

Active — tylko Step 1 i Step 2, Step 3 zawsze widoczny
Icon — wybierany z biblioteki ikon P2Lab
Title — pole snippetu
Date — pole snippetu

Zobacz Widgets → Kroki dla domyślnych wartości i placeholderów.

Live preview

Prawa kolumna zakładki Widget pokazuje działający podgląd aktualnej konfiguracji. Podgląd ciągnie przykładowe dane (dziś + kilka dni, przykładowy cut-off), więc widzisz jak layout reaguje na zmiany koloru, rozmiaru i kolejności.

Podgląd jest read-only — każda edycja idzie w formularzu po lewej. Użyj jako ostatecznej weryfikacji przed kliknięciem Zapisz.