CLS auf Shopware-Kategorieseiten verhindern

Zwei Ursachen im Produkt-Grid

In Shopware-Listings kommt CLS meist aus zwei Stellen. Erstens fehlen am <img> die Attribute width und height. Der Browser kennt den Platz nicht und schiebt Name und Preis nach, sobald die Datei da ist. Zweitens haben die Quelldateien unterschiedliche Seitenverhältnisse. Ein Hochkant-Packshot neben einem Querformat zwingt die Karten in der Zeile auf ungleiche Höhen.

Nach einem Theme-Wechsel fehlten in einem Mandanten die Maße im Listing-Partial. PageSpeed hat CLS gemeldet, obwohl die Fotos schon komprimiert waren. Erst die Attribute plus einheitlicher Zuschnitt haben das Grid ruhig gehalten.

Seitenverhältnis vor dem Grid festlegen

CSS kann eine Karte auf feste Höhe zwingen. Steht das Motiv dann gestreckt oder mit wechselndem Weißrand da, wirkt das Listing unruhig. Der Zuschnitt gehört in die Mediathek, bevor das Theme das Thumbnail einsetzt.

Legen Sie ein Format für Produktkarten fest, in der Praxis meist 1:1. Mit Bild-Editor Pro schneiden Sie jedes Medium in der Administration auf dieses Verhältnis. Nach dem Speichern erzeugt Shopware die Thumbnails neu. Produktname und Preis sitzen danach auf derselben Linie.

1. Listing-Template prüfen: width und height am Bild setzen
2. Produktfotos in der Mediathek auf dasselbe Seitenverhältnis zuschneiden
3. Kategorieseite hart neu laden und auf Nachrutschen der Karten achten

Kategorieseite visuell prüfen

Öffnen Sie die Kategorie mit gedrosseltem Netz in den Entwicklertools. Rutschen die Preise nach, fehlen Maße oder der Zuschnitt. LCP und Dateigröße sind ein anderes Thema, dazu LCP über Produktbilder.