> 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/inhalt/offcanvas-warenkorb-and-navigation.md).

# Offcanvas (Warenkorb & Navigation)

***

### Darstellungsart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Shopware-Standard\
• ThemeWare®

**Beispiel Wert**:\
`Shopware-Standard`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)"

**Technischer Name**:\
`twt-offcanvas-layout-type`

{% hint style="info" %}
Wähle, wie Offcanves-Elemente (z.B. Warenkorb oder Navigation) dargestellt werden.

In der Darstellungsart "Shopware" verhalten sich Offcanves-Elemente wie ausgeliefert.

In der Darstellungsart "ThemeWare®" bekommen die Elemente z.B. einen Abstand nach außen und abgerundete Ecken.
{% endhint %}

## Basiskonfiguration

***

### Außenabstand \[px]

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`10`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-offcanvas-margin`

{% hint style="info" %}
Wähle den Abstand um Offcanvas-Elemente.

**Hinweis**: Diese Einstellung wird nur angewendet, wenn die Darstellungsart "ThemeWare®" gesetzt ist.
{% endhint %}

***

### Abgerundete Ecken \[px]

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`3`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-offcanvas-border-radius`

{% hint style="info" %}
Wähle wie stark Ecken von Offcanvas-Elementen abgerundet werden.

**Hinweis**: Diese Einstellung wird nur angewendet, wenn die Darstellungsart "ThemeWare®" gesetzt ist.
{% endhint %}

## Farbkonfiguration

***

### Overlay-Farbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`rgba(0, 0, 0, 0.5)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-offcanvas-backdrop-color`

{% hint style="info" %}
Wähle die gewünschte Hintergrundfarbe vom Overlay (backdrop) aus.
{% endhint %}

***

### Glaseffekt \[px] (Overlay)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`0`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-offcanvas-backdrop-effect-blur`

{% hint style="info" %}
Gib die gewünschte Stärke für den Unschärfe-Effekt vom Overlay (backdrop) ein.
{% endhint %}