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.

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

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

Logo

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH