Przycisk „do góry”: mała poprawka UX, zaskakująco duży efekt

Aktualizacja: czerwiec 2026, dotyczy PrestaShop od wersji 1.7 do 9. Motyw Classic nadal nie zawiera przycisku przewijania do góry; tutaj skupiamy się na umieszczeniu go w miejscu, którego PrestaShop nie nadpisze podczas aktualizacji.

Oto część, którą pomija większość poradników typu „dodaj przycisk przewijania do góry”: w sklepie PrestaShop rzadko chodzi o to, czy taki przycisk jest potrzebny. Ważniejsze jest skąd ten przycisk faktycznie pochodzi, bo od tego zależy, czy przetrwa kolejną aktualizację motywu albo rdzenia. Domyślny motyw Classic w PrestaShop nie zawiera przycisku powrotu do góry, ale wiele płatnych motywów dodaje własny, a kreator stron może wstrzyknąć drugi. Dlatego zanim wkleisz jakikolwiek JavaScript, trzeba najpierw ustalić, co Twój sklep już ma, i dodać brakujący element w jedynym miejscu, którego PrestaShop nie nadpisze.

Ten poradnik pokazuje wdrożenie specyficzne dla PrestaShop: gdzie taki przycisk zwykle się znajduje, jaki moduł i hook pozwalają dodać go bez edycji motywu nadrzędnego oraz jak sprawić, żeby przetrwał aktualizacje. O tym, dlaczego przycisk w ogóle poprawia zaangażowanie i orientację użytkownika, o argumentach UX, mobile i psychologii, piszemy w tekście dlaczego przycisk powrotu do góry ma zaskakująco duże znaczenie, gdzie znajdziesz też pełny fragment wdrożeniowy w czystym JavaScripcie. Tutaj nie będziemy tego powtarzać.

Sprawdź, co Twój sklep już renderuje

Zacznij od wykluczenia przycisku, o którego istnieniu możesz nie wiedzieć. Motyw classic w PrestaShop (od 1.7 do 9.x) nie ma natywnego przycisku przewijania do góry, jego stopka (themes/classic/templates/_partials/footer.tpl) i skompilowany JavaScript (themes/classic/assets/js/theme.js, budowany ze źródeł _dev/js/) nie zawierają takiego elementu. W standardowym sklepie na motywie classic nie ma więc czego szukać. Wiele płatnych motywów dostarcza jednak własną strzałkę powrotu do góry, która pojawia się po przewinięciu poniżej pierwszego ekranu.

Pierwszy test jest więc konkretny: przewiń stronę główną i długą stronę kategorii na komputerze oraz na urządzeniu mobilnym. Jeśli przycisk już pojawia się w prawym dolnym rogu i działa, dostarcza go motyw i nie musisz niczego dodawać, musisz go tylko ostylować, czyli zająć się CSS-em (o tym niżej). Jeśli nic się nie pojawia, a tak jest domyślnie w motywie Classic. Albo przycisk jest widoczny, lecz nie działa, wtedy dodajesz własny. Kolejne sekcje pokazują, jak zrobić to zgodnie z praktykami PrestaShop.

Zły sposób: edycja motywu nadrzędnego

Kuszące rozwiązanie to otworzyć footer.tpl albo theme.js w aktywnym motywie i edytować je bezpośrednio. Działa mniej więcej do momentu aktualizacji motywu, kolejna aktualizacja nadpisuje pliki, a przycisk znika, zwykle zauważony dopiero po kilku tygodniach, kiedy nikt już na to nie patrzy. To najczęstszy powód, dla którego „drobna” poprawka front-endowa zamienia się w stały obowiązek serwisowy.

Dyscyplina, która temu zapobiega, jest taka sama jak wszędzie w PrestaShop: nigdy nie edytuj motywu nadrzędnego. Jeśli dostosowujesz wygląd kupionego motywu, nadpisania powinny trafić do motywu potomnego; dokładnie wyjaśniamy to w poradniku motywy potomne w PrestaShop. W przypadku samodzielnego widżetu, takiego jak przycisk przewijania, zwykle nie musisz jednak dotykać plików motywu w ogóle, i o tym jest następna sekcja.

Sposób bezpieczny dla aktualizacji: blok HTML plus własny JS/CSS

Przycisk przewijania do góry składa się z trzech małych elementów: odrobiny znaczników, kilku linii JavaScriptu do pokazywania/ukrywania przycisku i animowania przewijania oraz CSS-u do pozycjonowania i stylowania. Nic z tego nie musi znajdować się w pliku motywu. Bezpieczny dla aktualizacji wzorzec w PrestaShop polega na umieszczeniu znaczników w bloku HTML, a zachowania w Twoich własnych plikach JS/CSS.

1. Znaczniki przez blok HTML

Zamiast wpisywać przycisk na stałe w szablonie, umieść go w bloku treści kontrolowanym z panelu administracyjnego. PrestaShop nie ma wbudowanej strony zaplecza do dodawania dowolnych znaczników przycisku przewijania, więc użyj modułu custom HTML, który jawnie obsługuje wybrany hook, albo zbuduj mały, dedykowany moduł zarejestrowany w znanym, renderowanym hooku. Dla przycisku zakotwiczonego przy stopce naturalnym miejscem jest hook taki jak displayFooter albo displayBeforeBodyClosingTag. Ogólną technikę wstawiania znaczników do obsługiwanego, renderowanego hooka omawiamy w poradniku bloki HTML: dodawanie własnych treści w dowolnym miejscu sklepu. Sam przycisk to jeden element:

<button id="scrollTop" aria-label="Scroll to top of page">↑</button>

2. Zachowanie w custom.js (nie w theme.js)

Motyw Classic w PrestaShop zawiera custom.js (oraz custom.css), dzięki czemu możesz dodawać zachowania bez dotykania skompilowanych zasobów motywu, ale dostępność i zachowanie przy aktualizacji zależą od konkretnego motywu, a aktualizacja może nadpisać pliki motywu nadrzędnego. Jeśli zależy Ci na niezawodnym bezpieczeństwie aktualizacji, umieść JS/CSS w motywie potomnym albo module; korzystaj z custom.js/custom.css w motywie nadrzędnym tylko wtedy, gdy akceptujesz konieczność sprawdzania ich po każdej aktualizacji motywu. Właśnie tam trafia logika przewijania. Dlaczego to właściwe miejsce, wraz z zastrzeżeniami dotyczącymi przetwarzania zasobów, opisujemy szerzej w tekście własny CSS i JavaScript bez psucia aktualizacji, który warto przeczytać przed dodaniem jakiegokolwiek skryptu front-endowego. Sama logika jest prosta: pokaż przycisk po przewinięciu widoku mniej więcej o 300px i po kliknięciu płynnie przewiń stronę do góry.

3. Stylowanie w custom.css

Pozycjonowanie należy do custom.css: stałe umieszczenie w prawym dolnym rogu, obszar dotykowy nie mniejszy niż 44×44px oraz, to pułapka specyficzna dla PrestaShop, taki z-index, który znajduje się poniżej banera zgód/cookies i każdego widżetu czatu, ale powyżej treści strony. W typowym sklepie konkurujesz z banerem GDPR, dymkiem czatu na żywo oraz, jeśli motyw albo moduł go dodaje, przyklejonym paskiem „dodaj do koszyka” na stronach produktów; wybierz z-index świadomie, zamiast sięgać po 999999 i liczyć, że będzie dobrze.

Natywny przycisk, blok HTML czy edycja motywu

Dostępność i z-index: szczegóły, które PrestaShop wymusza

Z poziomu zaplecza ustawiasz, kiedy przycisk się pojawia, jego styl i w którym rogu się znajduje, bez dotykania kodu motywu.

Dwie rzeczy psują przyciski przewijania w prawdziwych sklepach PrestaShop i obie łatwo zrobić dobrze od razu. Po pierwsze, dostępność: wyrenderuj przycisk jako prawdziwy <button>, a nie ostylowany <div>, dodaj mu aria-label="Scroll to top of page", żeby czytnik ekranu informował o jego celu, i upewnij się, że da się do niego dotrzeć klawiaturą. Sama strzałka bez etykiety jest niewidoczna dla technologii wspomagających.

Po drugie, problem warstw. Część sklepu PrestaShop widoczna dla klientów często układa kilka elementów fixed w tym samym prawym dolnym rogu, komunikat o cookies/zgodach, widżet czatu oraz, w sklepach, w których dodaje go motyw albo moduł, przyklejony pasek „dodaj do koszyka” pojawiający się na stronach produktów podczas przewijania (to nie jest natywna funkcja PrestaShop, więc sprawdź, czy Twój sklep ją ma). Przycisk przewijania z nieprzemyślanym z-indexem zasłoni przycisk „Dodaj do koszyka”, co oznacza, że Twoja drobna poprawka UX zacznie tłumić zamówienia. Zanim uznasz pracę za skończoną, przetestuj przycisk szczególnie na stronie produktu z długim opisem, na urządzeniu mobilnym, przy widocznym banerze zgód.

Nie wymyślaj płynnego przewijania od nowa, jeśli i tak dodajesz animacje

Jeśli przycisk przewijania do góry jest jedyną animacją, którą rozważasz, lekka ścieżka z własnym JS opisana wyżej to dokładnie właściwy nakład pracy: wszystko cięższe byłoby przerostem formy nad treścią dla jednego przycisku. Jeśli jednak planujesz też płynne pojawianie się elementów, sekcje ujawniane przy przewijaniu albo inny ruch w sklepie, warto ustalić jedno spójne podejście do zachowania podczas przewijania, zamiast doklejać odseparowane skrypty, z których każdy nasłuchuje tego samego zdarzenia przewijania. Pokazujemy, jak zrobić to z wyczuciem (i bez zabijania wydajności), w poradniku animacje przewijania: dodawanie subtelnego ruchu.

Wersja skrócona

W PrestaShop przycisk przewijania do góry nie jest problemem programistycznym, kod ma pięć linijek, tylko problemem umiejscowienia. Umieść znaczniki w bloku HTML z panelu administracyjnego, zachowanie w custom.js, style w custom.css, nigdy w motywie nadrzędnym, i nadaj mu z-index, który respektuje baner zgód oraz pasek „dodaj do koszyka”. Dzięki temu zyskasz korzyść dla zaangażowania bez obciążenia utrzymaniowego i bez poprawiania tego samego po kolejnej aktualizacji. Praktyczna lekcja stojąca za tym wszystkim jest taka sama jak w całej tej serii: drobne elementy front-endowe, które wyglądają banalnie, to dokładnie te, które po cichu psują się przy aktualizacji, jeśli nie dodasz ich w miejscu zostawionym przez PrestaShop.

Najczęściej zadawane pytania

Jak sprawdzić, czy mój motyw ma już przycisk przewijania do góry?

Przewiń stronę główną i długą stronę kategorii na komputerze oraz na urządzeniu mobilnym. Jeśli w prawym dolnym rogu pojawia się strzałka i działa, zapewnia ją motyw. Twoim zadaniem jest stylowanie, nie budowanie od zera. Aby potwierdzić, skąd pochodzi, podejrzyj źródło strony i wyszukaj element #back-to-top albo .scroll-to-top. Domyślny motyw Classic go nie ma, więc w standardowym sklepie na Classicu naprawdę nie ma czego znaleźć.

Dlaczego nie dodać przycisku po prostu do footer.tpl?

Bo footer.tpl i theme.js to pliki motywu nadrzędnego, a kolejna aktualizacja motywu je nadpisze, przycisk zniknie, zwykle niezauważony przez tygodnie. To najczęstszy sposób, w jaki „drobna” poprawka staje się powtarzalnym obowiązkiem serwisowym. Zamiast tego umieść znaczniki w bloku HTML z panelu administracyjnego, a zachowanie we własnych zasobach albo module, żeby żadna zmiana nie była przechowywana w drzewie motywu.

Jakiego hooka powinien używać blok HTML przycisku?

Dla przycisku zakotwiczonego przy stopce naturalnymi miejscami są displayFooter albo displayBeforeBodyClosingTag, oba renderują się blisko końca strony w standardowym sklepie. PrestaShop nie ma wbudowanej strony zaplecza do dowolnych znaczników takiego przycisku, więc użyj modułu custom HTML, który jawnie obsługuje wybrany hook, albo zbuduj mały, dedykowany moduł zarejestrowany w znanym, renderowanym hooku.

Jaki z-index mu nadać?

Wybrany świadomie, nie 999999. Przycisk powinien znaleźć się nad treścią strony, ale pod banerem zgody na cookies, widżetem czatu i każdym przyklejonym paskiem „dodaj do koszyka” na stronach produktów, w przeciwnym razie zasłoni przycisk zakupu i ograniczy zamówienia. Wybierz wartość, a potem przetestuj ją na długiej stronie produktu na urządzeniu mobilnym, przy widocznym banerze zgód i aktywnym pasku „dodaj do koszyka”, zanim uznasz pracę za skończoną.

Czy przycisk musi być dostępny z klawiatury?

Tak. Wyrenderuj go jako prawdziwy <button>, a nie ostylowany <div>, żeby był fokusalny i dostępny z klawiatury, oraz dodaj aria-label="Scroll to top of page", aby czytnik ekranu informował o jego celu. Sama strzałka bez etykiety jest niewidoczna dla technologii wspomagających, a div w ogóle nie jest fokusalny, oba problemy łatwo rozwiązać podczas wdrożenia, a trudno poprawiać po fakcie.

Mój motyw już renderuje przycisk, czy mogę go po prostu przesunąć?

Tak, i to jest zadanie dla CSS-u, nie osobne wdrożenie. Ostyluj i przesuń istniejący przycisk w custom.css (albo w arkuszu stylów motywu potomnego), zamiast dodawać drugi, dwa przyciski powrotu do góry ułożone w tym samym rogu to częsty przypadkowy efekt braku wcześniejszego sprawdzenia. Dostosuj jego offsety bottom/right oraz z-index tak, żeby omijał pozostałe stałe widżety.

Czy pisać osobną logikę przewijania, jeśli dodaję też inne animacje?

Jeśli przycisk jest jedynym ruchem, jaki dodajesz, lekka ścieżka z własnym JS w zupełności wystarczy. Jeśli jednak planujesz też płynne pojawianie się elementów albo sekcje ujawniane przy przewijaniu, ustal jedno spójne podejście do scrollowania, zamiast doklejać odseparowane skrypty, z których każdy nasłuchuje tego samego zdarzenia przewijania, tak właśnie wydajność pogarsza się po cichu. Poradnik o animacjach przewijania pokazuje, jak zrobić z tego jedną kontrolowaną warstwę.

Powiązane poradniki

• Przycisk powrotu do góry: mały detal UX, który ma zaskakująco duże znaczenie
• Własny CSS i JavaScript w PrestaShop bez psucia aktualizacji
• Animacje przewijania: dodawanie subtelnego ruchu na stronach sklepu