Logo w PrestaShop zmienia się w jednym miejscu — Wygląd > Motyw i logo, gdzie logo jest jedną z sekcji — ale tylko wtedy, gdy motyw nie nadpisuje go własnym plikiem. Wgranie grafiki 2000 px i 800 KB to najczęstszy błąd: rozjeżdża nagłówek na mobile i pogarsza LCP oraz CLS. Poniżej masz wymiary, formaty i kolejność działań od backupu do weryfikacji frontu, a także diagnostykę, gdy logo nie chce się pokazać. Sam proces zajmuje zwykle 10–20 minut i nie wymaga programisty, jeśli wiesz, gdzie szukać. Punkt startowy dla wdrożeń PrestaShop opisujemy w naszym hubie: PrestaShop.
W PrestaShop 1.7 i 8 logo nagłówka ustawiasz w panelu: Wygląd > Motyw i logo, a samo logo jest jedną z sekcji tej strony. W starszych wersjach (1.6) ta pozycja siedzi w Preferencje > Motyw, a w panelach opisywanych jako „Konfiguracja sklepu” — pod „Wygląd”. Nazwy menu różnią się między wersjami i językami panelu, ale zasada jest stała: jedno pole na wgranie pliku plus kilka osobnych ustawień.
Rozróżnij cztery miejsca, bo ich mieszanie to najczęstsza przyczyna zdania „wgrałem logo, a na fakturze dalej jest stare”:
/img/ (np. logo.png, a w multistore nazwa może zawierać ID sklepu).Druga sprawa: motyw może w ogóle nie korzystać z pliku z panelu. Wtedy logo siedzi w themes/twoj-motyw/templates/_partials/header/logo.tpl albo bezpośrednio w header.tpl, a obrazek leży w themes/twoj-motyw/assets/img/. Jeśli pracujesz na child theme, nadpisanie trzymaj w motywie potomnym — aktualizacja motywu nadrzędnego nie skasuje wtedy Twojej zmiany. Trzeci wariant: część motywów konfiguruje logo przez własny moduł („theme settings”, konfigurator motywu), a pole w Wygląd > Motyw i logo nie robi nic.
Punkt startowy dla całego wdrożenia, w tym kwestii motywu i plików, opisujemy w hubie PrestaShop — wdrożenia, moduły i konfiguracja sklepu.
Każdy motyw ma własne zalecenie, które zobaczysz pod polem uploadu w panelu, ale liczby poniżej sprawdzają się w praktyce w większości nagłówków. Punkt wyjścia: logo poziome o szerokości 200–400 px, przygotowane w wersji 2x dla ekranów retina (np. plik 400×100 px przy docelowym wyświetlaniu 200×50 px).
Formaty: PNG z przezroczystością to bezpieczny domyślny wybór. SVG działa w nowoczesnych motywach i skaluje się bez utraty jakości, ale panel PrestaShop często nie przyjmuje SVG w polu uploadu — wtedy wgrywasz plik przez FTP i podmieniasz ścieżkę w szablonie. WebP lub JPG stosuj tylko wtedy, gdy logo ma jednolite tło i nie potrzebujesz przezroczystości. Trzymaj wagę pliku w przedziale 100–200 KB; pliki powyżej 500 KB to najczęstsza przyczyna rozjechanego nagłówka na mobile i gorszego LCP oraz CLS — mechanikę tych wskaźników opisuje dokumentacja Google Search Central o Core Web Vitals.
Proporcje: logo poziome (np. 3:1 lub 4:1) wpasowuje się w nagłówek bez kombinowania. Logo pionowe lub kwadratowe prawie zawsze wymaga osobnego szablonu albo mniejszego wariantu mobilnego, bo przy stałej wysokości nagłówka rozepchnie menu i wyszukiwarkę. Przy podmianie pliku zadbaj też o atrybuty width i height w znaczniku obrazu — bez nich przeglądarka nie zarezerwuje miejsca i elementy obok logo będą skakać podczas ładowania.
| Zastosowanie | Szerokość (px) | Format | Maks. waga pliku |
|---|---|---|---|
| Logo nagłówka (desktop) | 200–400 | PNG, SVG, WebP | 100–200 KB |
| Wersja 2x dla retina | 400–800 | PNG, WebP, SVG | do 200 KB |
| Logo nagłówka (mobile) | 150–250 | PNG, SVG | do 100 KB |
| Logo nadawcy e-mail | 200–600 | PNG (bez animacji) | do 100 KB |
| Logo na fakturze PDF | 300–600 | PNG lub JPG | do 150 KB |
| Favicon | 32×32 | ICO lub PNG | do 20 KB |
Cała operacja to 10–20 minut, o ile trzymasz się kolejności. Kroki:
/img/ oraz /themes/twoj-motyw/ (FTP albo SSH). Zanim cokolwiek nadpiszesz, miej z czego wrócić.logo-2024.png.var/cache), twarde odświeżenie przeglądarki (Ctrl+Shift+R) oraz purge w CDN, jeśli go używasz — nagłówki cache opisuje MDN Web Docs – HTTP.src obrazu: jeśli wskazuje na /img/logo.png, działa ustawienie z panelu; jeśli na /themes/.../assets/img/, motyw nadpisuje logo i trzeba podmienić plik w motywie.Jeśli planujesz przebudowę sklepu albo zmianę motywu przy okazji logo, kolejność prac opisujemy w tekście PrestaShop co to jest? Organizacja wdrożenia krok po kroku.
Jeśli po wgraniu nowego logo na froncie nadal widzisz starą grafikę albo pusty prostokąt, problem rzadko leży w samym pliku. Poniżej sześć kroków w kolejności, w jakiej realnie znajdują przyczynę.
Kolejność ma znaczenie: zanim zaczniesz grzebać w szablonach, wyklucz uprawnienia i cache — to większość takich zgłoszeń.
| Objaw na froncie | Najczęstsza przyczyna | Co zrobić |
|---|---|---|
| Stara grafika mimo podmiany | Cache CDN, Smarty lub przeglądarki | Purge CDN, wyczyść cache PrestaShop i var/cache/prod |
| Pusty prostokąt, brak obrazka | Zła nazwa lub ścieżka pliku | Porównaj src z F12 > Elements z zawartością /img/ |
| Ikona z przekreśleniem, 403 | Uprawnienia 600 lub właściciel root | chmod 644 na pliku, 755 na katalogu /img/ |
| Logo wraca do domyślnego po zapisie | Motyw nadpisuje je w child theme | Wgraj plik do katalogu child theme, nie tylko do rodzica |
Logo w panelu to nie jedno ustawienie, a co najmniej cztery niezależne miejsca. Właściciele sklepów odkrywają to dopiero wtedy, gdy klient dostanie potwierdzenie zamówienia ze starym znakiem albo fakturę z czarnym prostokątem w nagłówku.
Najczęstsza niedoróbka: nowe logo WWW wgrane, a mail, PDF i favicon zostały ze starego znaku. Ustaw wszystkie cztery elementy w jednym podejściu — zajmuje to kilkanaście minut, a wychodzi dopiero przy pierwszym zamówieniu klienta.
| Miejsce | Plik lub panel | Format i rozmiar |
|---|---|---|
| /img/logo-email.png, szablony w /mails/pl/ | PNG do 300 px szerokości, przezroczyste tło, wypełniony alt | |
| Faktura PDF | /pdf/logo.jpg, Ustawienia > Szablony faktur | JPG 200–300 px, 300 dpi, białe tło (nie PNG) |
| Favicon | /img/favicon.ico, site.webmanifest | 32×32 .ico, 180×180 PNG dla Apple, 192 i 512 px PNG |
Logo Twojego sklepu i oficjalne logo PrestaShop to dwie różne rzeczy. Pierwsze jest Twoją własnością, drugie to znak towarowy PrestaShop SA i podlega osobnym zasadom.
Bezpieczne zastosowania:
Czego unikać:
Zanim użyjesz znaku, sprawdź oficjalne wytyczne PrestaShop (Brand Guidelines) — regulują kolory, minimalny rozmiar i margines wokół logotypu. Jeśli działasz w programie partnerskim, prawo do znaku przysługuje Ci wyłącznie w zakresie opisanym w jego regulaminie.
To nie jest porada prawna. Przy sporze albo planach rejestracji znaku skonsultuj się z prawnikiem ds. własności intelektualnej — zastosowanie ma tu również ustawa o zwalczaniu nieuczciwej konkurencji, a wprowadzenie klienta w błąd co do producenta oprogramowania może być podstawą roszczenia.
W praktyce: nazwę domeny, identyfikację wizualną i wzmianki o oprogramowaniu ustal na etapie planowania — znajdziesz je w materiale organizacja wdrożenia PrestaShop krok po kroku.
Kolejność działań jest ważniejsza niż sama podmiana pliku: najpierw gotowy plik, potem panel, na końcu cache. Jeśli pominiesz czyszczenie cache, uznasz, że zmiana nie zadziałała, choć logo jest już wgrane.
Zacznij od pliku. W praktyce wystarcza SVG albo PNG eksportowany w 2x — szerokość 400–600 px przy docelowej wysokości logo w nagłówku 40–60 px i waga do 100 KB. Plik 2000 px i 800 KB to najczęstszy błąd: rozjeżdża nagłówek na mobile i pogarsza wskaźniki ładowania. Logo w nagłówku bywa największym elementem pierwszego ekranu, więc realnie wpływa na LCP i CLS — to elementy Core Web Vitals raportowanych w Search Console.
Poniższa tabela to 12 punktów do odklikania po kolei.
| Punkt | Co sprawdzić | Gdzie / jak |
|---|---|---|
| 1. Plik źródłowy | SVG lub PNG eksportowany w 2x | Szerokość 400–600 px, waga do 100 KB |
| 2. Warianty pliku | Poziomy na desktop, kwadratowy pod mobile, wersja na ciemne tło | Jeden plik na wariant, spójne nazwy |
| 3. Panel PrestaShop | Wygląd > Motyw i logo > sekcja Logo | Wgraj plik, ustaw szerokość/wysokość, Zapisz |
| 4. Cache PrestaShop | Stary obrazek zostaje w katalogu cache | Zaawansowane > Wydajność > Wyczyść cache |
| 5. Cache przeglądarki | Plik o tej samej nazwie bywa ignorowany | CTRL+F5 lub okno incognito |
| 6. Desktop 1440 px | Logo nie rozpycha nagłówka, menu zostaje w jednej linii | DevTools, widok 1440 px |
| 7. Mobile 375 px | Logo nie wchodzi pod hamburger i nie zasłania koszyka | DevTools lub realny telefon |
| 8. Favicon | Karta przeglądarki i skrót na telefonie | 32x32 px plus apple-touch-icon 180x180 px |
| 9. Logo w e-mailach | To zwykle osobny plik motywu, nie ustawienie nagłówka | Wyślij testowe zamówienie i sprawdź treść maila |
| 10. Logo na PDF | Dokumenty generowane po stronie serwera | Wygeneruj fakturę testową i zajrzyj do katalogu pdf w motywie |
| 11. Waga i LCP | Logo w nagłówku często jest elementem LCP | DevTools > Network oraz PageSpeed Insights |
| 12. CLS | Brak zarezerwowanego miejsca przesuwa treść | Atrybuty width/height lub aspect-ratio w CSS |
W większości sklepów zmiana logo to kwadrans w panelu. Są jednak sytuacje, w których kliknięcie „Zapisz” nic nie zmieni, bo front bierze grafikę z plików motywu, a nie z ustawień.
| Sytuacja | Dlaczego panel nie wystarczy | Co przygotować |
|---|---|---|
| Child theme (motyw potomny) | header.tpl bywa nadpisany i ma logo wpisane na sztywno w kodzie | Nazwę motywu potomnego i informację, czy header.tpl był modyfikowany |
| SVG w motywie ze starym szablonem | Motywy pisane pod PrestaShop 1.6 często przyjmują tylko PNG | Plik SVG oraz PNG w 2x i docelową wysokość logo w px |
| Multistore (2 i więcej sklepów) | Ustawienie logo jest kontekstowe dla sklepu, a motyw może być wspólny | Listę sklepów, konteksty i przypisane domeny |
| Nadpisania w header.tpl, logo.tpl | Panel zapisuje plik, ale front korzysta z wersji z szablonu | Dostęp FTP/SFTP i informację o ostatnich zmianach w motywie |
| CDN przed sklepem | Plik o tej samej nazwie zostaje w cache na wiele godzin | Nazwę dostawcy CDN i dostęp do jego panelu |
Wgranie do nagłówka pliku 1500–2000 px i ważącego kilkaset KB. Sklep się otwiera, ale logo dociska layout na telefonie i opóźnia wczytanie największego elementu widoku.
Jak wykryć: Zakładka Network w przeglądarce (filtr Img): plik logo ma wagę powyżej 300–500 KB albo szerokość kilku tysięcy pikseli. W PageSpeed Insights logo pojawia się jako element wpływający na LCP.
Jak naprawić: Przeskaluj grafię do 200–400 px szerokości, wersja 2x dla ekranów retina to maksymalnie ok. 400×100 px, gdy docelowo wyświetlasz 200×50 px. Waga pliku 100–200 KB to bezpieczny pułap. Podstaw nowy plik w Wygląd > Motyw i logo, zapisz i wyczyść cache.
Zmiana pliku w panelu bez czyszczenia cache. Front pokazuje starą grafikę, więc ktoś wgrywa ją po raz trzeci albo czwarty i dokłada kolejne pliki do katalogu.
Jak wykryć: W panelu podglądasz nowe logo, a na stronie widzisz stare. W trybie incognito jest już nowe — to znak, że problem siedzi w cache przeglądarki lub CDN, a nie w ustawieniach.
Jak naprawić: Wyczyść cache w Zaawansowane > Wydajność (także cache Smarty), następnie wykonaj purge w CDN (Cloudflare, LiteSpeed, Varnish). Na końcu odśwież stronę w incognito.
Logo wpisane na sztywno w plikach motywu — templates/_partials/header/logo.tpl, header.tpl albo w child theme. Zmiana w panelu nic nie daje, bo szablon w ogóle nie czyta ustawienia.
Jak wykryć: Kliknij logo prawym przyciskiem i wybierz Zbadaj. W źródle strony zobaczysz ścieżkę pliku inną niż logo z katalogu /img/ — np. plik leżący bezpośrednio w katalogu motywu.
Jak naprawić: Edytuj właściwy plik w child theme (nie w motywie nadrzędnym, bo aktualizacja go nadpisze) i podmień odwołanie do grafiki. Jeśli motyw ma konfigurator, zmień logo tam.
Traktowanie logo jako jednego ustawienia. Nagłówek, nadawca e-mail, faktura PDF i favicon to cztery niezależne miejsca — zmiana pierwszego nie rusza pozostałych.
Jak wykryć: Klient pisze, że na fakturze i w mailu nadal jest stary znak firmowy, choć na stronie wszystko wygląda dobrze. Tak samo favicon w karcie przeglądarki pozostaje bez zmian.
Jak naprawić: Ustaw każde miejsce osobno: logo nagłówka w Wygląd > Motyw i logo, logo e-mail i logo faktury w tej samej sekcji, a favicon również tam. Po zmianie wygeneruj testowe potwierdzenie zamówienia i testową fakturę PDF.
Pominięcie konfiguratora motywu i modułów, które nadpisują nagłówek. Logo zmienia się w panelu, ale na stronie nic się nie dzieje, bo wygrywa ustawienie z modułu.
Jak wykryć: W konfiguratorze motywu (albo w ustawieniach modułu budującego nagłówek) jest osobne pole na logo, wypełnione starą grafiką. Front ładuje właśnie ten plik.
Jak naprawić: Podmień grafikę w tym polu albo wyłącz nadpisywanie logo w module i pozwól motywowi korzystać z ustawienia globalnego. Po zmianie wyczyść cache.
Edycja plików motywu bezpośrednio na produkcji, bez backupu i bez środowiska testowego. Literówka w pliku szablonu potrafi wyłączyć sklep na kilkanaście minut.
Jak wykryć: Brak kopii plików i bazy sprzed zmiany. Każda poprawka idzie od razu na działający sklep, bez etapu testowego.
Jak naprawić: Zrób kopię plików i bazy przed edycją, pracuj na child theme i najlepiej na kopii sklepu (staging). Zmiany wgrywaj partiami, po każdej sprawdzając stronę główną, kartę produktu i koszyk.
Logo w PrestaShop zmieniasz w Wygląd > Motyw i logo, ale tylko wtedy, gdy motyw nie nadpisuje go własnym plikiem. Trzymaj się trzech liczb: 200–400 px szerokości, wersja 2x dla retina i waga poniżej 200 KB — to wystarcza, żeby nie psuć nagłówka ani Core Web Vitals. Po podmianie zawsze wyczyść cache PrestaShop, Smarty, CDN i przeglądarki, a stronę sprawdź w incognito i na telefonie. Pamiętaj, że logo w mailu, na fakturze i favicon to osobne ustawienia.
W PrestaShop 1.7 i 8 podstawowe miejsce to Wygląd > Motyw i logo, gdzie logo jest jedną z sekcji obok faviconu i logo do e-maili oraz faktur. W starszych wersjach ustawienie bywa opisane jako Konfiguracja sklepu > Wygląd lub Preferencje > Szablony. Jeśli po zapisaniu nic się nie zmienia, sprawdź child theme oraz pliki header.tpl i logo.tpl — tam logo może być wpisane na sztywno.
Dla nagłówka przyjmij 200–400 px szerokości, a plik przygotuj w wersji 2x, czyli np. 400×100 px przy docelowym wyświetlaniu 200×50 px. Waga pliku powinna mieścić się w 100–200 KB — wszystko powyżej 500 KB niemal zawsze pogarsza LCP. Logo pionowe rzadko pasuje do standardowego nagłówka i zwykle wymaga osobnego szablonu lub mniejszego wariantu mobilnego.
Tak, ale tylko wtedy, gdy motyw obsługuje SVG i sam go nie przetwarza na bitmapę. Wiele motywów PrestaShop generuje miniatury logo w stałych wymiarach, więc plik SVG i tak zostanie wyrenderowany jako PNG. Przed wdrożeniem sprawdź w źródle strony, jaki plik faktycznie trafia do przeglądarki. Szczegóły techniczne znajdziesz w dokumentacji dla deweloperów PrestaShop.
W 8 na 10 przypadków winny jest cache — PrestaShop, Smarty, CDN albo przeglądarka. Zacznij od Zaawansowane > Wydajność, potem wykonaj purge w CDN, a na końcu sprawdź stronę w trybie incognito. Jeśli i to nie pomaga, motyw lub moduł nadpisuje logo własnym plikiem. Wtedy pomaga dopiero podmiana grafiki w child theme lub w konfiguratorze motywu.
Nie. To cztery niezależne miejsca: logo nagłówka, logo nadawcy e-mail, logo na fakturze PDF i favicon. Każde ustawiasz osobno, w tej samej sekcji panelu lub w plikach w katalogu /img/. Po zmianie złóż zamówienie testowe i wygeneruj fakturę próbną — inaczej dowiesz się o starym logo dopiero z maila od klienta.
Kliknij logo prawym przyciskiem myszy i wybierz Zbadaj element, a potem przejdź do zakładki Network i odśwież stronę. Zwróć uwagę na ścieżkę pliku: jeśli prowadzi do katalogu motywu, a nie do /img/, to motyw ma logo wpisane na sztywno w szablonie. Wtedy edytujesz plik w child theme, a nie w panelu.
Błąd 404 oznacza, że przeglądarka szuka pliku, którego nie ma pod wskazanym adresem — najczęściej po zmianie nazwy albo po wgraniu grafiki w inne miejsce. Błąd 403 to zwykle kwestia uprawnień: plik powinien mieć 644, a katalog 755. Sprawdź też, czy CDN nie trzyma starego odwołania i czy reguły przepisywania adresów w .htaccess nie blokują katalogu /img/.
Jeśli logo nie chce się podmienić, motyw nadpisuje szablon albo chcesz przy okazji poprawić szybkość sklepu — napisz do nas. Zajmiemy się tym razem z resztą wdrożenia: PrestaShop.