> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/styling/elemente/modal.md).

# Modal

Mit diesen Einstellungen legst du die Breite der verschiedenen **Modal-Fenster** im Shop fest.

Ein Modal ist ein Dialogfenster, das sich über dem aktuellen Seiteninhalt öffnet und zusätzliche Informationen oder Funktionen anzeigt, ohne dass eine neue Seite geladen werden muss. Solche Fenster werden im Shop beispielsweise für zusätzliche Hinweise, Detailinformationen oder bestimmte Benutzeraktionen verwendet.

Ein Beispiel ist das Informationsfenster, das auf der Produktdetailseite über den Link bei den **Preis- und Mehrwertsteuerinformationen** geöffnet werden kann.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fw5QOM3uNE5y52Ia0phYt%2Fdocs-storefront-theme-components-modal.webp?alt=media&amp;token=6979b52d-2cea-4869-ac0c-e637038580d6" alt=""><figcaption><p>Modal mit Preis- und Mehrwertsteuerinformationen auf der Produktdetailseite.</p></figcaption></figure>

Das Theme unterscheidet – entsprechend den Bootstrap-Modalgrößen – zwischen vier Größen:

* **Small Modal**
* **Medium Modal**
* **Large Modal**
* **Extra Large Modal**

Für jede dieser Größen kannst du die maximale Breite individuell in **Pixeln (px)** festlegen. So kann beispielsweise ein Large Modal statt der standardmäßigen **800 px** auch mit einer Breite von **900 px** dargestellt werden.

#### Gut zu wissen

Die hier hinterlegten Werte definieren die Breite der jeweiligen Modal-Größen zentral für das Theme. Welche Modal-Größe verwendet wird, hängt vom jeweiligen Dialog beziehungsweise von der entsprechenden Funktion im Shop ab.

Eine Änderung der Einstellung wirkt sich daher auf **alle Modal-Fenster aus, die diese Größenklasse verwenden**.