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: