Wizard and stepper
Guided flows for the jobs that used to be walls of boxes: the Global Store editor and Create Product. You always see where you are, what is wrong, and the one thing to do next.
Stepper, step rail, step header, sticky action bar with save state, validation, review and the step transition.
Guided editor
The Global Store editor as one guided flow: the rail shows progress, each section closes to a one-line summary, one primary action moves you on.
Navy birdseye two-piece suit
Available v4Changes not available to brands yetCloth
HS 81045 Crystal Springs, Holland & Sherry · 2 sibling clothsSpecs
Super 110s wool, 270 g/m², birdseye weave, all taken from the clothProduct
Navy birdseye two-piece suit · navy-birdseye-two-pieceSEO
Meta title 52/60 · description 148/160Price & combos
3 of 4 combos pricedBrands can sell this suit in these combos. The Laravel price comes from the factory price list; set a recommended price only where brands should see something different.
Photos
7 of 9 slots · Back and Ghost are emptyDesign
2 pieces · 14 picks · 5 customisableReview & publish
Opens when every section is done.wz-ed.wz-rail.wz-sec.wz-bar.switch.sidebar--motion-sheet-inStepper
Create Product runs in three steps. Finished steps stay clickable; steps ahead are locked until the one before is valid.
In progress
Step with an error, next step locked
Last step
Step kinds
Interaction states (a finished step)
.wz-steps.wz-step.wz-mark.wz-linearia-current=step--accent--primary--destructiveStep rail and section progress
For long editors. Every section is reachable; the rail says what is done, what is wrong and what is still locked.
Rail item states
.wz-rail.wz-ri.wz-meteraria-current=step--accentStep header
Where you are, what this step is for, and what comes next. The primary button in the action bar repeats the next step.
Step 1 of 3
Pick a product
Pick the Global Store product to sell. You set its options and prices next.
Step 2 of 3
Options & prices
Choose the combos RJ Clothing sells and set a price for each way of buying.
Section 5 of 8
Price & combos
Check the Laravel price for each combo and add a recommended price where brands need one.
.wz-head.wz-k.wz-t.wz-next.wz-meter--text-pageSticky action bar
Pinned to the bottom of the step. Save state on the left; on the right one primary action, with Back and the quieter actions before it.
Primary action states
.wz-bar.wz-save.btn-primary.btn-secondary.btn-tertiaryposition:sticky--warning--successStep validation
Next checks the step. Errors are listed at the top with links to each field, marked on the field, and the step turns red in the stepper.
Step 2 of 3
Options & prices
Choose the combos RJ Clothing sells and set a price for each way of buying.
| Sold as | Visit us to be measured | Add your measurements |
|---|---|---|
As designedAlways on | £ | £ |
Jacket onlySuggested from HQ | £ | £ |
Trousers onlySuggested from HQ | £ Enter a price, like 360.00. | £ Enter each price as a plain amount above zero, like 499.00. |
Add a waistcoatSwitched off | Not sold | Not sold |
.wz-errs.wz-pt.field.err.help.err.wz-step.is-errorrole=alert--destructiveReview before publish
The last step reads back every section with an Edit link, says what changes for brands, and holds the only publish button.
Section 8 of 8
Review & publish
Check what brands will get. Publishing makes v5 available to every brand that offers this suit.
What changes for brands
- Trousers only: recommended £350.00
£360.00 - Add a waistcoat offered as a combo
- Back and Ghost photos added
Ready to publish
- Anchor cloth in stock
- Every spec has a value
- Recommended price in GBP
- All 9 photo slots with approved alt text
- Design picked
Brands that get an update notice
RJ Clothing and RJ MTM offer this suit. They see v4 to v5 and choose when to take it.
.wz-rv.wz-rr.wz-box.wz-chg.wz-chk.chip.available.chip.draftMoving between steps
Try it. Next shows a short busy label while it checks, then the new step fades in and settles 8px from the side you are heading to; Back reverses it. Reduced motion makes it instant.
| Sold as | Visit us to be measured | Add your measurements |
|---|---|---|
| As designed | £ | £ |
| Jacket only | £ | £ |
.wz-stage.wz-pane@keyframes wz-fwd--motion-sheet-in--toast-shift.wz-pk[aria-pressed]