Schlanke Produktboxen: Mehr Übersicht, weniger Scrollen

Auf dem Smartphone entscheiden wenige Pixel darüber, ob ein Kunde weiterscrollt, vergleicht oder abspringt. Standardmäßig zeigen Produktboxen in Shopware 6 jedoch mehr Informationen, als auf einem schmalen Display sinnvoll sind: Variantenmerkmale, Grundpreise und „Ab"-Hinweise belegen wertvollen Platz, selbst wenn sie für das jeweilige Produkt gar nicht relevant sind. Mit einer gezielten CSS-Anpassung schaffen Sie schlankere Boxen, kürzere Scrollwege und eine deutlich aufgeräumtere Produktliste, ohne in die Theme-Struktur einzugreifen.

Warum diese Anpassung sinnvoll ist

Standardmäßig zeigt Shopware in jeder Produktbox zusätzliche Informationen wie Variantenmerkmale oder Grundpreise an. Diese Angaben sind grundsätzlich nützlich, beanspruchen aber gerade auf kleinen Bildschirmen viel Platz. In Kategorien mit vielen Produkten verlängert sich der Scrollweg dadurch spürbar, und der Nutzer verliert schneller den Überblick.

Hinzu kommt ein typisches Verhalten von Shopware: Die Plattform reserviert den Platz für Varianten- und Grundpreis-Angaben auch dann, wenn sie für das einzelne Produkt gar nicht benötigt werden. Bei Artikeln ohne Varianten oder ohne Grundpreis-Pflicht entstehen so leere Bereiche, die das Layout aufblähen und das Einkaufserlebnis verschlechtern.

Mit einem kleinen CSS-Snippet blenden Sie diese Elemente gezielt aus. Die Boxen wirken optisch schlanker, die Listen werden kompakter, und die Mobile-Experience verbessert sich messbar. In der Praxis hat sich gezeigt, dass gerade bei längeren Kategorieseiten dieser eine Eingriff einen deutlich spürbaren Effekt auf die wahrgenommene Übersichtlichkeit hat.

So wenden Sie den CSS-Code an

Für den folgenden Code haben Sie zwei Wege: Entweder pflegen Sie ihn direkt in Ihrem Theme ein oder Sie nutzen ein Plugin wie „Custom CSS and JS" aus dem Shopware Store. Welche Variante die richtige ist, hängt von Ihrem Setup ab. Bei einem eigenen Theme ist die Theme-Pflege technisch sauberer, mit einem CSS-Plugin bleiben Sie unabhängig von Theme-Updates und können Anpassungen schnell aktivieren oder deaktivieren.

Wechseln Sie im Shopware-Backend zu Erweiterungen → Custom CSS/JS und legen Sie einen neuen Container an. Eine sprechende Bezeichnung wie „Produktboxen verkleinern" erleichtert später die Wartung. Hinterlegen Sie folgenden Code:

.product-variant-characteristics {
    display: none;
}
.product-price-info {
    .product-price-unit {
        display: none;
    }
    .product-price-wrapper {
        .product-cheapest-price {
            display: none;
        }
    }
}

Was wird konkret entfernt?

1. Varianten-Merkmale:
Hinweise wie „Größe: M | Farbe: Rot" werden ausgeblendet. Das ist sinnvoll, wenn Ihre Varianten ohnehin auf der Detailseite ausgewählt werden oder Sie auf Variantenebene gar nicht arbeiten.

2. Grundpreisangaben:
Die Zeile mit „1 l = 2,99 €" entfällt. Hier ist Sorgfalt geboten: Bei grundpreispflichtigen Produkten ist die Anzeige zwingend vorgeschrieben, das Ausblenden ist in diesem Fall keine Option.

3. „Ab"-Preise bei Varianten:
Der Hinweis „ab 9,99 €" wird ausgeblendet. Diese Angabe ist nur dann relevant, wenn Ihre Produkte mit Preisspannen über Varianten arbeiten.

Welche dieser drei Anpassungen Sie übernehmen, hängt von Ihrem Sortiment ab. Sie können den Code modular einsetzen und nur die Blöcke aktivieren, die zu Ihrem Shop passen, zum Beispiel nur das Ausblenden der Varianten-Merkmale, während die Grundpreisanzeige aus rechtlichen Gründen erhalten bleibt.

Fazit

Eine kleine, gezielte CSS-Anpassung verbessert die Optik Ihrer Produktlisten und reduziert spürbar den Scrollweg auf mobilen Geräten. Weniger Scrollen, mehr Übersicht, eine bessere Conversion-Grundlage. Da Sie ausschließlich mit nativen Bordmitteln und einem optionalen CSS-Manager arbeiten, bleibt die Lösung update-sicher und wartbar. Prüfen Sie vor dem Live-Schalten, ob Ihr Sortiment grundpreispflichtige Artikel enthält, und aktivieren Sie nur die Blöcke, die zu Ihrer Sortimentsstruktur passen. Wenn Sie unsicher sind, welche Elemente in Ihrem Shop ausgeblendet werden dürfen oder wie weitergehende Layout-Anpassungen sauber in das Theme integriert werden, unterstütze ich Sie gern bei Bewertung und Umsetzung.