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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themedocs.zenit.design/content/layout-typ.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.