Zuletzt aktualisiert: Juni 2026, gilt für PrestaShop 1.7 bis 9. Das Classic-Theme enthält weiterhin keinen Scroll-to-Top-Button; hier geht es darum, ihn an der Stelle einzubauen, die PrestaShop bei einem Update nicht überschreibt.
Hier ist der Teil, den die meisten Anleitungen zum Thema "Scroll-to-Top-Button hinzufügen" auslassen: In einem PrestaShop-Shop lautet die Frage selten, ob Sie einen solchen Button möchten, sondern woher der Button tatsächlich kommt, denn davon hängt ab, ob er Ihr nächstes Theme- oder Core-Update überlebt. Das Standard-Theme Classic von PrestaShop bringt keinen Back-to-Top-Button mit, viele Premium-Themes fügen jedoch einen hinzu, und ein Page-Builder kann unter Umständen einen zweiten einfügen. Bevor Sie also JavaScript irgendwo einfügen, besteht die eigentliche Arbeit darin, herauszufinden, was Ihr Shop bereits hat, und das fehlende Element genau an der Stelle zu ergänzen, die PrestaShop nicht überschreibt.
Diese Anleitung ist die PrestaShop-spezifische Umsetzung: wo ein Button typischerweise sitzt, mit welchem Modul und welchem Hook Sie ihn hinzufügen können, ohne das Parent-Theme zu bearbeiten, und wie er updatesicher bleibt. Warum der Button überhaupt Engagement und Orientierung verbessert, der UX-Fall, das Mobile-Argument, die Psychologie dahinter, behandeln wir in warum ein Back-to-Top-Button überraschend wichtig ist; dort finden Sie auch das vollständige Vanilla-JS-Implementierungsbeispiel. Beides wiederholen wir hier nicht.
Prüfen Sie, was Ihr Shop bereits ausgibt
Schließen Sie zuerst aus, dass es bereits einen Button gibt, von dem Sie nichts wussten. Das classic-Theme von PrestaShop (1.7 bis 9.x) enthält keinen nativen Scroll-to-Top-Button, weder der Footer (themes/classic/templates/_partials/footer.tpl) noch das kompilierte JavaScript (themes/classic/assets/js/theme.js, gebaut aus den _dev/js/-Quellen) enthalten ein solches Element. In einem unveränderten Classic-Shop gibt es also nichts zu finden. Viele Premium-Themes liefern dagegen einen eigenen Back-to-Top-Pfeil mit, der eingeblendet wird, sobald der Besucher ein Stück nach unten gescrollt hat.
Die erste Diagnose ist daher ganz praktisch: Scrollen Sie Ihre Startseite und eine lange Kategorieseite auf Desktop und Mobilgerät. Wenn unten rechts bereits ein Button erscheint und funktioniert, stellt Ihr Theme ihn bereit und Sie müssen nichts hinzufügen. Sie müssen ihn gestalten, und das ist CSS-Arbeit (siehe unten). Wenn nichts erscheint. Was beim Classic-Theme der Standard ist, oder der Button angezeigt wird, aber nicht funktioniert, fügen Sie einen hinzu; in den nächsten Abschnitten geht es darum, das auf PrestaShop-Art zu tun.
Der falsche Weg: das Parent-Theme bearbeiten
Die naheliegende Versuchung ist, footer.tpl oder theme.js im aktiven Theme zu öffnen und direkt zu bearbeiten. Das funktioniert ungefähr so lange, bis Sie das Theme aktualisieren, das nächste Update überschreibt Ihre Dateien und der Button verschwindet, meist erst Wochen später bemerkt, wenn niemand gerade damit rechnet. Das ist der häufigste Grund, warum aus einer "kleinen" Frontend-Anpassung wiederkehrende Wartung wird.
Die Disziplin, die das verhindert, ist dieselbe, die PrestaShop überall erzwingt: Bearbeiten Sie niemals das Parent-Theme. Wenn Sie das Aussehen eines gekauften Themes anpassen, gehört die Änderung in ein Child-Theme; wie das genau funktioniert und warum es wichtig ist, erklären wir in Child-Themes in PrestaShop. Für ein eigenständiges Widget wie einen Scroll-Button müssen Sie Theme-Dateien in der Regel aber gar nicht anfassen, darum geht es im nächsten Abschnitt.
Der updatesichere Weg: HTML-Block plus eigenes JS/CSS
Ein Scroll-to-Top-Button besteht aus drei kleinen Teilen: etwas Markup, ein paar Zeilen JavaScript zum Ein- und Ausblenden und für die Scroll-Animation sowie etwas CSS für Position und Gestaltung. Nichts davon muss in einer Theme-Datei liegen. Das updatesichere Muster in PrestaShop lautet: Markup in einen HTML-Block, Verhalten in Ihre eigenen JS/CSS-Dateien.
1. Das Markup, über einen HTML-Block
Statt den Button fest in ein Template zu schreiben, legen Sie ihn in einen Inhaltsblock, den Sie im Backoffice steuern. Es gibt keine eingebaute Backoffice-Seite, um beliebiges Scroll-Button-Markup hinzuzufügen. Verwenden Sie daher ein Modul für benutzerdefiniertes HTML, das den gewünschten Hook ausdrücklich unterstützt, oder bauen Sie ein kleines, zweckgebundenes Modul, das an einem bekanntermaßen gerenderten Hook registriert ist. Für einen am Footer verankerten Button ist ein Hook wie displayFooter oder displayBeforeBodyClosingTag der natürliche Ort. Die allgemeine Technik, Markup in einen unterstützten, gerenderten Hook einzufügen, behandeln wir in HTML-Blöcke: benutzerdefinierte Inhalte überall hinzufügen. Der Button selbst ist ein einzelnes Element:
<button id="scrollTop" aria-label="Scroll to top of page">↑</button>
2. Das Verhalten, in custom.js (nicht theme.js)
Das Classic-Theme von PrestaShop enthält eine custom.js (und eine custom.css), damit Sie Verhalten ergänzen können, ohne kompilierte Theme-Assets anzufassen, Verfügbarkeit und Update-Verhalten hängen jedoch vom Theme ab, und ein Theme-Update kann Parent-Theme-Dateien überschreiben. Für verlässliche Updatesicherheit legen Sie Ihr JS/CSS in einem Child-Theme oder einem Modul ab; verwenden Sie die custom.js/custom.css des Parent-Themes nur, wenn Sie akzeptieren, diese Dateien nach jedem Theme-Update zu prüfen. Genau dort gehört die Scroll-Logik hin. Warum das der richtige Ort ist, und welche Fallstricke es rund um die Asset-Pipeline gibt. Ist das zentrale Thema von eigenes CSS und JavaScript, ohne Updates zu gefährden; die Lektüre lohnt sich, bevor Sie irgendein Frontend-Skript hinzufügen. Die Logik selbst ist unspektakulär: Button anzeigen, sobald der Viewport ungefähr 300px nach unten gescrollt ist, und beim Klick weich nach oben scrollen.
3. Das Styling, in custom.css
Die Positionierung gehört in custom.css: fest unten rechts, mit einer Tippfläche von mindestens 44×44px, und. Das ist der PrestaShop-spezifische Stolperstein, mit einem z-index, der unter Ihrem Cookie-Zustimmungsbanner und jedem Chat-Widget liegt, aber über dem Seiteninhalt. In einem typischen Shop konkurrieren Sie mit dem DSGVO-Banner, der Live-Chat-Blase und, falls Ihr Theme oder ein Modul sie hinzufügt, einer fixierten In-den-Warenkorb-Leiste auf Produktseiten; wählen Sie den z-index bewusst, statt einfach zu 999999 zu greifen und zu hoffen.
Nativer Button, HTML-Block oder Theme-Bearbeitung
| Ansatz | Überlebt Updates? | Wo er liegt | Am besten, wenn… |
|---|---|---|---|
| Button des Themes verwenden | Ja | Theme (Styling in custom.css) | Ihr meist kostenpflichtiges Theme bereits einen Button ausgibt und dieser nur neu gestaltet oder anders positioniert werden muss. |
| HTML-Block + custom.js/custom.css | Ja | Ein Inhaltsblock + eigene Asset-Dateien | Ihr Theme keinen Button hat oder der vorhandene Button defekt ist, und Sie eine Lösung ohne Eingriff ins Theme möchten. |
| Child-Theme-Override | Ja (bis Sie das Theme wechseln) | themes/your-child-theme/ | Sie ohnehin bereits aus anderen Gründen ein Child-Theme pflegen. |
| Parent-Theme bearbeiten | Nein | .tpl/.js des aktiven Themes | Niemals. Das nächste Theme-Update entfernt die Änderung stillschweigend. |
Die Details zu Barrierefreiheit und z-index, die PrestaShop Ihnen abverlangt
Im Backoffice legen Sie fest, wann der Button erscheint, seinen Stil und in welcher Ecke er sitzt, ohne Theme-Code anzufassen.
Zwei Dinge bringen Scroll-Buttons in echten PrestaShop-Shops zum Scheitern, und beide lassen sich einmal sauber lösen. Erstens: Barrierefreiheit. Geben Sie den Button als echtes <button> aus, nicht als gestaltetes <div>, versehen Sie ihn mit aria-label="Scroll to top of page", damit ein Screenreader seinen Zweck ansagt, und stellen Sie sicher, dass er per Tastatur erreichbar ist. Ein Pfeilsymbol ohne Beschriftung ist für assistive Technologien unsichtbar.
Zweitens: das Ebenenproblem. Ein PrestaShop-Frontoffice stapelt unten rechts oft mehrere fixe Elemente übereinander, den Cookie-/Zustimmungshinweis, das Chat-Widget und, in Shops, deren Theme oder ein Modul dies hinzufügt, eine fixierte Warenkorb-Leiste, die beim Scrollen auf Produktseiten erscheint (das ist keine native PrestaShop-Funktion, prüfen Sie also, ob Ihr Shop sie hat). Ein Scroll-Button mit unbedachtem z-index verdeckt die "In den Warenkorb"-Schaltfläche, und dann bremst Ihre kleine UX-Verbesserung plötzlich Bestellungen aus. Testen Sie den Button gezielt auf einer Produktseite mit langer Beschreibung, mobil und mit sichtbarem Zustimmungsbanner, bevor Sie die Aufgabe als erledigt betrachten.
Erfinden Sie sanftes Scrollen nicht neu, wenn Sie ohnehin Bewegung hinzufügen
Wenn ein Scroll-to-Top-Button die einzige Animation ist, die Sie planen, ist der oben beschriebene schlanke Weg über eigenes JS genau der richtige Aufwand, alles Schwerere wäre für einen einzelnen Button überdimensioniert. Wenn Sie aber zusätzlich Einblendeffekte, beim Scrollen eingeblendete Bereiche oder andere Bewegungen im Shop planen, lohnt es sich, einen einheitlichen Ansatz für das Scroll-Verhalten festzulegen, statt voneinander losgelöste Skripte anzubauen, die alle auf dasselbe Scroll-Event hören. Wie Sie das geschmackvoll und ohne Performance-Einbruch umsetzen, behandeln wir in Scroll-Animationen: dezente Bewegung hinzufügen.
Die Kurzfassung
In PrestaShop ist der Scroll-to-Top-Button kein Programmierproblem, der Code umfasst fünf Zeilen, sondern ein Platzierungsproblem. Legen Sie das Markup in einen HTML-Block im Backoffice, das Verhalten in custom.js, das Styling in custom.css, niemals ins Parent-Theme, und geben Sie ihm einen z-index, der Zustimmungsbanner und Warenkorb-Leiste respektiert. So erhalten Sie den Engagement-Vorteil ohne Wartungslast und ohne beim nächsten Update nacharbeiten zu müssen. Die hart erarbeitete Lehre dahinter zieht sich durch diese ganze Themenreihe: Gerade die kleinen Frontend-Details, die trivial wirken, brechen bei Updates leise weg, wenn Sie sie nicht an der Stelle ergänzen, die PrestaShop dafür frei lässt.
Häufig gestellte Fragen
Wie erkenne ich, ob mein Theme bereits einen Scroll-to-Top-Button hat?
Scrollen Sie Ihre Startseite und eine lange Kategorieseite auf Desktop und Mobilgerät. Wenn unten rechts ein Pfeil erscheint und funktioniert, stellt Ihr Theme ihn bereit. Ihre Aufgabe ist Styling, nicht Neubau. Um zu prüfen, woher er kommt, sehen Sie sich den Quelltext an und suchen Sie nach einem #back-to-top- oder .scroll-to-top-Element. Das Standard-Classic-Theme hat keines; in einem unveränderten Classic-Shop gibt es also tatsächlich nichts zu finden.
Warum den Button nicht einfach in footer.tpl einfügen?
Weil footer.tpl und theme.js Dateien des Parent-Themes sind und das nächste Theme-Update sie überschreibt, Ihr Button verschwindet, meist wochenlang unbemerkt. Genau so wird aus einer "kleinen" Anpassung am häufigsten wiederkehrende Wartung. Legen Sie das Markup stattdessen in einen HTML-Block im Backoffice und das Verhalten in eigene Assets oder ein Modul, damit keine Änderung im Theme-Verzeichnis steckt.
Welchen Hook sollte der HTML-Block des Buttons verwenden?
Für einen am Footer verankerten Button sind displayFooter oder displayBeforeBodyClosingTag die natürlichen Orte. Beide werden in einem Standard-Shop nahe am Seitenende gerendert. Es gibt keine eingebaute Backoffice-Seite für beliebiges Scroll-Button-Markup. Verwenden Sie daher ein Custom-HTML-Modul, das den gewünschten Hook ausdrücklich unterstützt, oder bauen Sie ein kleines, zweckgebundenes Modul, das an einem bekanntermaßen gerenderten Hook registriert ist.
Welchen z-index sollte ich verwenden?
Einen bewusst gewählten, nicht 999999. Der Button muss über dem Seiteninhalt liegen, aber unter Ihrem Cookie-Zustimmungsbanner, Ihrem Chat-Widget und jeder fixierten Warenkorb-Leiste auf Produktseiten, sonst verdeckt er die In-den-Warenkorb-Schaltfläche und bremst Bestellungen aus. Wählen Sie einen Wert und testen Sie ihn anschließend auf einer langen Produktseite mobil, mit sichtbarem Zustimmungsbanner und aktiver Warenkorb-Leiste, bevor Sie die Aufgabe als erledigt betrachten.
Muss der Button per Tastatur zugänglich sein?
Ja. Geben Sie ihn als echtes <button> aus, nicht als gestaltetes <div>, damit er fokussierbar und per Tastatur erreichbar ist, und versehen Sie ihn mit aria-label="Scroll to top of page", damit ein Screenreader seinen Zweck ansagt. Ein Pfeilsymbol ohne Beschriftung ist für assistive Technologien unsichtbar, und ein div ist überhaupt nicht fokussierbar. Beides lässt sich beim Bau leicht richtig machen und später nur mühsam nachrüsten.
Mein Theme gibt bereits einen Button aus. Kann ich ihn einfach neu positionieren?
Ja, und das ist CSS-Arbeit, kein Neubau. Gestalten und positionieren Sie den vorhandenen Button in custom.css (oder im Stylesheet Ihres Child-Themes), statt einen zweiten hinzuzufügen. Zwei übereinandergestapelte Back-to-Top-Buttons in derselben Ecke sind ein häufiges unbeabsichtigtes Ergebnis, wenn vorher nicht geprüft wurde. Passen Sie die bottom/right-Offsets und den z-index so an, dass Ihre anderen fixierten Widgets frei bleiben.
Sollte ich eine eigene Scroll-Logik schreiben, wenn ich auch andere Animationen hinzufüge?
Wenn der Button die einzige Bewegung ist, die Sie hinzufügen, reicht der schlanke Weg über eigenes JS völlig aus. Wenn Sie aber auch Einblendeffekte oder beim Scrollen eingeblendete Bereiche planen, legen Sie einen einheitlichen Scroll-Ansatz fest, statt voneinander getrennte Skripte anzubauen, die alle auf dasselbe Scroll-Event hören, genau so verschlechtert sich Performance unauffällig. Der Leitfaden zu Scroll-Animationen zeigt, wie Sie das als eine kontrollierte Ebene umsetzen.
Verwandte Leitfäden
Kommentare
Kommentar schreiben
Teilen Sie eine Frage, ein Installationsdetail oder Feedback, das anderen Lesern helfen kann.