Custom multi-step
Build a checkout with up to ten steps, each with an icon, a description and its own Continue label. Style the progress bar and the Back / Continue buttons to match your brand.
Multi-step basics (switching modes, the Steps panel, assigning elements to steps) are on Multi-step checkout. Pro adds the following.
Up to 10 steps
In the Steps panel, click Add step until you have the steps you need. Each step card gets extra fields:
Number, Person, Email, Address, Shipping, Payment, Lock, Shield, Cart, Gift, Review, Star or Check.
Shown under the step name by progress styles that support it, for example "Where it goes".
Overrides the page-wide Continue button text for this step. The placeholder shows the default, "Continue to" + the next step's name. Not shown on the last step.
Turn off for informational steps. Not shown on the last step.
Creates "… (copy)" with the same settings, right after the original ("Step duplicated."). Hidden once you have 10 steps.
- Page settings → Content: Layout mode with Multi-step selected
- The Steps list: a step card with its name, icon and short description
Step progress styles
Select the Steps Progress element and open its Style tab to choose a Progress style (default "Circles & line", the Free look). Pro adds 15 more:
| # | Style | # | Style |
|---|---|---|---|
| 1 | Circles & line (Free) | 9 | Chevron arrows |
| 2 | Inline stepper (number beside name) | 10 | Step cards |
| 3 | Timeline (line with dots) | 11 | Segmented bar |
| 4 | Text breadcrumb (Step 1 › Step 2) | 12 | Continuous track |
| 5 | Numbered text (1. Step 2. Step) | 13 | Big numbers (01 02 03) |
| 6 | Underlined tabs | 14 | Dots with current name |
| 7 | Pill tabs | 15 | Title with counter (2/4) |
| 8 | Chips with arrows | 16 | Minimal (Step 1 of 3) |
- Step cards, Pill tabs, Segmented bar and Minimal
Numbers (1, 2, 3) · Padded numbers (01, 02, 03) · Letters (A, B, C) · Roman numerals (I, II, III) · Icons only · Small dot · No marker (names only). Offered for Circles, Inline stepper, Numbered text, Underlined tabs, Pill tabs, Chips, Chevron arrows, Step cards and Big numbers. Step icons are set per step in the Steps panel.
Content tab. For Circles, Timeline, Step cards, Segmented bar, Continuous track and Big numbers.
Left, Center or Right. Compact styles move as a whole; full-width styles align the content inside each step. Not offered for Timeline and Title with counter.
Free's options, offered only for the styles that use them: the check mark for Circles, Inline stepper, Underlined tabs, Pill tabs, Chips, Chevron arrows and Step cards (not with Small dot or No marker); step names for every style except Dots, Title with counter and Minimal.
- Steps Progress selected on a multi-step Checkout
- Progress style, Step marker and Progress alignment
Back & Continue buttons
In Page settings (Checkout, Layout tab), right after "Show the Back button". The Back style, arrow and color options appear only while the Back button is shown.
| Setting | Options (default first) |
|---|---|
| Button layout | Back left, Continue right · Both on the right · Both on the left · Full-width Continue, Back below · Two equal buttons |
| Continue style | Same as page buttons · Filled · Outline · Soft tint · Dark |
| Continue color · Continue text color · Continue hover color | Empty = the page button color, white text (the button color for Outline and Soft tint), slightly darker on hover. Continue color isn't offered for Dark. |
| Button shape | Same as page buttons · Square · Rounded · Pill |
| Button size | Medium · Small · Large |
| Continue arrow | Arrow → · Chevron › · Double chevron » · None |
| Back style | Text link · Outline button · Soft gray button · Underlined text |
| Back arrow | Arrow ← · Chevron ‹ · None |
| Back text color · Back button color | Empty = gray. The button color (border or fill) is offered for Outline button and Soft gray button. |
| Stick to the bottom on phones | Off by default. Keeps Back / Continue in reach while the shopper scrolls a long step (screens up to 767 px). |
- A long checkout step on a phone
- The sticky button bar at the bottom