Show checkout steps
Field type:
Select
Available values:
• no
• yes
Example value:no
Path to the configuration:
Tab "Extensions" => Block "Checkout steps"
Technical name:twt-checkout-steps-show
Shows the "Checkout steps" from ThemeWare® in the checkout.
Show checkout steps in shopping cart
Field type:
Select
Available values:
• no
• yes
Example value:no
Path to the configuration:
Tab "Extensions" => Block "Checkout steps"
Technical name:twt-checkout-steps-cart-show
Shows the "Checkout steps" from ThemeWare® in shopping cart.
Basic configuration
Layout type
Field type:
Select
Available values:
• Continuous lines
• Lines between steps
• Continuous bars between steps
• Bars between steps
Example value:Continuous lines
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:twt-checkout-steps-style
Icon style (Steps)
Field type:
Select
Available values:
• Steps with numbers
• Steps with icons
• Small steps
Example value:Steps with numbers
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:twt-checkout-steps-icon-style
Select the icon style of the steps.
Show text from...
Field type:
Select
Available values:
• don't show
• Phone (portrait) (<576px)
• Phone (landscape) (≥576px)
• Tablet (portrait) (≥768px)
• Tablet (landscape) (≥992px)
• Desktop (≥1200px)
• Container-Max-Width (Full-width-boxed)
Example value:Tablet (portrait) (≥768px)
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:twt-checkout-steps-item-text-show
Select from which breakpoint the text should be displayed below the steps.
Drop shadow (Steps)
Field type:
Select
Available values:
• no shadow
• Small shadow (Bootstrap)
• Regular shadow (Bootstrap)
• Larger shadow (Bootstrap)
Example value:no shadow
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:twt-checkout-steps-item-box-shadow-type
Select one (or none) drop shadow effect for the steps.
Corner type (Steps)
Field type:
Select
Available values:
• not rounded
• rounded corners
• round corners
• individual radius
Example value:round corners
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:twt-checkout-steps-item-corner-type
Select the corner type of the steps. rounded corners
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")
round corners
Uses a predefined radius for round corners.
Border radius (individual radius)
Field type:
Number field
Example value:10
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration"
Technical name:twt-checkout-steps-item-border-radius
Note: This configuration relates to the corner type "individual radius".
Colour configuration
Text colour
Field type:
Color picker
Example value:#000000
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-color
Text colour @active
Field type:
Color picker
Example value:#000000
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-color-active
Text colour @completed
Field type:
Color picker
Example value:#000000
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-color-completed
Icon colour
Field type:
Color picker
Example value:#dddddd
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-icon-color
Icon colour @active
Field type:
Color picker
Example value:#000000
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-icon-color-active
Icon colour @completed
Field type:
Color picker
Example value:$sw-color-success
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-icon-color-completed
Border colour
Field type:
Color picker
Example value:#dddddd
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-border-color
Border colour @active
Field type:
Color picker
Example value:#000000
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-border-color-active
Border colour @completed
Field type:
Color picker
Example value:$sw-color-success
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-border-color-completed
Background colour
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-background-color
Background colour @active
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-background-color-active
Background colour @completed
Field type:
Color picker
Example value:#ffffff
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-background-color-completed
Seperator color
Field type:
Color picker
Example value:#dddddd
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-seperator-color
Seperator color @active
Field type:
Color picker
Example value:#000000
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-seperator-color-active
Note: Not every layout type uses the "Seperator color @active". Some layout types just use the "Seperator color" and "Seperator color @completed".
Seperator color @completed
Field type:
Color picker
Example value:$sw-color-success
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Colour configuration"
Technical name:twt-checkout-steps-item-seperator-color-completed
Typography
Font size
Field type:
Number field
Example value:14
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Typography"
Technical name:twt-checkout-steps-item-font-size
Text formatting
Field type:
Select
Available values:
• none
• uppercase
• lowercase
• capitalize
Example value:none
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Typography"
Technical name:twt-checkout-steps-item-text-transform
Font weight
Field type:
Select
Available values:
• light
• normal
• bold
Example value:normal
Path to the configuration:
Tab "Extensions" => Block "Checkout steps" => Section "Typography"
Technical name:twt-checkout-steps-item-font-weight