# Layout type

## Listing

You can choose from three layout types for the presentation of your products in the storefront. The layouts `Standard`, `Big image` and `Minimal content` are available.

Basically, Shopware initially uses the Standard layout type. This layout type represents a **product description (1)** in the product layout. The layout types `Big image` and `Minimal content` do not represent a description in the listing and are a bit more compact.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FURzMrMtr24Z4BogKkKp8%2Fdocs-de-storefront-product-layoute-default.png?alt=media&#x26;token=29e6089f-4498-4ba3-9d62-f4bf4790a332" alt=""><figcaption><p>Layout-Type Standard</p></figcaption></figure>

### Set product layout type globally

In the listing page layouts of the shopping experiences you can globally set the layout of your products in the category listing element.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2F7XSlpZNp6jQLd6Ty8pwE%2Fdocs-en-content-layout-type-cms-listing-layout-type.png?alt=media&#x26;token=995998e1-ece6-4b9c-a74b-9a2ebabd4ef2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You may need to make a copy of the default category layouts as these are not editable.
{% endhint %}

With the settings of **Layout types** you influence the display of the product boxes in listings in Shopware.

<table><thead><tr><th width="194">Layout type</th><th width="242.33333333333331">Display mode¹</th><th>Aspect ratio</th></tr></thead><tbody><tr><td>Standard</td><td>Standard (default)</td><td>adjustable² aspect ratio</td></tr><tr><td>Big image</td><td>Cover³</td><td>adjustable² height</td></tr><tr><td>Minimal content</td><td>Standard (default)</td><td>adjustable² aspect ratio</td></tr></tbody></table>

{% hint style="info" %}
¹ The **Display mode** is not adjustable in the listing element - but in the product slider elements it is.

² You can configure the aspect ratio and height in the theme configuration.\
³ The layout type **Big image** displays the images in cover mode. In this case, the box is completely filled with the image. The image can be cropped on top, bottom, left or right thereby depending on the image format.
{% endhint %}

#### Display mode

* With **Standard/Original** (default), the image will fit the box enclosing the image up to its native size. It will not be cut here.
* **Cover/Cropped (cover)** completely fills the box with the image. Depending on the format, it can be cropped at the top, bottom, left or right.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MLNcXt5teZZIW4064AM%2F-MLNcfty8c6xATTZdJsn%2Fdefault-cover-contain.png?alt=media\&token=5c1ca5be-1e51-4db1-af05-9dccdd3396f8)

### Set product layout type in category

In contrast to the global setting, you can also overwrite the globally set layout type in each **category (1)** in the tab "layout" in the category listing section in the **Layout type (2)** option.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FitIoXCV6btGH8NDk3143%2Fdocs-en-faq-product-layout-settings-ctaloguq-category-layout-type.png?alt=media&#x26;token=f179af7a-9b34-4993-a207-40fb4b00df22" alt=""><figcaption></figcaption></figure>

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

## Product slider & product boxes

In addition to the **Layout type (2)**, product sliders and product boxes also have a configuration to change the **Display mode (1)**.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FKp3iNk8x3MYzPfepo1BF%2Fdocs-en-content-layout-type-cms-product-slider-settings.png?alt=media\&token=316cd205-3884-47c6-a54c-76a4a9b626fb)

#### Display mode

The display mode of the item images can be selected in many places in Shopwar. The values `Standard`, `cover` and `stretch` are available. With display mode you decide how the image behaves in the image area of the product box.

* With **Standard/Original** (default), the image will fit the box enclosing the image up to its native size. It will not be cut here.
* **Cover/Cropped (cover)** completely fills the box with the image. Depending on the format, it can be cropped at the top, bottom, left or right.
* With **Contain/Fixed height (contain)**, the image is stretched and fitted to the size of the box. It will not be cut here.

{% hint style="info" %}
If the resolution of the product images is too small for the display area, so that they are not displayed filling, you can use the **Contain/Fixed height (contain)** mode. This will stretch the images beyond their actual size and fill them.

You can find more information about image resolution here: [image-sizes](https://themedocs.zenit.design/en/content/product-images/image-sizes "mention")
{% endhint %}

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MLNcXt5teZZIW4064AM%2F-MLNcfty8c6xATTZdJsn%2Fdefault-cover-contain.png?alt=media\&token=5c1ca5be-1e51-4db1-af05-9dccdd3396f8)

#### Layout type

<table><thead><tr><th width="242">Display mode</th><th width="176">Layout type</th><th>Aspect ratio</th></tr></thead><tbody><tr><td>Standard/Original <code>(default)</code></td><td>Standard</td><td>adjustable² aspect ratio</td></tr><tr><td>Standard/Original <code>(</code><strong><code>cover¹</code></strong><code>)</code></td><td>Big image</td><td><strong>adjustable² height</strong></td></tr><tr><td>Standard/Original <code>(default)</code></td><td>Minimal content</td><td>adjustable² aspect ratio</td></tr><tr><td>Cover/Cropped<code>(cover)</code></td><td>Standard</td><td>adjustable² aspect ratio</td></tr><tr><td>Cover/Cropped<code>(cover)</code></td><td>Big image</td><td><strong>adjustable² height</strong></td></tr><tr><td>Cover/Cropped<code>(cover)</code></td><td>Minimal content</td><td>adjustable² aspect ratio</td></tr><tr><td>Contain/Fixed height <code>(contain)</code></td><td>Standard</td><td>adjustable² aspect ratio</td></tr><tr><td>Contain/Fixed height <code>(contain)</code></td><td>Big image</td><td><strong>adjustable² height</strong></td></tr><tr><td>Contain/Fixed height <code>(contain)</code></td><td>Minimal content</td><td>adjustable² aspect ratio</td></tr></tbody></table>

{% hint style="info" %}
¹ By default, the **Big image** layout type uses the display mode **Cover/Cropped** with a fixed height.

² You can configure the aspect ratio and height in the theme configuration.
{% endhint %}