Comment afficher les sous-catégories en tuiles avec images sur PrestaShop ?
Conversion & UX

Unterkategorien als Bildkacheln in PrestaShop anzeigen

Auf einer Kategorie mittlerer Ebene kommt der Besucher mit einer noch weiten Absicht an. Er sucht kein bestimmtes Produkt, er will wissen, was der Bereich enthält. Eine Liste aus Textlinks beantwortet das schlecht, ein Raster aus Bildkacheln beantwortet es gut.

Was das Standard-Theme macht

Das native Verhalten unterscheidet sich je nach Theme. Am häufigsten: eine Textliste der Unterkategorien, manchmal mit kleinem Vorschaubild, über oder unter dem Produktraster.

Drei Grenzen.

Die Bilder fehlen oder sind winzig, wodurch sie zur Orientierung nichts beitragen.

Die Position ist fest, meist unter der Kategoriebeschreibung, wo auf dem Smartphone kaum jemand hinsieht.

Und vor allem verschwindet die Liste bei vielen Themes, sobald die aktuelle Kategorie Produkte enthält, was der häufigste Fall ist.

Wo der Block hingehört

Die Antwort hängt von der Ebene der Kategorie ab, und daran entscheidet sich die Wirkung.

Auf einer Oberkategorie ohne eigene Produkte oder mit sehr wenigen füllen die Kacheln die ganze Seite. Das ist der Idealfall: die Seite wird zur visuellen Wahl zwischen Teilbereichen.

Auf einer mittleren Kategorie mit Unterkategorien und Produkten stehen die Kacheln über dem Produktraster, auf höchstens ein bis zwei Reihen. Der Besucher sieht zuerst die möglichen Wege, dann die Produkte, wenn er lieber stöbert.

Auf einer Endkategorie ohne Unterkategorien hat der Block keinen Zweck. Manche Umsetzungen zeigen dort die Schwesterkategorien, was eine andere Funktion ist und eher am Seitenende eine eigene Behandlung verdient.

Visuelle Kategorieseite: Unterkategorien als Bildkacheln (Category Wall)Kategorieseiten, die zum Klicken einladen – keine bloße Aufzählungsliste.89,00€

Die Bilder auswählen

Das entscheidet über das Ergebnis, mehr als die Technik.

Einheitlichkeit vor Schönheit. Zwölf Kacheln, davon acht freigestellte Produktfotos und vier Stimmungsbilder, ergeben ein unruhiges Raster. Wählen Sie eine Linie und halten Sie sie im ganzen Shop.

Produktfoto oder Anwendungsfoto? Bei einem technischen Katalog ist das Produktfoto lesbarer: der Besucher erkennt sofort, worum es geht. Bei Deko, Textil oder Lebensmitteln verkauft das Anwendungsfoto besser.

Das Format muss einheitlich sein. Ein einziges Seitenverhältnis für alle Kacheln, mit automatischem zentriertem Zuschnitt. Bilder mit unterschiedlichen Proportionen zerstören das Raster.

Der Text muss lesbar bleiben. Liegt die Bezeichnung auf dem Bild, sehen Sie einen Schleier oder einen halbtransparenten Hintergrund vor. Ein weißer Titel auf einem hellen Foto ist unlesbar, und Kontrast ist ein Kriterium der Barrierefreiheit, keine Geschmacksfrage.

Wie viele Kacheln, in welcher Reihenfolge

Zwischen vier und zwölf. Unter vier genügt eine Textliste. Über zwölf wird das Raster selbst zum Katalog, und der Besucher wählt nicht mehr.

Bei zwanzig Unterkategorien gibt es zwei Wege: in der Struktur zusammenfassen, oder nur die wichtigsten als Kacheln zeigen und einen Link «alle Kategorien ansehen» setzen.

Für die Reihenfolge gilt die im Backoffice festgelegte Position statt der alphabetischen. Setzen Sie nach vorn, was sich verkauft, nicht was mit A beginnt.

Barrierefreiheit

Zwei Regeln, die bei solchen Blöcken oft fehlen.

Der Link braucht eine lesbare Bezeichnung. Eine Kachel, die nur ein klickbares Bild ohne Alternativtext ist, ist für einen Screenreader ein leerer Link. Der Kategoriename muss echter Text sein, kein Bestandteil des Bildes.

Die Klickfläche muss die ganze Kachel abdecken, nicht nur den Titel. Das ist auch eine Frage der Bedienbarkeit am Touchscreen.

Die Kategorie ohne eigene Produkte

Eine Oberkategorie, die nur Unterkategorien enthält, wirft eine SEO-Frage auf.

Ohne Produkte und ohne Inhalt ist die Seite dünn und rankt schlecht, obwohl sie oft die meistgesuchte generische Anfrage ihres Bereichs trägt.

Drei Elemente machen sie nützlich: die Unterkategorie-Kacheln, ein Einleitungstext von 150 bis 300 Wörtern, der erklärt, was der Bereich bündelt, und gegebenenfalls eine Auswahl von Aushängeschild-Produkten aus den Unterkategorien.

Der letzte Punkt ist kaufmännisch der wirksamste: er gibt der Seite verkäuferischen Inhalt und erhält zugleich ihre Orientierungsfunktion.

Messen

Zwei Kennzahlen genügen.

Die Klickrate zu den Unterkategorien von der übergeordneten Seite aus, vorher und nachher. Das ist die unmittelbar erwartete Wirkung.

Die Absprungrate der übergeordneten Seite, die sinken sollte. Eine Bereichsseite mit hoher Absprungrate zeigt, dass der Besucher keinen offensichtlichen Weg gefunden hat.

Bei großen Katalogen lohnt eine dritte Zahl: die durchschnittliche Sitzungstiefe ab diesen Seiten. Steigt sie, funktioniert Ihre Navigation besser.

Das Modul Visuelle Kategorieseite für PrestaShop richtet diesen Block auf PrestaShop 8 und 9 ein: Unterkategorien als Bildkacheln in einheitlichem Format, konfigurierbare Position je Kategorieebene, Anzeige auch dann, wenn die Kategorie Produkte enthält, und Bezeichnungen als Text für die Barrierefreiheit.

Weiterlesen

Ähnliche Artikel