PrestaShop Infoleiste: eine Nachricht ganz oben auf jeder Shopseite

Wofür ist eine Nachrichtenleiste oben auf der Seite da?

Für eine Information, die die Entscheidung eines Kunden ändert, bevor er nach einem Produkt sucht. Der Kunde sieht die Leiste auf der Startseite, in einer Kategorie, auf der Produktseite und im Warenkorb, er muss also nicht auf einer bestimmten Seite landen, um etwas zu erfahren.

Typische Nachrichten in der Leiste:

• die Schwelle für versandkostenfreie Lieferung („Versandkostenfrei ab 49 € Bestellwert“),
• der Versandschluss („Bestellungen bis 14:00 gehen am selben Tag raus“),
• eine Versandpause („Bestellungen vom langen Wochenende versenden wir am Dienstag“),
• der letzte Bestelltag vor den Feiertagen.

Die Beträge und Uhrzeiten in diesen Beispielen dienen nur der Veranschaulichung. Schreiben Sie nur in die Leiste, was im Shop tatsächlich eingerichtet ist. Wenn die Leiste versandkostenfreie Lieferung ab 49 € verspricht und der Versanddienst im Warenkorb sie erst ab 60 € gewährt, fühlt sich der Kunde im letzten Schritt betrogen. Wie Sie die Schwelle selbst einstellen, beschreiben wir im Beitrag zu versandkostenfrei ab einem Bestellwert.

Drei Wege, eine Infoleiste in PrestaShop einzubauen

Wählen Sie die Methode danach, wie oft Sie den Text ändern und welches Theme Sie haben.

PrestaShop hat oben auf der Seite eine Stelle für Banner. Die Entwicklerdokumentation beschreibt sie beim Hook displayBanner als „ganz oben auf jeder Seite“. Leistenmodule hängen sich meist dort ein. Welche Module an dieser Stelle sitzen, sehen Sie in Ihrem Shop unter Design → Positionen, erklärt im Leitfaden zu Modulpositionen.

Ein Template-Eintrag gehört in ein Child Theme, nicht ins Haupt-Theme. Wenn Sie die Leiste in die Dateien des Haupt-Themes einbauen, entfernt sie das nächste Theme-Update. Die PrestaShop-Dokumentation zu Child Themes beschreibt, wie ein Child Theme aufgebaut ist. Was nach einem Update mit Änderungen passiert, erklären wir im Beitrag darüber, wie ein Theme-Update meine Änderungen gelöscht hat.

Wie Sie die Leiste im Template einbauen, Schritt für Schritt

Dieser Weg braucht Zugriff auf die Theme-Dateien. Wenn Sie nicht täglich mit Dateien arbeiten, machen Sie es mit jemandem, der das tut, oder mit dem Chat.

1. Prüfen Sie, ob der Shop ein Child Theme hat. Wenn nicht, legen Sie eines an, bevor Sie die erste Datei ändern.
2. Machen Sie eine Kopie der Header-Datei des Themes (in Classic das Template für den Seitenkopf).
3. Fügen Sie über dem Header einen Block mit dem Nachrichtentext und einer eigenen Klasse hinzu, zum Beispiel top-info-bar.
4. Legen Sie in der Datei custom.css des Child Themes Hintergrundfarbe, Textfarbe, eine kleine Schriftgröße und die Zentrierung fest.
5. Fügen Sie eine Regel für schmale Bildschirme hinzu, damit der Text umbricht, statt aus dem Bildschirm zu laufen.
6. Leeren Sie den Cache unter Erweiterte Einstellungen → Leistung.
7. Öffnen Sie den Shop in einem privaten Fenster und auf dem Handy. Prüfen Sie Startseite, eine Kategorie, eine Produktseite und den Warenkorb.

In einem Shop mit mehreren Sprachen erscheint ein fest ins Template geschriebener Text für alle in einer Sprache. Dann ist ein Modul mit einem Feld für jede Sprache oder ein Text über die Theme-Übersetzungen bequemer.

Wie sollte die Leiste auf dem Handy aussehen?

Auf dem Handy nimmt die Leiste wertvollen Platz über dem Produkt ein, sie muss also niedrig sein. Zwei Zeilen sind die Grenze. Drei Zeilen schieben Produktname und Preis auf dem Bildschirm nach unten.

Worauf Sie achten sollten:

• Kontrast. Weißer Text auf hellem Hintergrund, etwa Gelb, ist im Sonnenlicht schwer zu lesen. Wählen Sie einen dunklen Hintergrund mit hellem Text oder umgekehrt.
• Schriftgröße. Zu kleinen Text zoomen Kunden mit zwei Fingern. Klein, aber nicht kleiner als das übrige Kleingedruckte im Shop.
• Kein Lauftext. Bewegter Text ist schwer zu lesen und ermüdet die Augen.
• Ein Schließen-Button nur mit Gedächtnis. Wenn sich die Leiste schließen lässt, sollte sie auf den folgenden Seiten geschlossen bleiben. Sonst schließt der Kunde sie auf jeder Seite erneut.
• Eine eigene Regel für schmale Bildschirme. Verkleinern Sie auf dem Handy die Abstände und lassen Sie den Text umbrechen. Diese Regel steht in einem Block, der nur unterhalb einer gewählten Bildschirmbreite gilt, beschrieben im MDN-Leitfaden zu Media Queries.

Wie Sie die Leiste nach dem Einbau pflegen

Eine Leiste, auf die niemand achtet, erzählt bald Unwahrheiten. Die Aktion ist vorbei, die Versandschwelle hat sich geändert, und der alte Text hängt immer noch oben im Shop. Kunden lesen ihn als Versprechen.

Drei einfache Regeln:

• wann immer Sie Versandpreise oder Versandzeiten ändern, prüfen Sie auch die Leiste,
• entfernen oder ersetzen Sie eine saisonale Nachricht am Tag, an dem die Kampagne endet, nicht eine Woche später,
• wenn es keine Nachricht gibt, lassen Sie keinen leeren farbigen Streifen stehen; blenden Sie die Leiste ganz aus.

Wenn die Leiste auf dem Handy falsch aussieht, behandeln wir die Lösung separat im Beitrag zur mobilen Ansicht in PrestaShop. Die Farben von Buttons und anderen Elementen ändern Sie nach unserem Beitrag zum Ändern einer Button-Farbe.

Wie Sie eine Infoleiste mit dem Chat einbauen

Sie schreiben, welche Nachricht Sie wollen und wie sie aussehen soll. Ihr Chat (Claude oder ChatGPT) prüft das Theme, klärt, ob es ein Child Theme gibt und ob an der obersten Stelle der Seite schon ein Modul mit einer ähnlichen Leiste läuft. Dann zeigt er die Änderung an den Dateien vor dem Speichern.