> 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/content/layout-typ.md).

# Layout-Typ

## Listing

Grundlegend kannst Du für die Darstellung Deiner Produkte in der Storefront aus drei Layout-Typen wählen. Dabei stehen Dir die Layouts `Standard`, `Großes Bild` und `Minimaler Inhalt` zur verfügung.

Grundsätzlich verwendet Shopware zunächst den Layout-Typ `Standard`. Dieser Layout-Typ stellt eine **Produktbeschreibung (1)** im Produkt-Layout dar. Die Layout-Typen `Großes Bild` und `Minimaler Inhalt` stellen keine Beschreibung im Listing dar und sind etwas kompakter.

<figure><img src="/files/G0d6tpoQ1blyZ3D8cUee" alt=""><figcaption><p>Layout-Type Standard</p></figcaption></figure>

### Produkt Layout-Typ global einstellen

In der Erlebniswelt Kategorie-Layout unter Erlebniswelten > Kategorieseiten kannst Du im Kategorie-Listing Element das Layout Deiner Produkte global einstellen.

![Auswahl des Layout-Typ](/files/r9IpUaNyKOWV7Em3JrKk)

{% hint style="info" %}
Du wirst möglicherweise eine Kopie des Standard Kategorie-Layouts erstellen müssen, da sich diese nicht bearbeiten lassen.
{% endhint %}

<table><thead><tr><th width="194">Layout-Typ</th><th width="213">Anzeigemodus¹</th><th>Seitenverhältnis</th></tr></thead><tbody><tr><td>Standard</td><td>Standard (default)</td><td>einstellbares² Seitenverhältnis</td></tr><tr><td>Großes Bild</td><td>Füllen (cover³)</td><td>einstellbare² Höhe</td></tr><tr><td>Minimaler Inhalt</td><td>Standard (default)</td><td>einstellbares² Seitenverhältnis</td></tr></tbody></table>

{% hint style="info" %}
¹ Der **Anzeigemodus** ist im Listing-Element nicht einstellbar - im Produkt-Slider hingegen schon.

² Du kannst das Seitenverhältnis und die Höhe in der Themen-Konfiguration einstellen.

³ Der Layout-Typ **`Großes Bild`** verwendet die Darstellung von eingepassten Artikelbildern mit einer fixen Höhe. Dabei wird die Box mit dem Bild komplett gefüllt. Es kann dabei je nach Bild-Format oben, unten, links oder rechts angeschnitten werden.
{% endhint %}

#### Anzeigemodus

* Bei **Standard/Original (default)** passt sich das Bild **bis zu seiner nativen Größe** an die das Bild einfassende Box an. Es wird hierbei nicht angeschnitten.
* Bei **Füllen/Zugeschnitten (cover)** wird die Box mit dem Bild komplett gefüllt. Es kann dabei je nach Format oben, unten, links oder rechts angeschnitten werden.

![Standard, Füllen, Beinhalten](/files/PaZghnJww8fYzjtpx9TC)

### Produkt Layout-Typ in der Kategorie einstellen

Abweichend von der globalen Einstellung, kannst Du auch in jeder Kategorie das global eingestellte Layout überschreiben.

<figure><img src="/files/OW7L0iw29YlhuWmT71sw" alt=""><figcaption></figcaption></figure>

{% embed url="<https://youtu.be/60rg5naRKqI?t=695>" %}
ab Minute 11:35
{% endembed %}

## Produkt-Slider & Produkt-Boxen

Erlebniswelten Produkt-Slider und Produkt-Boxen haben neben dem **Layout-Typ (2)** auch die Wahl eines **Anzeigemodus (1)**.

![](/files/ZvDAvzJrE8zOoIG7X1f0)

#### Anzeigemodus

![Anzeigemodus](/files/mzoSenqVLDZUVvdYgA2P)

An vielen Stellen in Shopware 6 kann der **Anzeigemodus** der Artikelbilder gewählt werden. Dabei stehen die Werte **Standard**, **Füllen** und **Beinhalten** zur Auswahl. Bei **Anzeigemodus** entscheidest Du, wie sich das Bild im Bildbereich der Produkt-Kachel verhält.

* Bei **Standard/Original (default)** passt sich das Bild **bis zu seiner nativen Größe** an die das Bild einfassende Box an. Es wird hierbei nicht angeschnitten.
* Bei **Füllen/Zugeschnitten (cover)** wird die Box mit dem Bild komplett gefüllt. Es kann dabei je nach Format oben, unten, links oder rechts angeschnitten werden.
* Bei **Beinhalten/Feste Höhe (contain)** wird das Bild auf die Größe der Box **gestreckt und eingepasst**. Es wird hierbei nicht angeschnitten.

{% hint style="info" %}
Ist die Auflösung der Produktbilder zu klein für die Anzeigefläche, sodass diese nicht füllend dargestellt werden, kannst Du den Modus **Beinhalten/Feste Höhe (contain)** wählen. Die Bilder werden so über ihre eigentliche Größe hinaus gestreckt und füllend angezeigt.

Mehr Informationen zur Bildauflösung findest Du hier: [Bildgrößen](/content/produktbilder/bildgroessen.md)
{% endhint %}

![Standard, Füllen, Beinhalten](/files/PaZghnJww8fYzjtpx9TC)

#### Layout-Typ

![Layout-Typ](/files/CVXBpiQdmSXYQ6joRWZW)

> ab Theme-Version 3.0.0

<table><thead><tr><th width="242">Anzeigemodus</th><th width="176">Layout-Typ</th><th>Seitenverhältnis</th></tr></thead><tbody><tr><td>Standard/Original <code>(default)</code></td><td>Standard</td><td>einstellbares² Seitenverhältnis</td></tr><tr><td>Standard/Original <code>(</code><strong><code>cover¹</code></strong><code>)</code></td><td>Großes Bild</td><td><strong>einstellbare</strong>² <strong>feste Höhe</strong></td></tr><tr><td>Standard/Original <code>(default)</code></td><td>Minimaler Inhalt</td><td>einstellbares² Seitenverhältnis</td></tr><tr><td>Füllen/Zugeschnitten <code>(cover)</code></td><td>Standard</td><td>einstellbares² Seitenverhältnis</td></tr><tr><td>Füllen/Zugeschnitten <code>(cover)</code></td><td>Großes Bild</td><td><strong>einstellbare</strong>² <strong>feste Höhe</strong></td></tr><tr><td>Füllen/Zugeschnitten <code>(cover)</code></td><td>Minimaler Inhalt</td><td>einstellbares² Seitenverhältnis</td></tr><tr><td>Beinhalten/Feste Höhe <code>(contain)</code></td><td>Standard</td><td>einstellbares² Seitenverhältnis</td></tr><tr><td>Beinhalten/Feste Höhe <code>(contain)</code></td><td>Großes Bild</td><td><strong>einstellbare</strong>² <strong>feste Höhe</strong></td></tr><tr><td>Beinhalten/Feste Höhe <code>(contain)</code></td><td>Minimaler Inhalt</td><td>einstellbares² Seitenverhältnis</td></tr></tbody></table>

{% hint style="info" %}
¹ Der Layout-Typ **`Großes Bild`** verwendet im **Standard** die Darstellung von eingepassten Artikelbildern mit einer fixen Höhe im Modus **`Füllen/Zugeschnitten`**.

² Du kannst das Seitenverhältnis und die Höhe in der Themen-Konfiguration einstellen
{% endhint %}