CartCubes logoCartCubes
Contact us

CartCubes Multi-step Checkout for FluentCart

Progress and Design

Five progress styles, one or two columns, summary placement, and color, radius and type controls with a live preview.

Design has Progress, Layout and Style. Defaults match a numbered stepper on a two-column checkout with the order summary on the right.

  • Five progress styles: Numbered (default), Progress Bar, Tabs, Text Style or None. Horizontal or vertical. Numbers or icons.
  • Mobile progress: Same as Desktop (default), compact Progress Bar, or Hidden, below 760px.
  • One or two columns: Two Column is the default. One Column stacks the form. Order Summary Position: Right Sidebar or Inside Current Step.
  • Modern UI: On by default: card sections, selectable payment cards, mobile sticky Pay Now.
  • Style tokens: Active, completed and upcoming step colors, button colors, card radius, body and muted text, error and success colors.

Progress styles

Progress Style defaults to Numbered. Progress Bar Color is #253241 when Progress Bar is selected. Progress Orientation defaults to Horizontal. Step Indicator defaults to Numbers. Step Divider Text (Text Style only) defaults to an arrow, max 8 characters. Timeline Max Width 0 means full width. Progress Bar Inner Animation and Enable Step Animations are on. Step Transition Speed defaults to Normal.

Progress tab: Progress Style (Numbered selected, plus Progress Bar, Tabs, Text Style, None), Progress Orientation, Step Indicator, Mobile Progress Style, Progress Bar Inner Animation, Enable Step Animations and Step Transition Speed.
Progress tab: Progress Style (Numbered selected, plus Progress Bar, Tabs, Text Style, None), Progress Orientation, Step Indicator, Mobile Progress Style, Progress Bar Inner Animation, Enable Step Animations and Step Transition Speed.
Progress Style set to Progress Bar, with Progress Bar Color set to #253241.
Progress Style set to Progress Bar, with Progress Bar Color set to #253241.
Checkout with a filled progress bar and Step X of Y above the current step.
Checkout with a filled progress bar and Step X of Y above the current step.
Progress Style set to Tabs.
Progress Style set to Tabs.
Checkout with horizontal tab-style labels for Information, Shipping and Payment.
Checkout with horizontal tab-style labels for Information, Shipping and Payment.
Progress Style set to Text Style, with Step Divider Text between the labels.
Progress Style set to Text Style, with Step Divider Text between the labels.
Checkout with plain step labels and the divider between them, no circles or bar.
Checkout with plain step labels and the divider between them, no circles or bar.

Orientation and indicators

Progress Orientation Vertical stacks the steps beside the form, sticky on desktop from 781px. Step Indicator Icons marks completed steps with an icon instead of a number. Mobile Progress Style can stay the same as desktop, switch to a compact Progress Bar, or hide.

Progress Orientation set to Vertical.
Progress Orientation set to Vertical.
Checkout with the step list stacked to the side of the form. The current step is highlighted.
Checkout with the step list stacked to the side of the form. The current step is highlighted.
Step Indicator set to Icons instead of Numbers.
Step Indicator set to Icons instead of Numbers.
Checkout progress using icons on completed steps rather than step numbers.
Checkout progress using icons on completed steps rather than step numbers.

Layout

Enable Modern UI is on. Layout defaults to Two Column. Checkout Max Width 480px, Container Width 1100px, Summary Column Width 380px. Order Summary Position defaults to Right Sidebar (or Inside Current Step). Collapse Summary on Mobile and Mobile Sticky Pay Now are on. Payment Method Style defaults to Selectable Cards (Classic keeps FluentCart's default payment list).

Layout tab: Enable Modern UI, Layout (One Column / Two Column), Checkout Max Width, Container Width, Summary Column Width, Order Summary Position, Collapse Summary on Mobile, Mobile Sticky Pay Now and Payment Method Style.
Layout tab: Enable Modern UI, Layout (One Column / Two Column), Checkout Max Width, Container Width, Summary Column Width, Order Summary Position, Collapse Summary on Mobile, Mobile Sticky Pay Now and Payment Method Style.
Layout set to One Column, with Checkout Max Width at 480px.
Layout set to One Column, with Checkout Max Width at 480px.
Checkout stacked in a single column: progress, form fields, then the order summary in the same flow.
Checkout stacked in a single column: progress, form fields, then the order summary in the same flow.

Style

Stepper Colors: Active and Completed #253241, Upcoming #8D9095, Step Circle Radius 999px. Navigation Buttons: Continue Background #253241, Continue Text #ffffff, Continue Hover #1b2430, Button Radius 6px. Cards: background #ffffff, border #D6DAE1, radius 8px, Card Shadow None. Body text #2F3448, muted #565865, error #B42318, success #15803d. Base Font Size 14px, Section Spacing 16px. Selected Payment Border #253241. The same screen includes a live preview.

Style tab: Stepper Colors, Navigation Buttons, and Cards and Typography, with color pickers, radius fields, Card Shadow (None, Soft, Medium) and a live preview of the stepper and buttons.
Style tab: Stepper Colors, Navigation Buttons, and Cards and Typography, with color pickers, radius fields, Card Shadow (None, Soft, Medium) and a live preview of the stepper and buttons.
See pricing
Back to overview