Make product boxes more compact
In this tutorial you will learn how to make the product boxes more compact with ThemeWare®.
The "spacing" or "gaps" in product boxes – for example in product listings or product sliders – are intended by Shopware and already exist in the standard theme.
Technically, these are placeholders for information that are available depending on the product configuration and then should be displayed.
In order to avoid that each product box has a different height due to the lack of information in some products, these "placeholders" exist.
Information in these "placeholders" are for example the rating stars or the variant characteristics:
Rating stars being displayed when a rating has been made for an item. Otherwise, the section in the listing will remain empty (white).
Variant characteristics serve to differentiate "expanded" variants according to their property values. If an item is not an "expanded" variant, the section remains empty (white).
Since this information – depending on the product configuration – is quite useful, we have abstained from hiding this information. ThemeWare® gives you the possibility to do this yourself via the theme configuration.
Make product boxes more compact
To make product boxes more compact, Shopware and ThemeWare® give you various options that we will present to you in this article:
Choose layout for the product listing or product slider
Shopware offers the option of changing the layout of the product listing or product slider via the Shopping Experience Editor.
For example, the layout types "Minimal content" and "Big image" do without the shortened product description.
Examples
Configuring product boxes
With the following configuration fields you are able to show/hide content in the product box:
Product rating (from ThemeWare® 0.2.3)
Tab "Category pages" => Block "Product box" => Section "Product rating" => Fild "Show product rating"
Variant characteristics (from ThemeWare® 0.3.0)
Tab "Category pages" => Block "Product box" => Section "Basic configuration" => Field "Show variant characteristics"
Order number
Tab "Category pages" => Block "Product box" => Section "Basic configuration" => Field "Show order number"
Manufacturer (from ThemeWare® 0.3.0)
Tab "Category pages" => Block "Product box" => Section "Basic configuration" => Field "Show manufacturer"
Price unit (from ThemeWare® 0.3.0)
Tab "Category pages" => Block "Product box" => Section "Basic configuration" => Field "Show price unit"
Cheapest price (from ThemeWare® 0.3.0)
Tab "Category pages" => Block "Product box" => Section "Basic configuration" => Field "Show cheapest price"
Examples
New: Compact mode #beta
As a further option for more compact product boxes, we have integrated a "compact mode" into ThemeWare® with ThemeWare® 3.1.0. This is still in a test phase, but you are welcome to try it out and send us feedback via our service portal.
Tab "Others" => Block "Beta" => Section "Product box" => Compact product boxes
Conclusion
With the above features, you will be able to present the Shopware product listing in a much more compact way. With ThemeWare® you are free to decide which option you wish to hide in your shop.
Last updated
