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.

Layout-Type Standard

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.

You may need to make a copy of the default category layouts as these are not editable.

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

Layout type	Display mode¹	Aspect ratio
Standard	Standard (default)	adjustable² aspect ratio
Big image	Cover³	adjustable² height
Minimal content	Standard (default)	adjustable² aspect ratio

¹ 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.

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.

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.

from minute 11:35

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).

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.

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

Layout type

Display mode	Layout type	Aspect ratio
Standard/Original (default)	Standard	adjustable² aspect ratio
Standard/Original (cover¹)	Big image	adjustable² height
Standard/Original (default)	Minimal content	adjustable² aspect ratio
Cover/Cropped(cover)	Standard	adjustable² aspect ratio
Cover/Cropped(cover)	Big image	adjustable² height
Cover/Cropped(cover)	Minimal content	adjustable² aspect ratio
Contain/Fixed height (contain)	Standard	adjustable² aspect ratio
Contain/Fixed height (contain)	Big image	adjustable² height
Contain/Fixed height (contain)	Minimal content	adjustable² aspect ratio

¹ 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.