All pages
Powered by GitBook
1 of 1

Loading...

Configuration


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

Shows the "Checkout steps" from ThemeWare® in shopping cart.

Basic configuration

Layout type

Icon style (Steps)

Select the icon style of the steps.

Show text from...

Select from which breakpoint the text should be displayed below the steps.

Drop shadow (Steps)

Select one (or none) drop shadow effect for the steps.

Corner type (Steps)

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)

Note: This configuration relates to the corner type "individual radius".

Colour configuration

Text colour

Text colour @active

Text colour @completed

Icon colour

Icon colour @active

Icon colour @completed

Border colour

Border colour @active

Border colour @completed

Background colour

Background colour @active

Background colour @completed

Seperator color

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

Typography

Font size

Text formatting

Font weight