# 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`

{% hint style="info" %}
Shows the "Checkout steps" from ThemeWare® in the checkout.
{% endhint %}

***

### 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`

{% hint style="info" %}
Shows the "Checkout steps" from ThemeWare® in shopping cart.
{% endhint %}

## 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`

{% hint style="info" %}
Select the icon style of the steps.
{% endhint %}

***

### 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`

{% hint style="info" %}
Select from which breakpoint the text should be displayed below the steps.
{% endhint %}

***

### 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`

{% hint style="info" %}
Select one (or none) drop shadow effect for the steps.
{% endhint %}

***

### 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`

{% hint style="info" %}
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.
{% endhint %}

***

### 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`

{% hint style="info" %}
**Note**: This configuration relates to the corner type "individual radius".
{% endhint %}

## 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`

{% hint style="info" %}
**Note**: Not every layout type uses the "Seperator color @active". Some layout types just use the "Seperator color" and "Seperator color @completed".
{% endhint %}

***

### 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`