Teile CSS-Vorlagen

Ersatzteil-CSS-Vorlagen für Kataloge voller ähnlicher Artikel

Zwei Produktkarten in einem Ersatzteilkatalog können identisch aussehen und völlig unterschiedliche Dinge bedeuten. Ein Artikel wird heute Nachmittag versendet, der zweite ist eine Sonderbestellung mit sechs Wochen Wartezeit, und der dritte wurde zugunsten einer neueren Version eingestellt. Das Styling macht diesen Unterschied sichtbar, bevor jemand klickt, und Ersatzteil-CSS-Vorlagen geben Anbietern ein Set visueller Regeln für diese Unterscheidungen an die Hand.

Lagerstatus bei identischen Karten

Bestandszustände ändern sich schneller als Produktfotos, daher leisten die mit ihnen verknüpften Signale den Großteil der täglichen Arbeit.

Einige dieser Zustände verdienen eine eigene Behandlung:

• Auf Lager, geringer Bestand und Lieferrückstand, getrennt durch etwas Deutlicheres als reine Farbe.
• Sonderbestellartikel, bei denen die Lieferzeit neben den Preis gehört.
• Eingestellte Komponenten, die auf den Ersatz hinweisen, der ihren Platz eingenommen hat.
• Eine bestätigte Passform für die ausgewählte Maschine und eine Warnung, wenn die Komponente nicht passt.

Händler, die OEM- und Aftermarket-Linien nebeneinander führen, benötigen ein weiteres Signal, da der Preisunterschied eine Frage aufwirft, die ein kleines Label schneller beantwortet als ein ganzer Absatz.

Lange Codes lesefreundlich gestalten

Eine Teilenummer ist der eigentliche Name des Produkts, daher verdient sie mehr visuelles Gewicht als der umgebende Text. Eine Festbreitenschrift, größerer Zeichenabstand und starker Kontrast machen einen neunzehnstelligen Code leichter vorlesbar und vereinfachen den Abgleich mit dem abgenutzten Teil auf der Werkbank. Spezifikationstabellen lohnen die gleiche Aufmerksamkeit: mit ausgerichteten Einheiten, dezenten Zeilentrennungen und Spaltenbreiten, die über die gesamte Liste hinweg stabil bleiben.

Nicepage deckt das meiste davon über seine visuellen Steuerelemente ab, und Custom CSS Code übernimmt den Rest. Die Dokumentation zu benutzerdefiniertem CSS erklärt, wie Regeln hinzugefügt und Klassen Elementen zugewiesen werden, wodurch katalogspezifische Gestaltungen wie Passform-Badges, Vergleichszeilen oder Filter-Chips vom allgemeinen visuellen System getrennt bleiben.

Schmale Bildschirme erfordern weniger Spalten

Auf Smartphones gerät das Katalog-Styling meist an seine Grenzen. Ein zwanzigstelliger Code bricht in der Mitte um und wird zu zwei bedeutungslosen Hälften, eine Spezifikationstabelle schiebt den Preis aus dem Sichtbereich, und vier Karten in einer Reihe lassen nichts mehr lesbar zurück. Kontrollierter Zeilenumbruch, eine Tabelle mit horizontalem Bildlauf und eine Kartenzahl, die abnimmt, sobald der Bildschirm schmaler wird, lösen die meisten dieser Probleme.

Diese Überschreibungen sollten bewusst eng gefasst werden, da eine Regel für eine einzelne Produktfamilie mit ungewöhnlich langen Beschreibungen nicht jede Karte im Katalog verändern sollte. Styling, das einen wachsenden Katalog überdauert, ist meist das unaufgeregte: eine visuelle Sprache für wiederkehrende Artikel, ergänzt durch eine kurze Liste sinnvoller Ausnahmen.