Steps

The Steps widget renders the lifecycle of an order as a three-step visual timeline. It’s the fullest of the three widgets — best on product detail and checkout pages, where customers want to confirm the full journey before clicking “Buy”.

The three steps

Step	Title (default)	Date (default)
1	Order	%todayDate%
2	Shipping	%shippingMinDate%
3	Estimated Delivery	%deliveryMinDate% - %deliveryMaxDate%

Each step has its own icon (icon picker), title (snippet) and date (snippet) — all editable on the Widget → Step 1 / Step 2 / Step 3 cards.

Steps 1 and 2 have an Active toggle so you can hide them if you only want to highlight the delivery date. Step 3 (the delivery step) is always shown.

Variants

The stepsVariant field offers two visual styles:

• default — connected nodes with horizontal connecting lines
• arrows — chevron-shaped step segments, each pointing to the next

Configurable colours and sizes

The Widget → Steps card exposes:

• stepsVariant — default or arrows
• stepsTitleColor / stepsTitleFontSize
• stepsDateColor / stepsDateFontSize
• stepsBackground / stepsBorderColor
• stepsWithIcons — toggle the icon column on/off
• stepsIconColor / stepsIconBackground
• Skeleton: stepsSkeletonBackground / stepsSkeletonShimmerDarkColor / stepsSkeletonShimmerLightColor

Then each step card (Step 1 / Step 2 / Step 3) adds:

• stepXIcon — icon picker for the step (defaults to regular-shopping-basket on Step 1)
• stepXTitle — snippet field (P2LabEstimatedDelivery.widget.steps.stepX.title)
• stepXDate — snippet field (P2LabEstimatedDelivery.widget.steps.stepX.date)

Date snippets

The step date field is a snippet too, so you can mix and match placeholders. For example, change step 3’s date from:

%deliveryMinDate% - %deliveryMaxDate%

to a single estimate:

~%deliveryMaxDate%

or to a relative label:

in %deliveryMaxDays% %transDays%

For the full placeholder list see Reference → Snippet variables.

Combining Steps with the other widgets

A common product-page setup:

1. Steps at the top (stepsPosition: 0) — visual confirmation of the journey
2. Clock in the middle (clockPosition: 1) — urgency
3. Message at the bottom (messagePosition: 2) — tooltip with disclaimers

In the cart, just the Steps widget is often enough.