Widget

The Widget tab is the biggest one — it controls everything the customer sees: which widgets are active, their order, their colours and fonts, and what tooltip pops up next to the message.

The right-hand side of the page is a live preview that re-renders as you edit. Use it to iterate on styling without reloading the storefront.

Layout card

Controls the composition of the widget — which parts to render, in what order, and how to space them.

Field	Purpose
Message (messageActive)	Toggle the message line on/off
Message Position (messagePosition)	Where the message sits among the other widgets (smaller number = higher up)
Clock (clockActive)	Toggle the live countdown clock
Clock Position (clockPosition)	Same idea, for the clock
Steps (stepsActive)	Toggle the three-step timeline
Steps Position (stepsPosition)	Same idea, for the steps
Space between elements (layoutGap)	CSS unit — gap between the active parts
Padding (layoutPadding)	CSS shorthand — inner padding of the wrapper
Margin (layoutMargin)	CSS shorthand — outer margin of the wrapper
Skeleton loader (skeletonLoaderActive)	Master switch for the shimmer skeleton

Positions are plain integers — 0, 1, 2. Set any active component to a lower number to bring it to the top of the widget.

Message card

Standard look-and-feel for the message line plus the message text itself. See Widgets → Message for the placeholders available in the text snippet.

Fields: messageColor, messageBackground, messagePadding, messageBorderWidth, messageBorderColor, messageBorderRadius, messageBorderStyle, messageFontSize, messageText, plus three skeleton colours.

Tooltip card

The tooltip is the small icon (and the popover behind it) that the %tooltip% placeholder in the message text inserts.

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

Clock card

The clock has the most options because it has two layouts, two variants and a separate icon. See Widgets → Clock for the visual difference.

Key fields:

• Layout: default (stacked) or compact (side-by-side)
• Compact text order: orderFirst or dispatchFirst (only used in compact layout)
• Variant: default (circles) or boxes
• Border width / radius: only used in the boxes variant
• Date format: per-clock override of the global date format
• Snippets: clockOrderInTheNext, clockOrderInTheNextWithDays, clockForDispatch, clockForDispatchDate
• Colours: clockBackground, clockTextColor, clockIconColor, clockDigitsColor, clockCircleBackground, clockCircleHoursColor, clockCircleMinutesColor, clockCircleSecondsColor
• Sizes: clockTextFontSize, clockDigitsFontSize, clockUnitsFontSize, clockIconSize

Steps card and Step 1 / Step 2 / Step 3 cards

The Steps card controls the overall look of the timeline (variant, title/date typography, icon style). Each step then has its own card with:

• Active — Step 1 and Step 2 only, Step 3 is always shown
• Icon — picked from the P2Lab icon library
• Title — snippet field
• Date — snippet field

See Widgets → Steps for the default values and snippet placeholders.

Live preview

The right column of the Widget tab shows a working preview of the current configuration. The preview pulls sample data (today + a few days, a sample cutoff) so you can see how the layout reacts to your colour, size and order changes.

The preview is read-only — every edit happens in the form on the left. Use it as a final check before clicking Save.