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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.themeware.design/manual/extensions/checkout-steps/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.