# Layout

### Übersicht

In diesem Abschnitt kannst du grundlegende Layout Einstellungen vornehmen, die sich auf die komplette [Produkt Detailseite](https://docs.atloss.de/en/academy/technical-terms/product-detail-page) auswirken.

### Konfiguration

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/9rBmL8uzvcMPHQdtBmZK/produkt-detailseite-layout.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Maximale Containerbreite (in px)</summary>

Definiere die maximale Containerbreite für den Inhalt deiner Produkt Detailseite. [Header](https://docs.atloss.de/en/academy/technical-terms/header) und [Footer](https://docs.atloss.de/en/academy/technical-terms/footer) sind dabei nicht betroffen. Hier kannst du eine abweichende Einstellung von der [globalen Containerbreite](https://docs.atloss.de/en/general/layout#maximale-containerbreite-in-px) vornehmen.

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/YeKNM8tlk4d1AeoGnigP/produkt-detailseite-maximale-containerbreite.webp" alt="" data-size="original">

In der Regel macht es Sinn den Inhalt der Produkt Detailseite etwas schmaler zu gestalten. Andernfalls kann es vorkommen, dass Produktbilder in der [Galerie](https://docs.atloss.de/en/theme-configuration/product-detail-page/galery) unverhältnismäßig groß skaliert werden können.

</details>

<details>

<summary>Layout</summary>

**8:4 (Größere Galerie)**\
Mit dem Verhältnis 8:4 wird die [Galerie](https://docs.atloss.de/en/theme-configuration/product-detail-page/galery) deutlich größer und die [Buy Box](https://docs.atloss.de/en/theme-configuration/product-detail-page/buy-box) kleiner dargestellt.

**7:5 (Größere Galerie)**\
Mit dem Verhältnis 7:5 wird die [Galerie](https://docs.atloss.de/en/theme-configuration/product-detail-page/galery) größer und die [Buy Box](https://docs.atloss.de/en/theme-configuration/product-detail-page/buy-box) kleiner dargestellt.

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/edmm0RP35RFFTN0ik9uV/produkt-detailseite-layout-7-6.webp" alt="" data-size="original">

**6:6 (Gleiche Größe)**\
Mit dem Verhältnis 6:6 wird die [Galerie](https://docs.atloss.de/en/theme-configuration/product-detail-page/galery) und die [Buy Box](https://docs.atloss.de/en/theme-configuration/product-detail-page/buy-box) gleich groß dargestellt.

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/MCiYznvPjcMoDrzuvDzH/produkt-detailseite-layout-6-6.webp" alt="" data-size="original">

</details>