# 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="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-c33f2341e0c98fc7d677d0100a3cd35bf1d5755a%2Fdocs-de-storefront-product-layoute-default.png?alt=media" 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](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-a8af61dd8b2229519203d9136375996043c02c29%2Flisting-layout-typ.jpg?alt=media)

{% 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](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-1eb3bf40dfaa80c3a9a8dd37f9df0adf14e29094%2Fdefault-cover-contain.png?alt=media)

### 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="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-ce3bf306958c7546af46d04263dd2553fc869b10%2Fdocs-de-cataloque-category-listing-product-layout.png?alt=media" 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)**.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-a06cacd78311287c99272caadde1acb7ff144b33%2Fslider%20\(1\).jpg?alt=media)

#### Anzeigemodus

![Anzeigemodus](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-05083a7da5d86f2092b2ab179d53c260ed9e831a%2Fslider-anzeigemodus%20\(1\).jpg?alt=media)

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: [bildgroessen](https://themedocs.zenit.design/content/produktbilder/bildgroessen "mention")
{% endhint %}

![Standard, Füllen, Beinhalten](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-1eb3bf40dfaa80c3a9a8dd37f9df0adf14e29094%2Fdefault-cover-contain.png?alt=media)

#### Layout-Typ

![Layout-Typ](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-23fd6533f636f0141622601479817143c2dbbc95%2Fslider-layout-typ.jpg?alt=media)

> 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 %}