Pasek informacyjny PrestaShop: komunikat na górze każdej strony sklepu

Do czego służy pasek z komunikatem na górze strony?

Do jednej informacji, która zmienia decyzję klienta, zanim ten zacznie szukać produktu. Klient widzi pasek na stronie głównej, w kategorii, na karcie produktu i w koszyku, więc nie musi trafiać na konkretną stronę, żeby się o czymś dowiedzieć.

Typowe treści paska:

• próg darmowej dostawy („Darmowa dostawa od 199 zł”),
• termin wysyłki („Zamówienia do 14:00 wysyłamy tego samego dnia”),
• przerwa w wysyłkach („Paczki z długiego weekendu wyślemy we wtorek”),
• ostatni dzień zamówień przed świętami.

Kwoty i godziny w przykładach są przykładowe. W pasku wpisuj tylko to, co jest ustawione w sklepie. Gdy pasek obiecuje darmową dostawę od 199 zł, a przewoźnik w koszyku liczy ją od 250 zł, klient poczuje się oszukany w ostatnim kroku. Jak ustawić sam próg, opisujemy w tekście o darmowej dostawie od kwoty.

Trzy sposoby na pasek informacyjny w PrestaShop

Wybierz sposób według tego, jak często zmieniasz tekst i jaki masz motyw.

PrestaShop ma na górze strony miejsce przeznaczone na banery. Dokumentacja dla programistów opisuje je przy miejscu displayBanner jako „samą górę każdej strony”. Moduły pasków zwykle podpinają się właśnie tam. Które moduły są w tym miejscu u ciebie, sprawdzisz w Wygląd → Pozycje, opisanym w instrukcji pozycji modułów.

Wpis w szablonie robi się w motywie potomnym, nie w motywie głównym. Gdy dopiszesz pasek w plikach motywu głównego, następna aktualizacja motywu go usunie. Budowę motywu potomnego opisuje dokumentacja PrestaShop o motywach potomnych. Co się dzieje ze zmianami po aktualizacji, wyjaśniamy w tekście aktualizacja szablonu usunęła zmiany.

Jak dodać pasek w szablonie krok po kroku?

Ta droga wymaga dostępu do plików motywu. Jeśli nie pracujesz w plikach na co dzień, zrób to z kimś, kto pracuje, albo z Claude'em.

1. Sprawdź, czy sklep ma motyw potomny. Jeśli nie, utwórz go, zanim zmienisz pierwszy plik.
2. Zrób kopię pliku nagłówka motywu (w Classic to szablon nagłówka strony).
3. Dopisz nad nagłówkiem jeden blok z tekstem komunikatu i własną klasą, na przykład top-info-bar.
4. W pliku custom.css motywu potomnego ustaw kolor tła, kolor tekstu, mały rozmiar czcionki i wyśrodkowanie.
5. Dodaj regułę dla wąskich ekranów, żeby tekst zawijał się zamiast wychodzić poza ekran.
6. Wyczyść pamięć podręczną w Zaawansowane → Wydajność.
7. Otwórz sklep w oknie prywatnym i na telefonie. Sprawdź stronę główną, kategorię, kartę produktu i koszyk.

W sklepie z kilkoma językami tekst wpisany na stałe w szablon pokaże się w jednym języku wszystkim. Wtedy wygodniejszy jest moduł z polem na każdy język albo tekst przez tłumaczenia motywu.

Jak ma wyglądać pasek na telefonie?

Pasek na telefonie zajmuje cenne miejsce nad produktem, więc musi być niski. Dwie linie to granica. Trzy linie spychają nazwę produktu i cenę w dół ekranu.

Na co zwrócić uwagę:

• Kontrast. Biały tekst na jasnym tle, na przykład na żółci, jest słabo czytelny w słońcu. Wybierz ciemne tło i jasny tekst albo odwrotnie.
• Rozmiar czcionki. Za mały tekst klient przybliża palcami. Mały, ale nie mniejszy niż reszta drobnego tekstu w sklepie.
• Bez przewijanego napisu. Przesuwający się tekst trudno przeczytać i męczy oczy.
• Przycisk zamknięcia tylko z pamięcią. Jeśli pasek da się zamknąć, powinien zostać zamknięty na kolejnych stronach. Inaczej klient zamyka go na każdej stronie od nowa.
• Osobna reguła dla wąskich ekranów. Na telefonie zmniejsz odstępy i pozwól tekstowi się zawinąć. Taką regułę zamykasz w bloku działającym tylko poniżej wybranej szerokości ekranu, opisanym w przewodniku MDN po zapytaniach o media.

Jak dbać o pasek po jego dodaniu?

Pasek, którego nikt nie pilnuje, szybko zaczyna kłamać. Promocja się skończyła, próg dostawy się zmienił, a na górze sklepu dalej wisi stary tekst. Klient czyta go jako obietnicę.

Trzy proste zasady:

• przy każdej zmianie cennika dostawy albo terminów wysyłki sprawdź też pasek,
• komunikat sezonowy usuń albo podmień w dniu końca akcji, nie tydzień później,
• gdy pasek jest pusty, nie zostawiaj pustego kolorowego paska; ukryj go całkiem.

Gdy pasek źle wygląda na telefonie, poprawkę opisujemy osobno w tekście o widoku mobilnym PrestaShop. Kolory przycisków i innych elementów zmienisz według tekstu o zmianie koloru przycisku.

Jak dodać pasek informacyjny z Claude?

Piszesz, jaki komunikat chcesz i jak ma wyglądać. Claude sprawdza motyw, ustala, czy jest motyw potomny i czy w górnym miejscu strony nie działa już moduł z podobnym paskiem. Potem pokazuje zmianę w plikach przed zapisem.

Ty

Dodaj cienki pasek na samej górze każdej strony: „Darmowa dostawa od 199 zł”. Ciemne tło, mały tekst, wyśrodkowany.

Claude

Sprawdziłem ustawienia dostawy: darmowa dostawa jest ustawiona od 199 zł brutto, więc tekst się zgadza. Motyw potomny już jest. Dopiszę pasek nad nagłówkiem i style w custom.css:

było: (brak paska)

będzie: <div class="top-info-bar">Darmowa dostawa od 199 zł</div>

będzie: .top-info-bar { background: #1f2937; color: #fff; font-size: 13px; text-align: center; padding: 6px 12px; }

Przed zapisem zrobię kopię obu plików, potem wyczyszczę pamięć podręczną i sprawdzę stronę główną.

Ty

Tak.

Claude

Zapisane. Pasek jest na stronie głównej i na karcie produktu. Na telefonie mieści się w jednej linii.

Gdy pasek nie będzie już potrzebny, poprosisz o jego usunięcie tak samo. Claude przywróci pliki z kopii albo usunie sam blok, też z podglądem. Przykład prośby jest w zastosowaniu pasek z komunikatem na całej stronie.

Zmiany w plikach motywu działają w TellMyShop Pro po włączeniu przełącznika Motyw w panelu modułu. Przełącznik działa 24 godziny i wymaga kopii bazy zrobionej tego samego dnia. Każda zmiana trafia do historii zmian, a większość zmian cofniesz jednym poleceniem. W darmowej wersji TellMyShop Free Claude przeczyta raporty sklepu i doradzi, ale niczego nie zapisze. Porównanie wersji jest w cenniku, a inne poradniki o wyglądzie sklepu znajdziesz na blogu.