Jak zmienić logo w szablonie PrestaShop

Zmiana logotypu w sklepie to jedna z pierwszych czynności po starcie projektu – wpływa na rozpoznawalność marki, spójność wizualną i zaufanie klientów. W tym poradniku krok po kroku pokażę, jak wgrać i wyświetlić własne logo w panelu administracyjnym oraz bezpośrednio w plikach motywu, a także jak zadbać o wersje do e‑maili, PDF i urządzeń mobilnych. Znajdziesz tu także wskazówki dotyczące jakości grafiki, optymalizacji wydajności oraz pracy w trybie wielosklepowym. PrestaShop daje kilka wygodnych dróg – wybierz tę najlepszą dla Twojego zespołu.

Jak działa logo i przygotowanie do bezpiecznej zmiany

Rozpoznanie wersji systemu i motywu

Zanim cokolwiek zmienisz, sprawdź wersję oprogramowania i aktywny motyw. W szablonie typu Classic (PrestaShop 1.7/8) domyślne pliki i ścieżki różnią się od tych z 1.6, a panele administracyjne mają inne nazwy sekcji. Zwróć uwagę, czy korzystasz z motywu potomnego (child), frameworka UI (np. Bootstrap), narzędzi typu Page Builder oraz czy dostawca motywu nie nadpisuje standardowych plików nagłówka. To określi, czy wystarczy zmiana w panelu, czy potrzebna będzie edycja plików .tpl i zasobów graficznych.

Wymagania wobec pliku graficznego

• Format: preferowany PNG (przezroczystość), dopuszczalne JPG i SVG (jeśli motyw przewiduje). Niektóre instalacje blokują SVG w uploaderze – obsługę można dodać ręcznie w motywie.
• Wymiary: projektuj pod szerokość nagłówka i wysokość paska menu. Zwykle sprawdza się 200–300 px szerokości przy proporcjonalnej wysokości 40–80 px. Zadbaj o wariant 2x dla ekranów wysokiej gęstości.
• Waga: po optymalizacji (np. TinyPNG, Squoosh) zwykle 10–50 kB. Lekkie logo przyspiesza ładowanie i poprawia Core Web Vitals.
• Tło: przezroczyste na jasnych/ciemnych motywach; w razie potrzeby przygotuj dwie wersje (light/dark).

Kopia zapasowa i środowisko testowe

Wykonaj backup plików i bazy lub pracuj na kopii środowiska (staging). Włącz tryb debug tylko na testach. Jeśli używasz systemu kontroli wersji, odseparuj zmiany w osobnym branchu, by łatwiej je zreviewować i wdrożyć przez CI/CD.

Uprawnienia i dostęp

• Konto administratora w panelu, dostęp SFTP/SSH do serwera, ewentualnie dostęp do panelu CDN.
• Znajomość struktury katalogów motywu: themes/nazwa_motywu/ oraz publicznych zasobów grafiki w assets/img lub img/.
• Uprawnienia do zapisu w katalogach cache i var (przy czyszczeniu pamięci podręcznej).

Zmiana logo z poziomu panelu administracyjnego

Wgrywanie logo sklepu (frontend) – PrestaShop 1.7 i 8

Najwygodniejszą metodą jest użycie dedykowanej strony ustawień. Przejdź: Design > Theme & Logo. W sekcji dotyczacej logotypów znajdziesz pola do wgrania grafik:

• Logo w nagłówku – odpowiada za wygląd na stronie głównej i wszystkich podstronach.
• Favicon – mała ikonka widoczna na karcie przeglądarki; plik ICO, PNG lub SVG (zależnie od motywu).
• Logo wiadomości e‑mail – obrazek osadzany w szablonach powiadomień.
• Logo dokumentów (faktury/zwroty) – grafika osadzana w PDF.

Wgraj pliki, zapisz zmiany i odśwież stronę. Jeśli nie widzisz efektów, przejdź do sekcji o czyszczeniu pamięci podręcznej.

Wgrywanie logo – PrestaShop 1.6

Przejdź: Preferencje > Motywy. Znajdziesz tu analogiczne pola do wgrania logotypów dla frontu, e‑maili i dokumentów. Po zapisie zmian odśwież cache i stronę, aby zobaczyć nowe logo.

Logo w e‑mailach i PDF – niuanse

W PrestaShop 1.7/8 zdefiniowanie logo e‑mail i logo dokumentów zwykle wystarcza. Gdy używasz niestandardowych szablonów e‑mail, sprawdź: Design > Email Theme. Po zmianie logo możesz zregenerować szablony, by odzwierciedlić aktualny wygląd. PDF-y korzystają z ustawień logo i konfiguracji firmy; w razie potrzeby sprawdź także parametry w sekcji zamówień (Order Settings) – niektóre motywy lub moduły faktur mają własne szablony i ustawienia.

Logo w panelu administracyjnym

Back office wyświetla miniaturę logo w nagłówku. W 1.7/8 również skonfigurujesz je w Design > Theme & Logo. Jeśli dostawca motywu back office wprowadził własne ustawienia, znajdziesz je zwykle w Module Manager lub dodatkowym panelu ustawień.

Czyszczenie pamięci podręcznej po zmianie

Jeżeli po wgraniu grafiki nadal widnieje stary logotyp, wykonaj:

• Advanced Parameters > Performance > Clear cache (Wyczyść pamięć podręczną).
• W razie pracy deweloperskiej: włącz Force compile i wyłącz cache na czas testów.
• Jeśli używasz CDN lub reverse proxy (np. Cloudflare), wyczyść cache również tam.

W ostateczności opróżnij katalogi var/cache lub app/cache (w zależności od wersji), zachowując ostrożność i uprawnienia.

Zmiana logo bezpośrednio w plikach motywu

Lokalizacja plików i zasobów

Typowe ścieżki w PrestaShop 1.7/8:

• themes/classic/templates/_partials/header.tpl – znacznik wyświetlający logo w nagłówku.
• themes/classic/assets/img/logo.png – domyślny plik z logotypem motywu Classic.
• themes/nazwa_motywu/assets/img/ – folder na grafiki motywu niestandardowego.

W 1.6 ścieżki często wskazują na img/logo.jpg lub pliki zdefiniowane w header.tpl. W motywach Premium nagłówek może być rozbity na więcej plików i wstrzykiwany przez moduł (np. moduł menu/megamenedżer), wtedy ścieżka do logo może znajdować się w folderze modułu.

Edycja znacznika obrazka w .tpl

W pliku header.tpl lub _partials/header.tpl znajdziesz fragment generujący logo, np.:

img src=”{$shop.logo}” alt=”{$shop.name}” loading=”eager”

lub odwołanie do ścieżki motywu. Jeśli chcesz wymusić inne rozszerzenie (np. SVG) lub dodać atrybuty width/height, wykonaj to tutaj. Po zmianach skompiluj szablony i wyczyść cache. Dla SVG pamiętaj o poprawnym viewBox oraz CSS dopasowującym wysokość w pasku nagłówka.

Praca z motywem potomnym

Zalecane jest tworzenie motywu potomnego, by nie tracić zmian po aktualizacji. Skopiuj strukturę plików, które chcesz nadpisać (np. templates/_partials/header.tpl), umieść je w themes/nazwa_child/ i ustaw motyw potomny jako aktywny. W przypadku aktualizacji motywu bazowego Twoje zmiany pozostaną nienaruszone.

Wersje 2x i retina

Aby logo wyglądało ostro na ekranach HiDPI, przygotuj wariant o podwójnej rozdzielczości. W znaczniku możesz skorzystać z atrybutu srcset:

img src=”/assets/img/logo.png” srcset=”/assets/img/logo@2x.png 2x” alt=”Nazwa sklepu”

Jeśli zastosujesz SVG, zazwyczaj nie potrzebujesz wariantu 2x, bo grafika wektorowa skaluje się bezstratnie. Upewnij się, że CSS nie wymusza niepożądanych przeskalowań.

Dostosowanie styli i ograniczeń wielkości

W Motywie Classic rozmiar logo ogranicza CSS w nagłówku. Znajdziesz reguły w themes/nazwa_motywu/assets/css/theme.css lub w SASS/SCSS (np. _header.scss). Jeżeli logo jest za duże lub za małe, popraw maksymalne wysokości (max-height) oraz marginesy. Następnie przebuduj CSS:

• Narzędzie buildujące (npm/yarn) jeśli motyw je dostarcza.
• Ręczne minifikowanie i podmiana pliku CSS, jeśli build nie jest dostępny.

Zmiana tekstu alternatywnego i linkowania

Dla dostępności i SEO uzupełnij atrybut alt nazwą sklepu lub krótkim opisem. Sprawdź, czy logo linkuje do strony głównej – to standard użyteczności. Unikaj tekstów dekoracyjnych w alt; postaw na informacyjne treści i czytelne kontrasty w kolorystyce.

Najczęstsze problemy przy edycji plików

• Zmiany nie widoczne – brak kompilacji szablonów lub aktywna pamięć podręczna.
• Deformacja – ograniczenia CSS (max-height) lub wymuszone marginesy/wyśrodkowanie.
• Nieobsługiwany SVG – filtr MIME, brak wsparcia w uploaderze; wstaw grafikę przez plik .tpl.
• Nadpisy z modułów – moduł header/mega menu może generować własny blok logo; ustal priorytet i wyłącz duplikaty.

Wielosklep, dodatkowe miejsca i optymalizacja

Tryb wielosklepowy i różne logotypy

Jeżeli korzystasz z multistore, włącz odpowiedni kontekst sklepu (górny pasek w panelu: Wszystkie sklepy / Grupa / Ten sklep) przed wgraniem loga. Każdy sklep może mieć odrębny zestaw: logo frontu, e‑maili, PDF i favicon. Pamiętaj o spójności nazwy alt oraz konsekwentnym nazewnictwie plików – ułatwi to zarządzanie i wdrażanie przez CI/CD.

Favicon i ikony aplikacyjne

Mała ikonka w karcie przeglądarki znacząco poprawia rozpoznawalność. W 1.7/8 wgrasz ją w Design > Theme & Logo. Warto przygotować komplet ikon dla PWA i iOS (manifest.json oraz apple-touch-icon), jeżeli motyw i infrastruktura to przewidują. W razie niestandardowych potrzeb dodaj link rel w header.tpl i umieść pliki w assets/img/icons. Słowo favicon często oznacza też zestaw favicon-32.png, favicon-16.png, favicon.svg – trzymaj porządek w nazwach.

Logo w dodatkowych miejscach: stopka, strona 404, moduły

Niektóre motywy mają osobne konfiguracje logo w stopce, na stronie 404, w pop‑upach czy w modułach newsletter. Sprawdź ustawienia w Module Manager – sekcje: Footer, Newsletter, Cookie Bar. Jeśli nie ma opcji graficznej, dodaj blok obrazka w odpowiednim hooku (np. displayFooter) albo rozszerz szablon modułu, zachowując najlepsze praktyki aktualizacji.

CDN, proxy i pamięć podręczna

Po podmianie grafiki uruchom pełną invalidację cache:

• Panel: Clear cache.
• CDN: purge według ścieżki lub całkowite (w razie wątpliwości).
• HTTP: sprawdź nagłówki Cache-Control i ETag dla obrazków.

Jeśli używasz Media Server/Host statyczny, zweryfikuj, czy nowy plik został zsynchronizowany na wszystkich węzłach. Zbyt agresywne TTL może opóźnić widoczność nowego logotypu o wiele godzin.

Wydajność i kompresja grafiki

Wdrożenie nowego logo to dobry moment, by poprawić wydajność:

• Kompresja lossless dla PNG, właściwy poziom dla JPG (około 70–80 jakości).
• Konwersja do SVG, jeśli logo ma proste kształty i nie wymaga bitmapy.
• Lazy loading nie zawsze ma sens dla logo – jako element LCP lepiej ładować eager.
• Preload dla kluczowych zasobów w head, jeśli testy WPO wskażą zysk.

Testy responsywności i dostępności

Sprawdź wygląd na telefonach, tabletach i monitorach o dużej gęstości pikseli. Upewnij się, że kontrast logo i tła zapewnia czytelność. Dodaj focus i hover dla linku logo, aby wskaźniki dostępności były spełnione. Testy Lighthouse i Wave pomogą wyłapać problemy z alt, rolą oraz rozmiarem dotykowych celów.

E-maile i PDF – kontrola końcowego efektu

Wyślij testowy e‑mail (Account creation, Order confirmation) i pobierz przykładową fakturę/zwrot. Sprawdź skalowanie, ostrość i tło. Niektóre klienty pocztowe kompresują obrazy – umieść logo o odpowiedniej wielkości, by nie tracić ostrości. W PDF pamiętaj, że generatory używają innych DPI; dopasuj rozmiar i porównaj kilka wersji, aby uniknąć rozmycia.

Najczęstsze błędy i ich diagnoza

• Logo się nie aktualizuje – przeglądarkowy cache, CDN lub katalogi cache na serwerze; wymuś odświeżenie i wyczyść pamięć podręczną.
• Przeskalowanie i pikselizacja – brak wariantu 2x lub niewłaściwy rozmiar źródłowy.
• Brak alt – obniżona dostępność; uzupełnij w .tpl lub konfiguracji.
• Nadpisy z motywu – sprawdź kolejność hooków i pliki w motywie potomnym.
• SVG niewidoczne – brak width/height lub viewBox; dodaj do pliku i CSS.

Gdzie jeszcze może pojawiać się logo

Oprócz nagłówka i stopki, logo bywa użyte w:

• Stronie utrzymaniowej (maintenance) – konfiguracja wyglądu może korzystać ze starszego pliku logo.
• Modułach marketplace/checkout – wtyczki płatności czasem wstawiają logo sklepu w rachunkach e‑mail.
• Open Graph/Twitter Cards – miniatury w social media nie zawsze korzystają z logo, ale warto dodać spójny obrazek w meta tagach.

Uwagi dla zespołów i procesów wdrożeniowych

Zdefiniuj standard: nazwy plików, miejsce przechowywania źródeł (np. repo Brand), workflow zmian (ticket, PR, review), harmonogram purge CDN i testy smoke po wdrożeniu. Dla sklepów wielojęzycznych pamiętaj o wersjach regionalnych, jeśli logo zawiera tekst. Zadbaj także o zgodność prawno‑autorską i licencje użytych fontów w znakach graficznych.

Dodatkowe wskazówki techniczne

• Jeżeli korzystasz z routera obrazów, sprawdź minifikację i wersjonowanie plików (query string lub hash).
• By uniknąć problemów z przeglądarkową pamięcią, zmień nazwę pliku (np. logo-v2.png) przy każdej aktualizacji.
• W motywach z builderem sekcja logo może być blokiem statycznym – edytuj go w konfiguratorze motywu.

Integracja z hookami i modułami

Logo zwykle renderowane jest przez hook w nagłówku. W razie potrzeby możesz dodać własny blok lub zastąpić istniejący. Pamiętaj, że niektóre motywy ładują logo z konfiguracji modułu. Słowo hook oznacza tu punkt zaczepienia, który możesz wykorzystać do wstrzyknięcia alternatywnej zawartości w nagłówku bez edytowania rdzenia motywu.

Utrzymanie i dokumentacja

Spisz krótką instrukcję: gdzie wgrywać pliki, jak czyścić cache, jakie są rekomendowane rozmiary i formaty. Zapisz datę ostatniej zmiany, autora i kontekst (np. kampania sezonowa). Dokumentacja ogranicza chaos i przyspiesza kolejne modyfikacje.

Kontrola jakości i bezpieczeństwo

Unikaj wgrywania plików SVG z niepewnego źródła – oczyść je (SVGO) i zweryfikuj zawartość. Upewnij się, że uprawnienia do katalogów z grafiką nie są zbyt szerokie. Regularnie sprawdzaj logi błędów, aby wykryć problemy z serwowaniem zasobów statycznych.

Wersje mobilne i dostęp dotykowy

Logo na telefonach powinno zachowywać czytelność i proporcje. Zadbaj o właściwe marginesy w stosunku do ikon koszyka i menu. Przetestuj różne układy (logo wyśrodkowane vs. przy lewej krawędzi). Jeżeli motyw wspiera osobne logo mobilne, wgraj je i dopasuj rozmiar CSS w breakpointach.

Aktywne modyfikacje stylów w panelu

Część motywów oferuje pole na własny CSS w panelu. To szybki sposób na korektę wysokości logo bez ingerencji w pliki. Dodaj np.:

.header-logo img { max-height: 56px; height: auto; }

Po zapisaniu znów wyczyść cache i przetestuj w głównych przeglądarkach.

Moduły i kompatybilność

Jeśli moduł modyfikuje nagłówek (sticky header, megamenu), sprawdź jego ustawienia logotypu. Nierzadko posiada własne pole do wgrania grafiki. Ustal, czy nadpisuje logo globalne, czy tylko w określonych układach (np. transparentny header na stronie głównej).

Ręczne podmiany plików i prawa dostępu

Wymieniając plik w themes/nazwa_motywu/assets/img/ zwróć uwagę na prawa (np. 644) i właściciela. Zrestartuj procesy cache’ujące (PHP-FPM, Varnish) jeśli środowisko jest zaawansowane. Gdy plik nie ładuje się, sprawdź błędy w konsoli i odpowiedzi serwera (404/403).

Spójność z innymi materiałami marki

Nowe logo powinno korespondować z banerami, miniaturami produktów, grafiką social media i opakowaniami. Zadbaj o siatkę brandu: marginesy ochronne, minimalną wielkość, paletę barw oraz wariant monochromatyczny. To ułatwi późniejsze realizacje kampanii i edycje sezonowe.

Konfiguracja alternatywnych formatów

Coraz częściej stosuje się WebP. Jeśli używasz WebP dla obrazów produktowych, zastanów się, czy wprowadzać WebP także dla logo. W przypadku wektorowego znaku lepszym wyborem pozostaje SVG. Dla szerokiej kompatybilności utrzymuj PNG jako fallback.

Kiedy ingerować w pliki, a kiedy w panel

Jeśli aktualizujesz logo rzadko i chcesz minimum pracy – panel administracyjny w zupełności wystarczy. Jeżeli potrzebujesz pełnej kontroli (SVG, srcset, a11y, preload) – edytuj pliki motywu lub motyw potomny. Pamiętaj, że zmiany w kodzie wymagają procesu review i testów regresji.

Zmiana logo a dostosowania językowe

Logo z tekstem bywa kłopotliwe dla wielu języków. Rozważ wersję neutralną językowo i dodanie tłumaczeń w alt. Gdy to niemożliwe, utwórz różne pliki dla języków i warunkowo ładuj je w .tpl, sprawdzając aktualny kontekst języka.

Ścieżki i stałe konfiguracyjne

System przechowuje odnośniki do logotypów w konfiguracji. W nowoczesnych wersjach w panelu zobaczysz podgląd i przycisk resetu. Upewnij się, że po migracji sklepu ścieżki są poprawne. Jeśli używasz stałych (np. w modułach), zaktualizuj ich wartości po podmianie pliku.

Praca z pamięcią podręczną przeglądarki

By wymusić szybkie odświeżenie u użytkowników, wersjonuj zasoby (logo-v3.png) i używaj nagłówków z krótkim cache dla plików często zmienianych. W przeciwnym razie stare logo może utrzymywać się mimo odświeżania strony.

Porządek w repozytorium i nazewnictwie

Stosuj spójne nazwy: logo.png jako główne, logo@2x.png dla HiDPI, logo-mobile.png dla nagłówka mobilnego. Przechowuj źródła (AI, SVG) w osobnym folderze brand, a do motywu dostarczaj zoptymalizowane, produkcyjne wersje.

Wersje testowe i feature flags

W dużych zespołach wprowadzaj zmiany logo przez feature flagi i preview environment. Dzięki temu marketing oceni efekt przed publikacją, a Ty bezpiecznie przełączysz się na nową grafikę w ustalonym terminie, bez ryzyka cache misfire.

Diagnostyka końcowa

Po wdrożeniu otwórz stronę w trybie Incognito, sprawdź Developer Tools: zakładka Network powinna pokazać aktualny plik logo z poprawnym kodem odpowiedzi i nagłówkami. Zbadaj rozmiar i czas ładowania. Przetestuj na kilku urządzeniach i sieciach, aby potwierdzić, że najnowsza wersja jest serwowana.

Na koniec pamiętaj o spójności terminologii w zespole: logo to znak graficzny firmy; motywie pracujesz nad warstwą prezentacji; pliki przechowuj w odpowiednim katalogu; po zmianach czyszczona jest pamięć cache; w wielosklepowości multistore pozwoli rozdzielić konfiguracje; ikona favicon uzupełnia zestaw materiałów; wariant retina poprawia ostrość; wstrzykiwanie w punkt zaczepienia hook umożliwia elastyczne modyfikacje, a szablonie zarządzasz strukturą widoków bez dotykania logiki aplikacji.