Jak zmienić szablon w PrestaShop

Zmiana wyglądu sklepu w PrestaShop to jedna z najszybszych dróg do poprawy konwersji i odświeżenia marki. Dobrze dobrany szablon (czyli motyw) wpływa na ergonomię, szybkość i pozycjonowanie. Poniżej znajdziesz instrukcję krok po kroku: od przygotowania i tworzenia kopii zapasowej, przez instalację i aktywację, aż po konfigurację, optymalizację oraz rozwiązywanie typowych problemów. Niezależnie od wersji (1.6, 1.7, 8.x) przeprowadzisz proces bezpiecznie i metodycznie.

Przygotowanie przed zmianą szablonu

Sprawdź wersję i zgodność

Zacznij od identyfikacji wersji sklepu: Zaloguj się do panelu, przejdź do Ustawienia zaawansowane > Informacje. Zwróć uwagę na główne wydanie (np. 1.7.8.x lub 8.1.x). Każdy motyw wspiera określone wydania i komponenty. W opisie motywu poszukaj informacji o zgodnośći z Twoją wersją. Pomiń motywy bez jasnej informacji o wsparciu: mogą generować błędy w koszyku, checkout lub panelu.

Kopia zapasowa i środowisko testowe

Przed instalacją wykonaj pełny backup: plików (katalog sklepu) i bazy danych. Jeśli to możliwe, utwórz środowisko staging (subdomena lub lokalna kopia) i testuj zmianę właśnie tam. Dzięki temu na produkcji unikniesz przestojów. W sytuacji braku stagingu ustal okno serwisowe o niskim ruchu i przygotuj plan szybkiego przywrócenia.

• Zrzut bazy (np. przez narzędzie panelu hostingu).
• Kopia katalogów: themes/, modules/, img/, upload/, override/, var/ lub cache/ (zależnie od wersji).
• Sprawdzenie miejsca na serwerze i wersji PHP zalecanej przez motyw.

Lista kontrolna wymagań serwera

Zweryfikuj minimalne wymagania: wersję PHP, limity pamięci, rozszerzenia (np. intl, gd, zip), włączone gzip i cache po stronie serwera. Motywy premium często potrzebują określonych bibliotek lub wyższej wersji PHP. Upewnij się też, że mechanizmy bezpieczeństwa (mod_security, reguły WAF) nie blokują uploadu paczek ZIP.

Wybór szablonu – co ocenić

Poza wyglądem zwróć uwagę na:

• Politykę aktualizacji i wsparcia technicznego ze strony autora.
• Zgodność z głównymi modułami: płatności, dostawy, marketplace, page builder.
• Wydajność: liczba zapytań, rozmiar JS/CSS, lazy loading, preloading zasobów.
• Dostępność: kontrast, obsługa klawiaturą, aria-labels.
• Elastyczność ustawień, eksport/import konfiguracji motywu.

Poproś o wersję demo panelu, aby ocenić wygodę konfiguracji i spójność UX.

Struktura paczki motywu

Typowa paczka ZIP zawiera folder główny motywu (themes/nazwa_motywu) z plikami szablonów (templates lub .tpl), zasobami (assets/css, assets/js, img) oraz plik konfiguracyjny theme.yml (1.7/8.x). W motywach premium znajdziesz też folder z powiązanymi modułami. Upewnij się, że paczka przeznaczona jest do importu w panelu lub do ręcznego wgrania przez FTP – autor zwykle podaje jedną z metod.

Instalacja i aktywacja z poziomu panelu (zalecana)

Import paczki ZIP

W PrestaShop 1.7/8.x przejdź do: Wygląd > Motywy i logo (lub Design > Theme & Logo). Wybierz Dodaj motyw, wskaż plik ZIP i rozpocznij import. System rozpozna theme.yml, powiązane moduły i zaproponuje ich instalację. W 1.6 ścieżka nazywa się często Preferencje > Motywy; proces jest podobny. Po zakończeniu w kreatorze zobaczysz ekran aktywacji.

• Jeśli import nie przechodzi: sprawdź limit upload_max_filesize i post_max_size w PHP.
• Duże paczki wgrywaj przez FTP do themes/, a w panelu tylko aktywuj (patrz niżej).

Wybór sklepu w trybie multistore

Jeśli używasz wielu sklepów, włącz selektor sklepu w nagłówku panelu i wybierz instancję, dla której instalujesz motyw. Aktywacja w niewłaściwym sklepie to częsta pomyłka prowadząca do niespójności. Po imporcie i instalacji przypisz motyw do właściwej karty sklepu.

Instalacja i pozycje modułów

Podczas aktywacji motywu kreator zaproponuje instalację, włączenie lub wyłączenie modułów oraz przypisanie ich do hooków. Zaakceptuj rekomendacje autora motywu; w razie wątpliwości wykonaj zrzuty ekranu bieżących pozycji modułów (Wygląd > Pozycje). Poprawne podpięcie do hooki decyduje o kompletności układu strony głównej, koszyka i checkoutu.

Regeneracja miniaturek i czyszczenie cache

Po aktywacji przejdź do Wygląd > Obrazy i zregeneruj miniatury dla produktów, kategorii i producentów. Następnie wejdź do Parametry zaawansowane > Wydajność i wyczyść cache. W razie potrzeby włącz tymczasowo tryb kompilacji szablonów (Force compile), aby wymusić odświeżenie. Po testach wróć do ustawień produkcyjnych.

Szybki audyt po aktywacji

Przejrzyj najważniejsze widoki: strona główna, listing kategorii, karta produktu, koszyk, checkout, konto klienta. Sprawdź formularze, walidacje, powiadomienia i komunikaty o błędach. Upewnij się, że logotyp i favicon są widoczne, a menu i stopka zawierają właściwe linki. Zwróć uwagę na różne rozdzielczości ekranów i podstawowe testy szybkości.

Ręczna instalacja przez FTP/SFTP

Rozpakowanie i umieszczenie plików

Gdy panel odrzuca duże paczki, użyj FTP/SFTP:

• Rozpakuj ZIP lokalnie.
• Prześlij folder motywu do katalogu themes/ na serwerze.
• Jeśli paczka zawiera moduły, wgraj je do modules/ (zachowaj ostrożność, aby nie nadpisać krytycznych modyfikacji; wykonaj kopię).

Po transferze wróć do panelu: Wygląd > Motywy i logo, w sekcji Dostępne motywy powinien pojawić się nowy motyw. Wybierz Aktywuj. W multistore upewnij się, że aktywujesz go dla właściwego sklepu.

Uprawnienia i integralność plików

Sprawdź uprawnienia: katalogi zwykle 755, pliki 644. Niewłaściwe uprawnienia mogą blokować zapisy do /img, /var, kompilację i generowanie szablonów. Przy problemach z widokiem frontu sprawdź, czy katalogi cache/ lub var/cache są zapisywalne i czy roboty systemowe mogą tworzyć foldery.

Aktywacja i konfiguracja po transferze

Po aktywacji motywu włącz zalecane moduły. W wielu motywach znajdziesz dedykowane konfiguratory układu (np. builder strony głównej). Zachowaj kolejność działań: najpierw podstawowa aktywacja i hooki, potem treści i bloki, na końcu stylizacja (kolory, czcionki).

Wymuszenie kompilacji i czyszczenie

W Parametry zaawansowane > Wydajność włącz tymczasowo Force compile i wyłącz cache na czas prac, po czym odśwież front sklepu kilkukrotnie. Po weryfikacji koniecznie przywróć ustawienia produkcyjne, aby uniknąć spowolnień. W razie problemów usuń ręcznie katalog var/cache/prod oraz var/cache/dev (w 1.6: cache/smarty/) i sprawdź, czy odtwarzają się poprawnie.

Rozwiązywanie konfliktów

Gdy po aktywacji znikną elementy (np. koszyk w headerze), najczęściej winne są konfliktujące pozycje modułów. Przejdź do Wygląd > Pozycje i porównaj podpięcia z instrukcją motywu. Jeśli brakuje hooka, sprawdź, czy motyw dostarcza plików szablonów dla tego obszaru i czy moduł wspiera dany hook. Przy błędach kompilacji przejrzyj logi w var/logs i włącz tryb debug.

Dostosowanie i optymalizacja po zmianie motywu

Logo, kolory, typografia i układ

Wejdź do Wygląd > Motywy i logo, dodaj logo nagłówka, faktur i favicon. Kolory i czcionki skonfigurujesz w panelu motywu lub w narzędziu Personalizacja (jeśli dostępne). Ustal spójny system odstępów, siatkę kolumn i wysokości obrazów. Sprawdź, czy rozdzielczość obrazów produktowych pasuje do miniatur; w razie potrzeby dostosuj i zregeneruj.

Tłumaczenia i treści statyczne

W Międzynarodowy > Tłumaczenia wybierz Tłumaczenia motywów, język i wprowadź brakujące frazy. Zadbaj o poprawny ton komunikatów (błędy, walidacje) i zgodność formalną. Zaktualizuj stronę regulaminu, politykę prywatności i dostawy. Pamiętaj, że niektóre motywy mają własne pliki tłumaczeń – edytuj je w panelu, a nie bezpośrednio w plikach, aby zachować odporność na aktualizacje.

Pozycje modułów i hooki

Ułóż moduły w hookach: displayHeader, displayTop, displayHome, displayFooter, displayProductAdditionalInfo, displayCheckout. Przesuwaj je strzałkami lub przeciągaj, testując wpływ na UX. Niepotrzebne moduły wyłącz lub odinstaluj. Zachowaj minimum elementów na stronie głównej – krótszy czas ładowania pomaga SEO i konwersji.

Sekcja wydajności: cache i kompilacja

W Parametry zaawansowane > Wydajność ustaw: CCC (łączenie i minimalizacja CSS/JS), pamięć podręczną, opcje Smarty. W produkcji włącz cache, wyłącz Force compile i ustaw kompilację na Tylko jeśli zaktualizowano pliki. Zwróć uwagę na integrację z CDN i preloading krytycznych zasobów (fonty, kluczowe CSS). Monitoruj TTFB i rozmiar pakietów JS.

Motyw potomny i bezpieczne modyfikacje

Zamiast edytować pliki motywu głównego, utwórz motyw potomny. Dzięki temu aktualizacje motywu nie nadpiszą Twoich modyfikacji. W motywie potomnym nadpisujesz wybrane szablony i zasoby, pozostawiając resztę po stronie rodzica. Unikaj ciężkich nadpisań klas – minimalizujesz ryzyko konfliktów i skracasz czas utrzymania.

Smarty i debugowanie szablonów

Podczas prac deweloperskich skorzystaj z mechanizmów Smarty: włącz tryb debug w Parametry zaawansowane > Wydajność, a na czas diagnozy ustaw Force compile. Sprawdzaj, które szablony .tpl są renderowane, i upewnij się, że motyw potomny je poprawnie nadpisuje. Po zakończeniu testów wróć do ustawień produkcyjnych.

Dostosowanie CSS/JS i kontrola konfliktów

Dodawaj własne style do pliku custom.css lub dedykowanego arkusza motywu potomnego. Unikaj modyfikacji vendorowych bibliotek. Dla JS używaj hooków do wstrzyknięcia skryptów i unikaj globalnych kolizji nazw. Testuj w trybie prywatnym przeglądarki i czyść pamięć podręczną, aby wykluczyć cache przeglądarki.

SEO i dane strukturalne

Sprawdź znaczniki tytułu, opisy meta i nagłówki H1/H2 na kluczowych stronach. Upewnij się, że motyw renderuje dane strukturalne (BreadcrumbList, Product, Offer, AggregateRating). Zadbaj o optymalizację obrazów (formaty nowej generacji, kompresja) i atrybuty alt. Skonfiguruj przyjazne adresy URL i mapę strony.

Responsywność i dostępność

Zweryfikuj responsywność na popularnych urządzeniach: telefony, tablety, laptopy. Sprawdź gesty, klikalność elementów, wielkość pól dotykowych. Przeprowadź szybki audyt dostępności: focus states, kontrasty, label dla formularzy, opisy przycisków. To poprawi UX i wspiera pozycjonowanie.

Aktualizacje i zgodność w czasie

Regularna aktualizacja motywu i modułów zapobiega problemom bezpieczeństwa i zapewnia kompatybilność z nowymi wersjami PrestaShop. Zanim zaktualizujesz, sprawdź changelog, wykonaj kopię i przetestuj na stagingu. Po aktualizacji przejdź przez checklistę: koszyk, checkout, płatności, wysyłka, konta klientów, generowanie dokumentów PDF.

Najczęstsze problemy i ich rozwiązania

• Biały ekran po aktywacji: włącz tryb debug w app/config/parameters (1.7/8.x: plik .env lub ustawienia w panelu), sprawdź błędy w logach.
• Rozjechany układ: brak skompilowanych CSS/JS – włącz kompilację i wyczyść cache; sprawdź, czy pliki assets są dostępne (status 200).
• Brak modułu w hooku: dołącz go w Wygląd > Pozycje; jeśli hook nie istnieje w motywie, dodaj odpowiedni blok w szablonie lub skorzystaj z alternatywnego hooka.
• Wolne ładowanie: ogranicz liczbę sliderów, wideo w tle, ciężkie biblioteki; włącz lazy loading, kompresję i CDN.
• Konflikt z modułem płatności: przywróć domyślne pliki checkout motywu lub sprawdź instrukcje kompatybilności autora modułu.

Multistore: klonowanie i różnicowanie

W trybie multistore możesz przypisać różne motywy do różnych sklepów. Po zmianie motywu w sklepie B pamiętaj o własnych tłumaczeniach, menu i blokach CMS. Jeśli chcesz przyspieszyć konfigurację, skorzystaj z funkcji kopiowania ustawień modułów między sklepami (gdy moduł to wspiera) – mimo to zawsze zweryfikuj widoki i obrazy.

Checklisty kontrolne po wdrożeniu

Przed przełączeniem ruchu na nowy motyw wykonaj listę kontrolną:

• Koszyk: dodawanie, aktualizacja ilości, usuwanie, kody rabatowe, koszty dostawy.
• Checkout: rejestracja, logowanie, płatności online, płatności offline, waluty, podatki.
• Karta produktu: warianty, kombinacje, ceny promocyjne, dostępność, koszty dostawy, opinie.
• Listing: filtrowanie, sortowanie, stronicowanie, parametry SEO (meta, canonical).
• Panel admina: generowanie faktur, etykiet przewozowych, statusy zamówień.
• Wydajność: TTFB, LCP, CLS, rozmiar strony, liczba zapytań HTTP.

Polityka wersjonowania i praca zespołowa

Jeśli rozwijasz motyw, wprowadź system wersjonowania (np. Git) i branchowanie: main dla produkcji, develop dla stagingu. Zmieniaj pliki w motywie potomnym, commituj małe porcje pracy, opisuj je jasno. Używaj tagów wydań i changelogów. Testy regresji po każdym mergu pozwalają wcześnie wychwycić problemy.

Bezpieczeństwo i zgodność prawna

Zadbaj o politykę cookies, banery informacyjne i mechanizmy zgód. Upewnij się, że motyw nie ładuje zewnętrznych zasobów bez uzasadnienia (mapy, fonty) – w niektórych jurysdykcjach wymaga to zgód. Monitoruj podatności modułów związanych z motywem, aktualizuj je niezwłocznie. W razie wątpliwości przeglądaj logi i konfigurację nagłówków bezpieczeństwa (CSP, HSTS, X-Frame-Options).

Integracje i testy końcowe

Zweryfikuj integracje: ERP, kurierzy, marketing automation, piksele reklamowe. Po zmianie motywu sprawdź, czy skrypty śledzące działają (eventy zakupowe, view_item). W narzędziach analitycznych ustaw adnotację o dacie wdrożenia – ułatwi to analizę wahań konwersji.

Monitorowanie po starcie

Po publikacji obserwuj wskaźniki: współczynnik odrzuceń, czas na stronie, konwersje, porzucone koszyki. Ustal alerty monitoringu dostępności i szybkości (syntetyczne testy co 5–15 minut). Szybkie reakcje na spadki KPI minimalizują straty sprzedażowe.

Najlepsze praktyki utrzymania

• Dokumentuj niestandardowe zmiany i podłączone hooki.
• Noś poprawki w motywie potomnym; unikaj modyfikacji rdzenia.
• Testuj aktualizacje na stagingu, dopiero potem na produkcji.
• Planuj regularne przeglądy wydajności i dostępności.

Pamiętaj, że dobrze wykonana zmiana motywu to nie tylko nowa warstwa wizualna, ale również porządek w warstwie technicznej: kompilacja szablonów, konfiguracja hooki, optymalny cache i procesy CI/CD. Dbałość o te elementy zapewnia stabilność, skalowalność i łatwość przyszłych modyfikacji, a konsekwentne aktualizacje gwarantują długofalową kompatybilność i zadowolenie klientów.