Layout type
Last updated
Last updated
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.
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.
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.
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.
In addition to the Layout type (2), product sliders and product boxes also have a configuration to change the Display mode (1).
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
| Display mode | Layout type | Aspect ratio |
|---|---|---|
Standard/Original | Standard | adjustable² aspect ratio |
Standard/Original | Big image | adjustable² height |
Standard/Original | Minimal content | adjustable² aspect ratio |
Cover/Cropped | Standard | adjustable² aspect ratio |
Cover/Cropped | Big image | adjustable² height |
Cover/Cropped | Minimal content | adjustable² aspect ratio |
Contain/Fixed height | Standard | adjustable² aspect ratio |
Contain/Fixed height | Big image | adjustable² height |
Contain/Fixed height | 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.
