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:

• Select compact layout in the Shopping Experience

• Reduce elements of the product boxes

• NEW: Select compact mode

---

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

from left to right: defailt layout, "Big image" layout, "Minimal content" layout

---

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

from left to right: default layout, minimal configuration, additional configurations

---

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.

from left to right: default layout, minimal configuration