HTML Blocks: dodawanie własnych treści w dowolnym miejscu sklepu PrestaShop

Ostatnia aktualizacja: czerwiec 2026, nazwy hooków i tabela natywnych modułów poniżej dotyczą PrestaShop 1.7, 8 i 9. W nowoczesnych panelach administracyjnych pozycjami zarządza się w sekcji Wygląd → Pozycje.

Prędzej czy później każdy sklep PrestaShop trafia na ten sam problem: potrzebujesz fragmentu treści w miejscu, którego szablon po prostu nie przewidział. Pasek z darmową dostawą nad siatką produktów. Komunikat w nagłówku w stylu „wysyłka przed świętami przy zamówieniu do 19 grudnia”. Para odznak zaufania tuż pod przyciskiem dodania do koszyka. Żaden z tych elementów nie pasuje do opisu produktu, strony CMS ani kategorii. Musi pojawić się w konkretnym miejscu na konkretnych stronach i przetrwać aktualizacje szablonu. Właśnie do tego służy własny blok HTML: wstawia dowolny znacznik do nazwanej pozycji w sklepie, bez otwierania choćby jednego pliku szablonu.

Ten poradnik dotyczy jednego zadania, umieszczenia własnego HTML-a we właściwym miejscu w PrestaShop i kontroli nad tym, gdzie ma się wyświetlać. Nie jest to poradnik o stylowaniu (to osobny temat; zobacz własny CSS i JavaScript w PrestaShop bez psucia aktualizacji) ani o zmianie nazw stron statycznych w menu (ten temat omawia wpis o nazwach wyświetlanych stron CMS). Tutaj trzymamy się mechaniki rozmieszczania treści.

Dlaczego bloki HTML zamiast edycji szablonu

Możesz otworzyć themes/your-theme/templates/catalog/product.tpl i wpisać tę odznakę na sztywno. Są dwa powody, by tego nie robić. Po pierwsze, następna aktualizacja szablonu, albo ponowna synchronizacja motywu potomnego, może nadpisać Twoją zmianę, a odznaka po cichu zniknie. Po drugie, edycja szablonu jest niewidoczna dla każdego, kto nie jest programistą: nie wyłączysz jej samodzielnie na weekendową promocję i nie podmienisz treści z panelu administracyjnego. Gdy treść jest utworzona przez moduł taki jak ps_customtext albo dedykowany moduł bloków HTML, trafia do bazy danych i jest renderowana przez system hooków PrestaShop, więc przetrwa aktualizacje, a Ty zarządzasz nią z poziomu Modułów albo Wyglądu, bez dotykania plików. Co to zmienia w praktyce? Samodzielnie zmieniasz komunikat promocyjny o 9:00 przed błyskawiczną wyprzedażą i usuwasz go o północy, bez żadnego ryzyka dla szablonu.

Natywne moduły, które już to robią

Zanim cokolwiek kupisz, warto wiedzieć, że PrestaShop zawiera trzy darmowe moduły pokrywające najczęstsze scenariusze. Zwykle są dostępne w standardowych instalacjach opartych na Classic i w razie braku można je zainstalować albo włączyć z Menedżera modułów:

W większości przypadków typu „potrzebuję tylko akapitu HTML gdzieś na stronie” odpowiedzią jest ps_customtext. Przejdź do Moduły → Menedżer modułów, wyszukaj „custom text”, kliknij Konfiguruj, wklej HTML do edytora (przełącz edytor na widok źródła/kodu przyciskiem <>, jeśli chcesz zachować czysty znacznik) i zapisz. Domyślnie moduł renderuje treść w displayHome. Haczyk, i powód, dla którego sprzedawcy szybko z niego wyrastają, polega na tym, że ps_customtext daje jeden edytowalny blok przypięty do jednego hooka, bez kierowania na konkretne strony i bez harmonogramu.

Jak działają pozycje: hooki, które decydują o „dowolnym miejscu”

„Dowolne miejsce” w PrestaShop nie oznacza dosłownie każdego piksela. Oznacza każdy zarejestrowany hook. Hook to nazwany punkt wstawiania, który szablon wywołuje podczas renderowania strony, a moduł podpięty do tego hooka oddaje w nim swój wynik. Wszystkie pozycje zobaczysz w Wygląd → Pozycje (w starszych wersjach: Moduły → Pozycje), gdzie każdy hook jest pokazany razem z modułami aktualnie do niego podpiętymi, w kolejności renderowania. Przy własnych treściach najważniejsze są te pozycje:

• displayBanner, pełnej szerokości pasek na samej górze, nad nagłówkiem. Naturalne miejsce na komunikaty dla całego sklepu i informacje o progu darmowej dostawy. Widoczne na każdej stronie, zanim użytkownik zacznie przewijać.
• displayNav1 / displayNav2 / displayTop, wewnątrz pasa nagłówka (po lewej lub prawej stronie nawigacji, w górnym wierszu pomocniczym). Dobre miejsce na krótki numer telefonu, informację o kraju/dostawie albo zwięzłą linię USP.
• displayHome, treść strony głównej, przeplatana karuzelami produktów i kafelkami kategorii. Sprawdza się dla propozycji wartości i wyróżnionych sekcji promocyjnych.
• displayProductAdditionalInfo, na stronie produktu, bezpośrednio pod obszarem dodania do koszyka. To tutaj obietnice dostawy, odznaki gwarancji i ikony metod płatności najmocniej pracują, bo klient czyta je dokładnie w momencie wahania.
• displayFooterBefore / displayFooter, nad stopką i w stopce, na każdej stronie. Odznaki zaufania, zachęty do newslettera, linki pomocnicze.
• displayLeftColumn / displayRightColumn, kolumny boczne, jeśli Twój szablon ich używa. Pomoc przy filtrach, promocje kategorii, komunikaty wsparcia.

Praktyczne podejście, gdy nie znasz nazwy pozycji: otwórz stronę, którą chcesz edytować, a w Wygląd → Pozycje użyj opcji Przenieś moduł (przycisk „Hook a module”). Lista rozwijana pokazuje wszystkie pozycje, do których można podpiąć moduł, a tekst pomocy opisuje, gdzie każda z nich się renderuje. Możesz też przeciągnąć moduł w górę lub w dół w ramach hooka, żeby kontrolować, czy Twój blok pojawi się nad czy pod innym elementem, na przykład banerem kategorii.

Czego nie potrafią natywne bloki, i dlaczego sprzedawcy sięgają po dedykowany moduł

Natywny ps_customtext wystarcza, dopóki nie potrzebujesz rzeczy, których realne sklepy potrzebują bardzo często:

• Kierowanie na stronę / kontroler. „Pokaż tę tabelę rozmiarów tylko w kategorii Buty i tylko na stronach produktów”. Natywne bloki renderują się wszędzie tam, gdzie wywoływany jest ich hook; nie mają filtra stron.
• Wiele miejsc wyświetlania i kontrola aktywacji. Pasek „Ostatni dzień dostawy przed świętami” powinien być nazwanym blokiem, który można włączać, wyłączać i przenosić bez edycji szablonu. Harmonogram oparty na zakresie dat to osobna funkcja; nie zakładaj, że moduł bloków ją ma, dopóki nie zobaczysz pól dat w jego panelu administracyjnym.
• Wiele niezależnych bloków w tym samym hooku. Jedna instancja ps_customtext to jeden blok; żonglowanie pięcioma różnymi komunikatami w pięciu pozycjach szybko staje się niewygodne.
• Treść świadoma multishopu. Pokazywanie innej treści bloku dla sklepu lub języka tam, gdzie moduł zapisuje osobne wiersze języków i sklepów. Kierowanie na grupy klientów to osobna warstwa reguł, której standardowy blok tekstowy nie udostępnia.
• Bloki zależne od zgody. Jeśli blok zawiera śledzenie albo osadzone media, bramka kategorii cookies pozwala renderować go tylko wtedy, gdy odwiedzający nie odmówił zgody dla danej kategorii.

Właśnie tę lukę wypełnia dedykowany moduł bloków HTML: biblioteka nazwanych bloków, z których każdy można przypisać do jednego lub wielu hooków, z rozmieszczeniem według typu strony, wyborem układu, treścią wielojęzyczną/sklepową, bramkowaniem kategorii cookies oraz, w modułach takich jak MPR HTML Blocks, wstrzykiwaniem do szablonu w miejscach, w których motyw nie udostępnił użytecznego hooka. Co to daje? Przestajesz edytować szablony i instalować nowy moduł za każdym razem, gdy marketing chce baner; tworzysz blok raz i kierujesz go do hooka albo obszaru strony, w którym powinien się znaleźć. Jeśli zależy Ci na treści zależnej od strony i czystszym rozmieszczaniu, to właśnie ten krok odróżnia dedykowany moduł od natywnego bloku. Zasada jest ta sama, ale masz wiele bloków, rekordy pozycjonowania i wstrzykiwanie do szablonu zarządzane z panelu administracyjnego.

Jak pisać HTML, żeby przetrwał pracę edytora

Jedna kłopotliwa rzecz, której da się uniknąć: TinyMCE i filtrowanie HTML w PrestaShop mogą przepisywać albo usuwać nieobsługiwany znacznik zależnie od konfiguracji. Edytor rich text będzie „porządkował” kod, którego nie rozpoznaje, a filtrowanie bezpieczeństwa może usuwać style inline albo przeformatowywać tagi przy zapisie. Jeśli blok znika albo traci stylowanie po zapisaniu, zwykle to jest przyczyna. Rozwiązania, w kolejności od najlepszych:

Utrzymuj znacznik bloku prosty i oparty na klasach. Taka treść w widoku źródłowym przechodzi czyszczenie edytora i zostawia całe stylowanie arkuszowi CSS szablonu.

<section class="promo-bar promo-bar--shipping">
  <p><strong>Free delivery this weekend.</strong> Orders over 75 EUR ship free until Monday.</p>
  <p><a href="/delivery">See delivery conditions</a></p>
</section>

Strona produktu w sklepie z treścią w zakładce Opis.

• Przełącz edytor na widok kodu źródłowego (przycisk <> / „Narzędzia → Kod źródłowy”) i wklej znacznik tam, a nie do panelu WYSIWYG.
• Trzymaj stylowanie w klasie, nie inline. Dodaj do bloku klasę taką jak promo-bar i zdefiniuj .promo-bar we własnym arkuszu stylów szablonu, edytor zostawia atrybuty class w spokoju, a Ty zyskujesz korzyść „stylowanie przetrwa aktualizacje”, opisaną we wpisie o własnym CSS i JavaScript bez psucia aktualizacji.
• Jeśli blok musi uruchamiać JavaScript, podłącz go przez właściwy hook zasobów zamiast wklejać tag <script> do edytora. Skrypty inline w blokach treści są kruche i łatwo psują się przy zapisie. Ten mechanizm to osobny temat, omówiony w tym samym poradniku CSS/JS.

Dbaj o szybkość bloków i spójność z marką

Dwie dyscypliny projektowe decydują, czy blok pomaga, czy przeszkadza. Po pierwsze, dopasuj go do szablonu. Użyj tej samej rodziny fontów, tego samego koloru akcentu i tego samego rytmu odstępów, których sklep już używa, żeby blok wyglądał jak część sklepu, a nie doklejony po fakcie dodatek. Po drugie, pisz zwięźle. Baner to jedno zdanie plus wezwanie do działania; pasek zaufania to rozpoznawalne ikony, nie akapit tekstu. Wartość bloku polega na tym, co dodaje we właściwym momencie, a nie na tym, ile uda się w niego upchnąć.

Od strony wydajności: każdy blok to dodatkowy znacznik, a najczęściej obciążają stronę bloki z dużą liczbą obrazów. Serwuj obrazy w poprawnym rozmiarze i po kompresji, używaj CSS do układu i efektów zamiast ładowania biblioteki, a jeśli masz kilka aktywnych bloków naraz, sprawdź ich łączny wpływ w panelu sieciowym przeglądarki. Szybkość strony jest jednym z sygnałów branych pod uwagę przez Google, więc stos ciężkich banerów może po cichu osłabiać resztę pracy wykonanej na stronie. Utrzymuj znacznik lekki, a korzyść pozostanie korzyścią.

Krótki przewodnik decyzyjny

Powód, dla którego warto opanować bloki HTML, jest ten sam, od którego zaczęliśmy: pozwalają właścicielowi sklepu, nie programiście, umieścić właściwy komunikat we właściwym miejscu i we właściwym czasie, a potem równie łatwo go wycofać, bez ryzykowania szablonem. Naucz się nazw pozycji, korzystaj z darmowych natywnych bloków przy prostych zadaniach, sięgaj po dedykowany moduł, gdy tylko potrzebujesz wielu bloków, rozmieszczenia zależnego od strony albo bezpiecznego wstrzykiwania do szablonu, i dbaj o to, by każdy blok był lekki oraz spójny z marką. Dzięki temu standardowa instalacja PrestaShop zaczyna mówić głosem Twojego sklepu dokładnie w tych momentach, które wpływają na sprzedaż.

Najczęściej zadawane pytania

Czy „dowolne miejsce” naprawdę oznacza każde miejsce na stronie?

Nie dosłownie, chodzi o każdy zarejestrowany hook. Hook to nazwany punkt wstawiania, który szablon wywołuje podczas renderowania strony, a wynik Twojego bloku trafia tam, gdzie dany hook jest uruchamiany. Wszystkie dostępne pozycje zobaczysz w Wygląd → Pozycje. Jeśli dokładne miejsce, którego potrzebujesz, nie ma hooka, wtedy przydaje się funkcja wstrzykiwania do szablonu w dedykowanym module, ponieważ może celować w pozycje, których motyw nigdy nie udostępnił jako hook.

Którego natywnego modułu użyć do prostego bloku HTML?

Do akapitu HTML użyj ps_customtext, wyszukaj „custom text” w Menedżerze modułów, kliknij Konfiguruj i wklej znacznik (użyj widoku źródła <>, żeby zachować czysty kod). Do obrazu banera z linkiem u góry każdej strony użyj ps_banner; do list linków w stopce, ps_linklist. Wszystkie trzy są darmowo dostarczane z instalacjami opartymi na Classic i przechowują treść w bazie danych, więc przetrwa ona aktualizacje szablonu.

Gdzie umieścić odznakę zaufania albo obietnicę dostawy na stronie produktu?

W hooku displayProductAdditionalInfo, który renderuje się bezpośrednio pod obszarem dodania do koszyka. To tam odznaki gwarancji, obietnice dostawy i ikony metod płatności najmocniej pracują, bo klient czyta je dokładnie w momencie wahania. Podepnij tam blok przez Wygląd → Pozycje → Przenieś moduł, zamiast edytować product.tpl.

Mój blok stracił stylowanie albo zniknął po zapisaniu. Dlaczego?

Prawie zawsze przyczyną jest TinyMCE albo filtrowanie HTML w PrestaShop, które „porządkuje” znacznik przy zapisie, edytor przepisuje tagi, których nie rozpoznaje, a filtrowanie bezpieczeństwa może usuwać style inline. Rozwiązanie: wklejaj treść do widoku kodu źródłowego edytora, nie do panelu WYSIWYG, i trzymaj stylowanie w klasie CSS (zdefiniuj .promo-bar w arkuszu stylów szablonu), a nie inline. Edytor zostawia atrybuty class w spokoju.

Kiedy ps_customtext przestaje wystarczać i potrzebny jest dedykowany moduł?

W chwili, gdy potrzebujesz którejkolwiek z tych rzeczy: kierowania na stronę albo kontroler (np. tabela rozmiarów tylko w kategorii Buty), wielu niezależnych bloków zarządzanych centralnie, treści bloków dla multishopu albo wielu języków, bramkowania zgód cookies dla bloków zawierających śledzenie albo umieszczenia treści w miejscu, dla którego szablon nie wystawia hooka. ps_customtext daje jeden blok przypięty do jednego hooka, bez filtra stron. Wystarczy, dopóki nie pojawią się takie potrzeby.

Czy mogę uruchamiać JavaScript wewnątrz bloku HTML?

Nie wklejaj surowego tagu <script> do edytora. Skrypty inline w blokach treści są kruche, łatwo psują się przy zapisie i omijają zarządzanie zasobami PrestaShop. Podłącz zachowanie jako zewnętrzny plik .js przez właściwy hook zasobów, dokładnie tak, jak opisano we wpisie o własnym CSS i JavaScript bez psucia aktualizacji. Blok powinien zawierać znacznik i klasę CSS.

Czy zbyt wiele bloków spowalnia sklep?

Może, każdy blok to dodatkowy znacznik, a najczęściej obciążają stronę bloki z dużą liczbą obrazów. Serwuj obrazy w poprawnym rozmiarze i po kompresji, używaj CSS do układu zamiast ładowania biblioteki, a jeśli kilka bloków jest aktywnych jednocześnie, sprawdź ich łączny koszt w panelu sieciowym przeglądarki. Szybkość strony jest jednym z sygnałów ocenianych przez Google, więc stos ciężkich banerów może po cichu osłabiać resztę Twojej pracy na stronie.

Powiązane poradniki

• Własny CSS i JavaScript w PrestaShop bez psucia aktualizacji
• Nazwy wyświetlane stron CMS: lepsza nawigacja po stronach statycznych
• Motywy potomne w PrestaShop: dlaczego nigdy nie należy edytować motywu nadrzędnego