> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/manual/extensions/checkout-steps/configuration.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.