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

# Konfiguration

***

### Checkout-Steps anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nein\
• ja

**Beispiel Wert**:\
`nein`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps"

**Technischer Name**:\
`twt-checkout-steps-show`

{% hint style="info" %}
Zeigt die "Checkout-Steps" von ThemeWare® im Checkout an.
{% endhint %}

***

### Checkout-Steps im Warenkorb anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nein\
• ja

**Beispiel Wert**:\
`nein`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps"

**Technischer Name**:\
`twt-checkout-steps-cart-show`

{% hint style="info" %}
Zeigt die "Checkout-Steps" von ThemeWare® im Warenkorb an.
{% endhint %}

## Basiskonfiguration

***

### Darstellungsart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Durchgängige Linien\
• Linien zwischen den Steps\
• Durchgängige Balken zwischen den Steps\
• Balken zwischen den Steps

**Beispiel Wert**:\
`Durchgängige Linien`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-checkout-steps-style`

***

### Icon-Stil (Steps)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Steps mit Zahlen\
• Steps mit Icons\
• Kleine Steps

**Beispiel Wert**:\
`Steps mit Zahlen`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-checkout-steps-icon-style`

{% hint style="info" %}
Wähle den Icon-Stil der Steps.
{% endhint %}

***

### Text anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-Max-Width (Full-width-boxed)

**Beispiel Wert**:\
`Tablet (Hochformat) (≥768px)`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-text-show`

{% hint style="info" %}
Wähle ab welchem Breakpoint der Text unter den Steps angezeigt werden soll.
{% endhint %}

***

### Schlagschatten (Steps)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• kein Schatten\
• Kleiner Schatten (Bootstrap)\
• Normaler Schatten (Bootstrap)\
• Größerer Schatten (Bootstrap)

**Beispiel Wert**:\
`kein Schatten`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-box-shadow-type`

{% hint style="info" %}
Wähle einen (oder keinen) Schlagschatten-Effekt für die Steps.
{% endhint %}

***

### Ecken (Steps)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht abgerundet\
• abgerundete Ecken\
• runde Ecken\
• individuelle Rundung

**Beispiel Wert**:\
`runde Ecken`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-corner-type`

{% hint style="info" %}
Wähle den Eckentyp der Steps. **abgerundete Ecken**\
Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

**runde Ecken**\
Verwendet einen vordefinierten Radius für runde Ecken.
{% endhint %}

***

### Abgerundete Ecken (individuelle Rundung)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`10`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-border-radius`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf Ecken-Konfiguration "individuelle Rundung".
{% endhint %}

## Farbkonfiguration

***

### Textfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#000000`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-color`

***

### Textfarbe @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#000000`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-color-active`

***

### Textfarbe @completed

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#000000`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-color-completed`

***

### Iconfabe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#dddddd`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-icon-color`

***

### Iconfabe @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#000000`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-icon-color-active`

***

### Iconfabe @completed

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-success`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-icon-color-completed`

***

### Rahmenfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#dddddd`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-border-color`

***

### Rahmenfarbe @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#000000`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-border-color-active`

***

### Rahmenfarbe @completed

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-success`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-border-color-completed`

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-background-color`

***

### Hintergrundfarbe @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-background-color-active`

***

### Hintergrundfarbe @completed

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-background-color-completed`

***

### Seperator-Farbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#dddddd`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-seperator-color`

***

### Seperator-Farbe @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#000000`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-seperator-color-active`

{% hint style="info" %}
**Hinweis**: Nicht jede Darstellungsart nutz die "Seperator-Farbe @active". Einige Darstellungsarten nutzen lediglich die "Seperator-Farbe" und "Seperator-Farbe @completed".
{% endhint %}

***

### Seperator-Farbe @completed

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-success`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-checkout-steps-item-seperator-color-completed`

## Typografie

***

### Schriftgröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`14`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-checkout-steps-item-font-size`

***

### Textformatierung

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• keine\
• Großschreibung\
• Kleinschreibung\
• Wortanfang in Großbuchstaben

**Beispiel Wert**:\
`keine`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-checkout-steps-item-text-transform`

***

### Strichstärke

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• light\
• normal\
• bold

**Beispiel Wert**:\
`normal`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Checkout-Steps" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-checkout-steps-item-font-weight`