Wizard and stepper
Guided flows on the phone: a compact step line at the top, one card at a time, and a full-width action bar at the bottom.
Wizard on the phone
A compact step line under the bar, one card per combo, and a full-width action bar the thumb can reach.
Options & prices
.wz-ci.wz-mc.wz-mbar.p-bar--control-h-m-lgCompact step indicator
Replaces the stepper on the phone: step count, the step name, segments, and what comes next.
First step
Pick a product
Step with an error
Options & prices: 2 prices to fix
Last step
Review & save
Step kinds, as the full list shows them
.wz-ci.wz-meter.wz-steps.soloSection progress
The Global Store editor on the phone. The rail folds into one line at the top; open it to jump to any section.
5 of 8 sections donePhotos need 2 more slots. Publish opens when all are done.
8 of 8 sections doneReady to publish v5
Rail item states
details.wz-mrail.wz-rail.wz-ri.wz-meterFull-width action bar
Save state on its own line, then Back and one wide primary button. Save draft moves up into the top bar.
Primary action states
.wz-mbar.wz-mbtns.wz-save--control-h-m-lgStep validation
The same three signals as desktop: the summary with links, the marked fields, and the indicator turning red.
Options & prices: 2 prices to fix
Enter a price, like 360.00.
Use a plain amount, like 499.00.
.wz-errs.field.err.help.err.wz-ci.is-errorReview before publish
What changes for brands comes first, then each section with Edit. Publish is the only primary action.
Review & publish
What changes for brands
- Trousers only: recommended £350.00
£360.00 - Add a waistcoat offered as a combo
- Back and Ghost photos added
.wz-box.wz-rs.wz-rr.wz-mbarMoving between steps
Try it. The new step fades in and settles 8px from the side you are heading to. Reduced motion makes it instant.
Pick a product
.wz-stage.wz-pane--motion-sheet-in--toast-shift