Jak zmienić układ strony głównej PrestaShop

Chcesz, by strona główna Twojego sklepu PrestaShop prezentowała się inaczej, szybciej kierowała klientów do kluczowych kategorii i lepiej wspierała sprzedaż? Poniższa instrukcja pokazuje krok po kroku, jak bezpiecznie przeprojektować układ strony głównej: od prostych zmian w panelu, przez zarządzanie pozycjami i elementami, aż po modyfikacje motywu i stylów. Zadbamy o kopię zapasową, wydajność, responsywność oraz testy, tak aby zmiany były stabilne i łatwe do utrzymania.

Przygotowanie i bezpieczeństwo prac

Ustal wersję sklepu i motyw

Zaloguj się do panelu administracyjnego i sprawdź wersję sklepu (Ustawienia zaawansowane > Informacje) oraz aktywny motyw (Wygląd/Design > Motywy). Informacja o wersji ułatwi Ci dopasowanie ścieżek plików i nazw hooków. Jeśli korzystasz z trybu wielosklepowego, upewnij się, że jesteś w odpowiednim kontekście sklepu, aby wprowadzane zmiany dotyczyły właściwej instancji.

Kopia zapasowa i środowisko testowe

Wykonaj pełny backup: plików i bazy danych. Najlepiej wprowadzać zmiany w środowisku deweloperskim lub na klonie sklepu. W ten sposób unikniesz przerw w sprzedaży i będziesz mógł spokojnie testować. Jeżeli hosting oferuje snapshoty, skorzystaj z nich przed rozpoczęciem prac.

Włącz ustawienia deweloperskie tylko na czas prac

• Ustawienia zaawansowane > Wydajność: tymczasowo wyłącz buforowanie, włącz rekompilację szablonów i wyświetlanie błędów dla administratora.
• Po zakończeniu zmian koniecznie przywróć ustawienia produkcyjne i ponownie włącz buforowanie.

Porządek i kontrola zmian

Notuj, co modyfikujesz: pozycje modułów, pliki, style, wyjątki. Dobrze jest tworzyć krótkie commity w repozytorium lub przynajmniej listę zmian, aby łatwiej było wrócić do poprzedniego stanu w razie potrzeby.

Zmiana strony głównej przez pozycje, hooki i moduły

Mapa hooków strony głównej

Strona główna korzysta z obszarów (hooków), takich jak displayHome, a także – zależnie od motywu – dodatkowych jak displayHomeTop czy displayHomeBottom. To właśnie w te miejsca podpinasz elementy. Przejdź do Wygląd/Design > Pozycje i wyszukaj hooki. Zobaczysz listę modułów przypiętych do danego hooka oraz możliwość zmiany ich kolejności metodą przeciągnij i upuść.

Zarządzanie modułami na stronie głównej

W Menedżerze modułów (Moduły > Menedżer) włączaj/wyłączaj komponenty odpowiedzialne za elementy strony głównej: slider, banery, produkty polecane, nowe produkty, bestsellery. Powszechne przykłady to ps_imageslider (slider), ps_banner (baner), ps_featuredproducts (produkty promowane). Kolejność i widoczność kontrolujesz przez Wygląd/Design > Pozycje, gdzie moduł można także przepiąć do innego hooka lub odpiąć od aktualnego. Pamiętaj, że moduły często mają własne ustawienia określające liczbę produktów, kategorię źródłową, typ karuzeli i czas trwania animacji.

Wyjątki i warunkowe wyświetlanie

W formularzu przypięcia modułu do hooka skorzystaj z listy wyjątków, aby wykluczyć wyświetlanie modułu na niektórych kontrolerach. Dla strony głównej najczęściej chcesz brak wyjątków, ale przy przenoszeniu elementów z home na inne podstrony warto precyzyjnie zdefiniować, gdzie moduł ma się pojawiać (np. tylko home i kategorie).

Zmiana kolejności bez dotykania kodu

• Wygląd/Design > Pozycje > wybierz dany hook > przeciągaj moduły, aby zmienić kolejność.
• Weryfikuj rezultat na froncie w oknie incognito, aby pominąć lokalne pamięci przeglądarki.
• Jeśli nie widzisz zmian, wyczyść pamięć podręczną sklepu i przeglądarki.

Page Builder i widgety z motywu

Wiele komercyjnych motywów oraz rozszerzeń oferuje edytory typu Page Builder. Pozwalają one składać sekcje strony głównej z gotowych bloków: bannery, siatki produktów, treści HTML, formularze, karuzele. Zazwyczaj działają przez własne hooki lub integrują się z displayHome. Jeśli korzystasz z takiego narzędzia, ustal priorytety: które sekcje budujesz wizualnie, a które pozostawiasz standardowym modułom, aby uniknąć duplikacji treści.

Multistore: różne układy dla różnych sklepów

Jeśli masz włączony multistore, na górnym pasku panelu wybierz konkretny sklep. Zmiany pozycji i konfiguracji modułów zapisują się w kontekście wybranego sklepu. To ułatwia tworzenie innego układu strony głównej dla np. marki premium i outletu, zachowując wspólną bazę produktów.

Praca z motywem i plikami szablonów

Gdzie leży strona główna w plikach

Struktura motywu znajduje się w katalogu themes/nazwa-motywu. Główny plik strony głównej to zwykle templates/index.tpl. Dodatkowe sekcje mogą pochodzić z templates/_partials lub z widoków modułów umieszczonych w themes/nazwa-motywu/modules/nazwa_modułu/views/templates. Zanim zmodyfikujesz cokolwiek, utwórz własny motyw potomny lub skopiuj aktualny, aby nie nadpisywać zmian przy aktualizacji.

Motyw potomny i dziedziczenie

Najbezpieczniej wprowadzać modyfikacje przez motyw potomny. Pozwala on nadpisywać wybrane pliki bez kopiowania całego motywu. W praktyce tworzysz nowy katalog motywu, wskazujesz rodzica w pliku konfiguracyjnym, a następnie umieszczasz tylko zmieniane pliki w analogicznych ścieżkach. Dzięki temu łatwiej aktualizować bazowy motyw i nie tracić modyfikacji, które wprowadzasz w potomnym. To właśnie tu wstawisz dodatkowe sekcje lub przerobisz istniejące.

Wstawianie i przenoszenie bloków w TPL

Plik templates/index.tpl może mieć bloki sekcji, które można rozszerzać lub nadpisywać. Aby dodać własny blok nad listą produktów czy sliderem, wstaw w odpowiednim miejscu kontener i wywołanie hooka displayHome lub własnego. Własne hooki deklarujesz w module (metoda registerHook), a następnie wstawiasz do layoutu, by moduł mógł wstrzyknąć treść. Takie podejście pozwala nadal zarządzać kolejnością w panelu, łącząc elastyczność plików i wygodę GUI.

Modyfikacja motywu bez naruszania plików rdzeniowych

Nie edytuj plików w katalogu modules bezpośrednio, gdy chcesz zmienić wygląd modułu na stronie głównej. Skopiuj odpowiedni szablon do themes/nazwa-motywu/modules/nazwa_modułu/views/templates/hook i tam wprowadź zmiany. PrestaShop automatycznie użyje tej wersji, jeśli istnieje. W ten sposób aktualizacje modułu nie zniszczą Twoich modyfikacji.

Smarty: podstawy pracy i debug

Silnik Smarty pozwala korzystać ze zmiennych, pętli i warunków w plikach TPL. Pamiętaj o czyszczeniu pamięci podręcznej po zmianach, ponieważ TPL jest kompilowany. Gdy warunkowo układasz sekcje na stronie głównej (np. inna sekcja dla niezalogowanych, a inna dla klientów z programem lojalnościowym), korzystaj z warunków i uważaj na wydajność – zagnieżdżone pętle i dodatkowe zapytania potrafią spowolnić stronę.

Szablony i częściowe widoki

Duże sekcje warto rozbić na mniejsze pliki w katalogu templates/_partials i wczytywać je przez include. Ułatwia to utrzymanie kodu i ponowne wykorzystanie elementów (np. kafli kategorii, bloków USP, bloku newslettera). Przenosząc elementy, zachowuj spójność klas CSS, aby stylowanie i siatka działały przewidywalnie.

Tłumaczenia tekstów

Jeśli dodałeś na stronie głównej nowe teksty, pamiętaj o module tłumaczeń: Międzynarodowy > Tłumaczenia. Umieszczając frazy w TPL, używaj funkcji tłumaczeniowych, by zachować możliwość lokalizacji. To szczególnie ważne w multistore i sklepach wielojęzycznych.

Drobne wstawki HTML i edytor treści

Gdy potrzebujesz szybkich zmian, skorzystaj z modułu własnego HTML lub CMS. To prosty sposób na dodanie sekcji informacyjnej czy banera bez ingerencji w pliki. Później możesz przenieść ten fragment do motywu, gdy układ dojrzeje i będzie wymagał lepszego wpięcia w strukturę.

Stylowanie, siatka i wydajność ładowania

Gdzie dopisać CSS

Najpewniejsze miejsce na własne style to plik custom.css w themes/nazwa-motywu/assets/css (lub odpowiednik w motywie potomnym). Dzięki temu separujesz zmiany od stylów dostarczanych przez motyw. Unikaj nadmiernie szczegółowych selektorów, aby nie wprowadzać kaskady trudnej do utrzymania. Styluj sekcje strony głównej w sposób modułowy: osobne reguły dla banerów, siatek produktów, slidera i stopki. Dbałość o nomenklaturę klas ułatwia długofalową pracę i chroni przed konfliktami przy aktualizacjach. W razie potrzeby wykorzystaj preprocesor, jeśli motyw go wspiera, ale zawsze trzymaj najważniejsze poprawki w jednym miejscu. Pamiętaj, że CSS powinien pozostać możliwie lekki.

Siatka i responsywność

Klasy siatki (np. z Bootstrapa) pozwalają ułożyć kolumny różnie na telefonach, tabletach i desktopach. Projektując homepage, zadbaj o priorytety treści mobilnych: skracaj nagłówki, zmniejsz liczbę elementów w jednej linii i testuj dotykową nawigację po karuzelach. Przy obrazach stosuj odpowiednie rozmiary i atrybuty srcset, aby nie ładować zbyt dużych plików na małych ekranach.

Obrazy, WebP i leniwe ładowanie

Optimized JPG/PNG lub WebP na stronie głównej znacząco poprawiają LCP. Ustaw generowanie miniatur w rozmiarach dopasowanych do layoutu. Dla sekcji poniżej pierwszego ekranu aktywuj leniwe ładowanie. Sprawdź, czy slider nie renderuje od razu wszystkich slajdów w pełnej rozdzielczości.

Minimalizacja i porządek w skryptach

Jeśli motyw lub moduły ładują wiele skryptów, skorzystaj z opcji łączenia i kompresji w panelu. Usuń nieużywane biblioteki i zredukuj liczbę inicjalizacji karuzel. Mniej JS na starcie to szybciej działający koszyk i lepszy wynik w narzędziach analitycznych.

Cache i przeładowywanie po zmianach

Po każdej modyfikacji stylów lub TPL wyczyść cache w Ustawieniach zaawansowanych > Wydajność. W trakcie prac możesz używać trybu Force compile dla TPL, ale przed publikacją wróć do produkcyjnych ustawień buforowania i kompilacji, aby sklep działał maksymalnie szybko.

Dostępność i czytelność

Upewnij się, że kontrast tekstu jest wystarczający, elementy klikalne mają wygodny rozmiar, a obrazy mają tekst alternatywny. Przejrzysty układ homepage poprawia zarówno UX, jak i SEO. To dotyczy też kolejności sekcji – kluczowe treści powinny znaleźć się wysoko, a elementy ozdobne niżej.

Scenariusze krok po kroku: od drobnych zmian po pełne przeprojektowanie

Szybkie przemeblowanie bez kodu

• Wyłącz niepotrzebne moduły na homepage (np. zbędne karuzele).
• W Pozycjach zmień kolejność elementów w displayHome, przesuwając kluczowe sekcje wyżej.
• Skonfiguruj moduł banera tak, aby prowadził do najlepiej konwertujących kategorii.
• W module z produktami ogranicz liczbę pozycji i dodaj filtry (np. bestsellery).
• W edytorze CMS dodaj krótki blok z USP: darmowa dostawa, zwroty, szybka obsługa.

Dodanie nowej sekcji produktowej

• Zainstaluj moduł listy produktów pozwalający wskazać kategorię lub kolekcję.
• Przypnij go do displayHomeTop lub displayHome (zależnie od motywu) i ustaw pozycję tuż pod hero.
• Przystyluj karty produktów w custom.css, aby dopasować je do brandingu.
• Sprawdź w mobile, czy siatka produktów nie jest zbyt gęsta – lepiej 2 kolumny niż 3.

Własna sekcja treści w index.tpl

• W motywie potomnym otwórz templates/index.tpl i dodaj kontener sekcji tuż nad stopką.
• Włóż tam include do własnego pliku partial oraz klasę siatki dla responsywności.
• Dodaj tłumaczenia fraz w Międzynarodowy > Tłumaczenia.
• Wyczyść cache i sprawdź, czy sekcja pojawia się poprawnie na wszystkich viewportach.

Przeniesienie slidera pod sekcję z USP

• W Pozycjach odnajdź slider i blok USP, zmień kolejność przeciągając elementy.
• Otwórz stronę główną w trybie prywatnym i sprawdź efekt.
• Jeśli motyw nadaje sliderowi marginesy niepasujące do nowej pozycji, nadpisz je w custom.css.

Redukcja wagi strony głównej

• Zamień duży hero-image na obraz o dopasowanej rozdzielczości i formacie WebP.
• Ogranicz liczbę karuzel – wystarczy jedna z bestsellerami.
• Włącz kompresję i łączenie CSS/JS w panelu i sprawdź, czy nic się nie rozsypało.
• Zmierz LCP i CLS w Lighthouse. Skoryguj rozmiary obrazów, aby zredukować przesunięcia układu.

Personalizacja treści pod źródła ruchu

Jeśli korzystasz z kampanii PPC, rozważ stworzenie dwóch wariantów strony głównej: bardziej sprzedażowej dla ruchu płatnego i informacyjnej dla ruchu organicznego. W multistore zrobisz to niezależnie, a w pojedynczym sklepie – warunkowo w TPL (np. na podstawie parametru kampanii) lub przez dedykowany moduł, pamiętając o wydajności.

Diagnostyka, gdy zmiana nie działa

• Sprawdź, czy modyfikowany plik naprawdę jest używany przez aktywny motyw (czasem edytujesz plik w innym motywie).
• Upewnij się, że pamięć podręczna została wyczyszczona i TPL zostały rekompilowane.
• Wyłącz kolejno moduły, aby wykluczyć konflikt CSS/JS.
• Włącz tryb debug i sprawdź konsolę błędów w przeglądarce oraz logi serwera.

Porządek informacji na pierwszym ekranie

Ułóż hierarchię: na górze wartość dla klienta (USP, rabat, dostawa), następnie nawigacja do kategorii i wybrane produkty. Ogranicz liczbę decyzji na starcie – mniej sekcji to szybsze wybory. Dbaj o spójność typografii, rozmiary przycisków i czytelne CTA.

Warianty sezonowe i kampanijne

Przygotuj sekcję sezonową, którą włączysz kilkoma kliknięciami przed kampanią. W praktyce: oddzielny moduł banera lub HTML z grafiką i linkami do kategorii, przypięty do displayHomeTop. Po sezonie po prostu go wyłączysz, nie modyfikując plików.

Pomiary i ciągłe doskonalenie

Po wprowadzeniu zmian wykonaj testy A/B najważniejszych sekcji. Sprawdź, które ułożenie kafli, liczba produktów w wierszu czy pozycja banera wpływają na współczynnik konwersji i średnią wartość koszyka. Powtarzaj cykl: pomiar – hipoteza – zmiana – weryfikacja.

Checklist przed publikacją

• Widoczność kluczowych sekcji w mobile i desktop.
• Spójne marginesy i interlinie, brak przycinanych elementów.
• Obrazy zoptymalizowane, lazy load poza pierwszym ekranem.
• Brak błędów w konsoli i szybkie pierwsze wrażenie (LCP, CLS, TBT).
• Włączone buforowanie, kompilacja TPL ustawiona na produkcję.

Zaawansowane: własny moduł sekcji

Jeśli potrzebujesz w pełni kontrolować sekcję strony głównej, napisz prosty moduł: zarejestruj go w displayHome, zbuduj konfigurator w panelu (np. pole tytułu, obrazy, linki), a wyświetlanie zrealizuj w pliku TPL. Dzięki temu zyskasz edytowalną sekcję, którą przestawisz w Pozycjach i przeniesiesz między sklepami.

Utrzymanie i aktualizacje

Po każdej aktualizacji modułów i motywu sprawdź stronę główną – nowe wersje mogą zmieniać klasy CSS i markup. Dlatego trzymaj stylowanie w odrębnych plikach, a zmiany w TPL minimalizuj do niezbędnych. Dokumentuj decyzje dotyczące układu i powody, dla których coś znalazło się wyżej lub niżej na stronie.

Najczęstsze pułapki

• Zbyt wiele elementów fold-out i karuzel działających jednocześnie spowalnia stronę.
• Duplikacja treści: ten sam blok w Page Builderze i w module – usuń jeden z nich.
• Stylowanie w wielu miejscach naraz prowadzi do konfliktów – konsoliduj reguły.
• Brak testów w Safari i Firefox – pamiętaj o zgodności między przeglądarkami.

Kiedy skorzystać z developera

Jeżeli potrzebujesz niestandardowego rozkładu sekcji z warunkową logiką, integracji danych w czasie rzeczywistym (np. dynamiczne kolekcje) lub głębokiej optymalizacji wydajności, rozważ wsparcie specjalisty. Ustal z góry zakres, kryteria akceptacji i sposób weryfikacji szybkości po wdrożeniu.

Najlepsze praktyki wizualne

Stosuj jeden dominujący kolor akcentowy, czytelne CTA, konsekwentne marginesy pionowe i poziome oraz maksymalnie dwa kroje pisma. Używaj zdjęć o spójnej estetyce i podobnych kadrach. Sekcje oddzielaj wyraźną różnicą tła lub dystansem, zamiast ornamentów.

SEO na stronie głównej

Zadbaj o unikalny H1 z najważniejszym słowem kluczowym, poprawne meta dane oraz logiczną strukturę nagłówków H2/H3 w treści. Unikaj nadmiernego duplikowania opisów kategorii. Linkuj do kluczowych sekcji sklepu już z homepage, co ułatwia robotom indeksację i wzmacnia przepływ PageRanku.

Kontrola jakości po wdrożeniu

• Przegląd różnorodnych urządzeń: iOS/Android, małe i duże ekrany.
• Test klikalności i dostępności: focus, tab, aria-labels.
• Monitoring błędów w narzędziach analitycznych i raportach Search Console.
• Przegląd czasów ładowania po 24–48 godzinach od publikacji (cache CDN, przeglądarki).

Plan ewolucji układu

Zachowaj elastyczność: buduj homepage z klocków, które łatwo przestawiać. Stosuj moduły lub własne bloki osadzone w hookach. Dzięki temu w przyszłości szybko zareagujesz na sezon, promocję czy nowe kategorie – bez generalnego remontu kodu.

Najważniejsze zasady na koniec dnia

• Bezpieczeństwo: backup i środowisko testowe przed poważniejszymi zmianami.
• Porządek: motyw potomny i spójne miejsce na własne style.
• Wydajność: ogranicz liczbę sekcji i ciężkich obrazów.
• Kontrola: regularne pomiary UX i SEO, weryfikacja w narzędziach deweloperskich.

Słowniczek praktyka

• displayHome – główny obszar strony głównej, do którego podpinasz sekcje.
• Pozycje – panel zarządzania kolejnością i przypięciami modułów do hooków.
• TPL – pliki widoków motywu, kompilowane przez silnik szablonów.
• custom.css – plik na własne reguły stylów w motywie.
• Multistore – mechanizm wielu sklepów na jednej instalacji z własnymi układami.

Dlaczego drobne zmiany często dają najwięcej

Rearanżacja kilku sekcji, skrócenie hero i lepsze linkowanie do kategorii potrafią podnieść konwersję bardziej niż rozbudowany redesign. Zaczynaj od szybkich wygranych, mierz efekt i dopiero później inwestuj czas w głębsze prace w motywie i TPL.

Rozsądny kompromis między designem a szybkością

Piękny, ale ciężki wizualnie homepage może hamować sprzedaż na mobile. Trzymaj równowagę: minimalizuj skrypty, ogranicz liczbę ciężkich sekcji nad pierwszym ekranem, dbaj o stabilność układu i ogrzewaj zdjęcia w przeglądarce przez odpowiednie formaty oraz cache.

Kroki kontrolne po każdej iteracji

• Sprawdź render w 3 przeglądarkach i 3 szerokościach ekranu.
• Zrób krótkie badanie klikalności heatmapą lub nagraniami sesji.
• Porównaj metryki konwersji tydzień do tygodnia, aby wyłapać trend.
• Zapisz w changelogu, jakie zmiany wprowadziłeś i dlaczego.