Motyw Hummingbird w PrestaShop 9 – jak dostosować wygląd sklepu
Personalizacja kolorów, logo, czcionek i układu strony w domyślnym motywie PS9 bez pisania kodu
Spis treści
- Co to jest motyw Hummingbird?
- Dostosowanie logo i kolorów sklepu
- Konfiguracja strony głównej i banerów
- Ustawienie czcionek i typografii
- Hummingbird a Core Web Vitals i SEO
- Często zadawane pytania
Co to jest motyw Hummingbird?
Motyw Hummingbird w PrestaShop 9 to domyślny szablon graficzny sklepu, który zastąpił motyw Classic z PrestaShop 1.7. Hummingbird został zaprojektowany od podstaw z myślą o wydajności, responsywności i nowoczesnym wyglądzie.
Kluczowe cechy motywu Hummingbird:
Wydajność i szybkość – Hummingbird minimalizuje ilość kodu CSS i JavaScript, co przekłada się na szybsze ładowanie stron. Zoptymalizowany pod kątem Core Web Vitals Google (LCP, FID, CLS).
Responsywność – motyw działa doskonale na wszystkich urządzeniach: desktopach, tabletach i smartfonach. Implementuje podejście mobile-first.
Nowoczesny design – czysty, minimalistyczny wygląd skupiający uwagę klienta na produktach, a nie na ozdobnikach interfejsu.
Wsparcie WebP i AVIF – motyw automatycznie serwuje obrazy w nowoczesnych formatach (WebP, AVIF) dla przeglądarek, które je obsługują, zmniejszając rozmiar strony.
Dostosowanie logo i kolorów sklepu
Pierwszym krokiem personalizacji sklepu jest dodanie własnego logo i dostosowanie palety kolorów do identyfikacji wizualnej marki.
Przejdź do Wygląd > Motywy i logo. W sekcji Logo kliknij Wybierz plik i prześlij logo w formacie PNG lub SVG (zalecane przezroczyste tło). Optymalne logo ma szerokość 200–400px i wysokość proporcjonalną.
W tej samej sekcji Motywy i logo prześlij favicon w formacie .ico, .png lub .svg (rozmiar 32x32 lub 64x64 px). Favicon wyświetla się na zakładce przeglądarki i w wynikach wyszukiwania.
Przejdź do Wygląd > Konfiguracja motywu. W sekcji Kolory zmień kolor akcentu (główny kolor przycisków, linków), kolor tła nagłówka i stopki. Zmiany są widoczne od razu w podglądzie na żywo.
Po wprowadzeniu zmian kliknij Zapisz. Przejdź do Zaawansowane > Wydajność i wyczyść cache Smarty, aby zmiany były widoczne na stronie frontowej sklepu.
Konfiguracja strony głównej i banerów
Strona główna sklepu to wizytówka Twojego biznesu. Hummingbird umożliwia konfigurację sekcji strony głównej przez wbudowane moduły.
Przejdź do Moduły > Menedżer modułów i znajdź moduł Image Slider. Kliknij Konfiguruj i dodaj slajdy z obrazami (zalecane 1920x600px), tytułami i linkami do kategorii lub produktów.
Moduł Custom HTML Block pozwala dodać własne sekcje HTML z ofertami, bannerami promocyjnymi lub informacjami o sklepie. Możesz rozmieścić bloki w różnych pozycjach na stronie głównej.
Moduł Produkty wyróżnione (Featured Products) wyświetla wybrane produkty na stronie głównej. Zaznacz produkty jako "Wyróżnione" w ich konfiguracji lub przypisz je do kategorii głównej.
Ustawienie czcionek i typografii
Hummingbird używa systemowych czcionek domyślnie (co zapewnia szybkie ładowanie), ale możesz zmienić czcionki na Google Fonts lub własne fonty.
Zmiana czcionek przez CSS – Aby zmienić czcionkę w Hummingbird, przejdź do Wygląd > Konfiguracja motywu > Zaawansowane CSS i dodaj własne reguły CSS z importem Google Font:
Przykład: dodaj import czcionki Roboto i zastosuj ją globalnie przez nadpisanie rodziny czcionek. Takie nadpisanie CSS jest bezpieczne i nie wymaga edycji plików motywu.
Rozmiary czcionek – Hummingbird używa responsywnych rozmiarów czcionek (rem/em). Unikaj ustawiania stałych rozmiarów w pikselach, które mogą wyglądać źle na urządzeniach mobilnych.
Hummingbird a Core Web Vitals i SEO
Jedną z największych zalet motywu Hummingbird jest jego optymalizacja pod kątem Core Web Vitals – metryk Google mierzących doświadczenie użytkownika na stronie.
Largest Contentful Paint (LCP) – Hummingbird implementuje lazy loading dla obrazów i preloading kluczowych zasobów, co przyspiesza wyświetlenie głównego elementu strony.
Cumulative Layout Shift (CLS) – motyw rezerwuje miejsce dla ładowanych obrazów, eliminując "skakanie" zawartości strony podczas ładowania.
Interaction to Next Paint (INP) – minimalna ilość JavaScript w Hummingbird sprawia, że interakcje użytkownika są szybkie i płynne.
Aby sprawdzić wyniki Core Web Vitals swojego sklepu, użyj narzędzia PageSpeed Insights (pagespeed.web.dev) lub Google Search Console > Core Web Vitals.
Często zadawane pytania
Czym jest motyw Hummingbird w PrestaShop 9?
Hummingbird to domyślny motyw (szablon graficzny) PrestaShop 9, zastępujący Classic z PS 1.7. Jest zoptymalizowany pod kątem Core Web Vitals Google, responsywny na urządzeniach mobilnych, lekki (minimalna ilość CSS i JS), wspiera nowoczesne formaty obrazów WebP i AVIF. Jest dostępny bezpłatnie dla wszystkich sklepów PS9 i można go znacząco dostosować wizualnie bez pisania kodu.
Czy mogę używać własnego motywu zamiast Hummingbird w PS9?
Tak, PrestaShop 9 obsługuje motywy innych firm dostępne w PrestaShop Addons Marketplace i u niezależnych dostawców. Jednak wiele starych motywów dla PS 1.7 może nie być kompatybilnych z PS9 ze względu na zmiany w architekturze. Zawsze sprawdź informację o kompatybilności z PS9 przed zakupem motywu. Hummingbird z personalizacją kolorów i logo jest dobrym startowym rozwiązaniem dla nowych sklepów.
Jak dodać własne logo do sklepu PrestaShop 9?
Aby dodać logo w PrestaShop 9: przejdź do Wygląd > Motywy i logo. W sekcji "Logo" kliknij "Wybierz plik" i prześlij plik logo w formacie PNG lub SVG (zalecane przezroczyste tło PNG lub wektorowe SVG). Optymalne wymiary logo to 200-400px szerokości. Możesz też osobno ustawić logo wyświetlane na fakturach i e-mailach, a także favicon widoczny na zakładce przeglądarki.
Zobacz też
Uruchom sklep z nowoczesnym motywem Hummingbird!
Hosting PrestaShop 9 od SMARTX zawiera gotowy sklep z motywem Hummingbird – szybkim, responsywnym i zoptymalizowanym pod SEO.
Zamów hosting PrestaShop 9
