Produktboxen in Shopware 6 optimieren: Weniger Scrollen, besseres Einkaufserlebnis

Hier siehst du ein kleines, aber wirkungsvolles Tutorial, mit dem du die Darstellung deiner Produktboxen in Shopware 6 optimieren kannst – besonders auf dem Smartphone. Durch eine gezielte CSS-Anpassung werden unnötige Elemente innerhalb der Boxen ausgeblendet. Das Ergebnis: Deine Produktlisten in Kategorien und Slidern wirken kompakter, der Nutzer muss weniger scrollen, und die Seite wirkt insgesamt aufgeräumter.

Warum diese Anpassung sinnvoll ist

Standardmäßig zeigt Shopware in jeder Produktbox zusätzliche Informationen wie Variantenmerkmale oder Grundpreise an. Diese Infos sind zwar grundsätzlich nützlich, nehmen aber vor allem auf kleinen Bildschirmen viel Platz ein. Besonders wenn du viele Produkte hast, verlängert sich dadurch der Scrollweg unnötig.

Hinzu kommt: Shopware räumt diesen Informationen selbst dann Platz ein, wenn sie eigentlich gar nicht gebraucht werden – zum Beispiel, wenn ein Produkt keine Varianten hat oder kein Grundpreis angegeben werden muss. Dadurch entstehen unnötige Leerstellen, die das Layout aufblähen und das Shop-Erlebnis deiner Besucher verschlechtern.

Mit einem kleinen CSS-Snippet lassen sich diese Elemente gezielt ausblenden. Damit werden die Boxen optisch schlanker und die Nutzererfahrung deutlich verbessert - gerade auf dem Smartphone.

So wendest du den CSS-Code an

Um den folgenden Code nutzen zu können, brauchst du entweder Zugriff auf dein Theme oder du arbeitest mit einem Plugin wie „Custom CSS and JS“.

Gehe in seinem Shopware Backend zu Erweiterungen -> Custom CSS/JS und lege dort einen neuen Container an. Benenne diesen z.B. mit "Produktboxen verkleinern". Trage dort den folgenden Code ein:

.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:
Diese Infos (z. B. „Größe: M | Farbe: Rot“) werden häufig gar nicht benötigt, wenn du keine Varianten aktiv nutzt oder die Varianten auf der Detailseite auswählbar sind.

2. Grundpreisangaben:
Die Zeile mit „1 l = 2,99 €“ entfällt. Wenn Grundpreise rechtlich verpflichtend sind, solltest du hier aufpassen.

3. „Ab“-Preise bei Varianten:
Der Hinweis „ab 9,99 €“ wird ausgeblendet. Auch das ist nur relevant, wenn deine Produkte mehrere Preisspannen haben.

Fazit

Mit dieser kleinen Design-Anpassung verbesserst du nicht nur die Optik deiner Produktlisten, sondern auch die Nutzererfahrung, besonders auf mobilen Geräten. Weniger Scrollen, mehr Übersicht, und alles ohne großen Aufwand oder Zusatzkosten.