Jak stworzyć niestandardowy szablon maili PrestaShop

Chcesz, by wiadomości z Twojego sklepu były spójne z identyfikacją marki, wyglądały świetnie w każdej skrzynce i przekazywały to, co najważniejsze? Wystarczy przygotować własny, starannie zaprojektowany szablon korespondencji i podpiąć go do mechanizmu wysyłki w sklepie. Poniżej znajdziesz kompletny przewodnik: od rozpoznania wersji platformy, przez strukturę plików i konfigurację, po wzorce stylowania, testy i utrzymanie. Dzięki temu samodzielnie wdrożysz profesjonalny system wiadomości.

Planowanie i przygotowanie

Rozpoznaj wersję i funkcje swojej instalacji

Zacznij od sprawdzenia, z jaką edycją PrestaShop pracujesz. W nowszych wydaniach (1.7.6+) dostępny jest w panelu motyw wiadomości (Menu: Design > Motyw e‑mail), w starszych – szablony są edytowane bezpośrednio w strukturze katalogów. Ta wiedza zdecyduje, czy pójdziesz ścieżką pracy z panelu, czy ręczną modyfikacją plików. Zaplanuj też zakres: czy modyfikujesz istniejące powiadomienia (np. potwierdzenie zamówienia), czy dodajesz nowy typ wiadomości.

Mapa plików i miejsc nadpisywania

Tradycyjnie szablony znajdują się w katalogu /mails/{kod_języka}/ (np. /mails/pl/). Nadpisania w motywie sklepu trafiają do /themes/{nazwa_motywu}/mails/{kod_języka}/. W nowszych wydaniach dostępne są motywy korespondencji w /mails/themes/ oraz ich integracja z panelem. Kluczowa jest para plików: część HTML i wersja tekstowa (zwykle .html oraz .txt) o tej samej nazwie. Edycję prowadzisz na duplikatach, aby nie modyfikować plików rdzeniowych.

Backup, środowisko testowe i kontrola jakości

Zanim zaczniesz, wykonaj kopię katalogu /mails/, ewentualnie całego projektu. Najwygodniej pracować na środowisku testowym (staging), gdzie możesz wysyłać wiadomości do skrzynki deweloperskiej. Skonfiguruj logowanie błędów i wyczyść cache po każdej zmianie. Pamiętaj o kontroli zgodności z RODO i polityką prywatności – nie wysyłaj danych, które nie są potrzebne w danej wiadomości.

Konfiguracja wysyłki i narzędzia testowe

Przejdź do konfiguracji poczty w panelu, ustaw SMTP dostawcy lub skorzystaj z narzędzi programistycznych (np. lokalnego przechwytywacza). Warto zapewnić wysyłkę testową: jedna skrzynka w Gmailu, jedna Outlook/Exchange i jedna na mobilnym kliencie. Dzięki temu od razu zobaczysz różnice w interpretacji stylów i ewentualne problemy ze spamem.

Zasady projektowania i treść

Ustal strukturę docelową: wyróżniony nagłówek z logo, chwytliwy preheader, czytelny tytuł, blok treści z najważniejszym komunikatem i jasne wezwanie do działania. Pamiętaj, że e-mail to nie strona WWW – prostota i niezawodność są ważniejsze niż rozbudowane efekty. Zadbaj o minimalną długość zdań, listy punktowane oraz zgodność z identyfikacją wizualną marki.

Szablony w plikach: tworzenie i nadpisywanie

Lokalizacja i kopiowanie plików

Jeżeli pracujesz metodą plikową, zlokalizuj oryginalne pliki w /mails/{język}/. Skopiuj potrzebne wzorce do /themes/{twój_motyw}/mails/{język}/. Przykład: chcesz zmodyfikować potwierdzenie zamówienia – skopiuj order_conf.html i order_conf.txt. Po skopiowaniu modyfikuj wyłącznie wersje w katalogu motywu. W systemach wielosklepowych (multistore) zachowaj dedykowane ścieżki dla każdego sklepu.

Wersja HTML i TXT

Każdy szablon powinien posiadać parę: wersję wizualną oraz zwykły tekst. Wersja tekstowa jest niezbędna dla czytników, filtrów antyspamowych i dostępności. W .txt zachowaj tę samą kolejność informacji, co w HTML, upraszczając formatowanie. Pliki zapisuj w UTF‑8 bez BOM, aby uniknąć artefaktów w nagłówkach wiadomości.

Zmienne i podstawienia treści

W treści możesz używać miejsc zastępczych – tzw. zmienne – w formie nawiasów klamrowych, np. {firstname}, {lastname}, {shop_name}, {order_name}, {total_paid}, {shop_url}. Te wartości muszą zostać przekazane w momencie wysyłki. Mechanizm wiadomości przekazuje tablicę par klucz–wartość, które zostaną wstawione do treści. Gdy przygotowujesz nowy typ powiadomienia, pamiętaj, by dostarczyć wszystkie pola użyte w szablonie; brakująca zmienna w efekcie da pusty fragment.

Dodanie nowego typu wiadomości w logice aplikacji

Tworząc nowy komunikat (np. „Prośba o opinię po zakupie”), przygotuj dwa pliki: review_request.html i review_request.txt w katalogu języka. W kodzie logiki (lub we własnym rozszerzeniu) wywołaj mechanizm wysyłki, wskazując nazwę pliku jako nazwę komunikatu, temat wiadomości, adres odbiorcy i zestaw zmiennych. Dobrą praktyką jest trzymanie wszystkich tematów i stałych w tłumaczeniach oraz unikanie w kodzie twardych tekstów.

Nagłówek, stopka i części wspólne

Większość wdrożeń dzieli układ na części wspólne: nagłówek (z logo) oraz stopkę (z danymi firmy, odnośnikami, informacją prawną). Jeżeli Twoja instalacja wykorzystuje wspólne pliki (np. header.html, footer.html), umieść je w tym samym katalogu i odnoś się do nich spójnie w każdym szablonie. W starszych wydaniach możesz po prostu utrzymywać identyczne bloki w każdym pliku; w nowszych – korzystać z motywu e‑mail i jego layoutu.

Obrazy, ścieżki i CID

Elementy graficzne (logo, ikony) najlepiej przechowywać w katalogu /img/ lub w przestrzeni motywu. Upewnij się, że linki są absolutne (zawierają pełny adres sklepu), dzięki czemu klient pocztowy je pobierze. W sytuacjach wymagających osadzenia obrazów wprost w wiadomości (CID) pamiętaj, że to wymaga dodatkowej konfiguracji wysyłki i nie każdy dostawca poczty wspiera to jednakowo. Dla logo zazwyczaj wystarczy stabilny URL HTTPS.

Porządek w treści .html

Twórz układ tabelkowy i prosty, zgodny z „kanonem e‑mailowym”. Unikaj pozycji absolutnych, złożonych skryptów i osadzonych fontów bez fallbacku. Działaj w duchu progresywnego ulepszania: najpierw solidny szkielet, potem drobne dodatki, które nie zaszkodzą w mniej zaawansowanych klientach.

Motyw e‑mail w panelu (1.7.6+): konfiguracja i praca

Włączenie i wybór motywu

Jeśli w Twojej wersji jest dostępna sekcja Motyw e‑mail, przejdź do Design > Motyw e‑mail i wybierz motyw bazowy. Możesz stworzyć własny wariant na podstawie dostępnych layoutów. Mechanizm pozwala przypisać motyw do sklepu, zdefiniować układ i warianty nagłówka/stopki, a następnie wyeksportować całość do paczki ZIP.

Edycja treści przez panel

Treści (teksty, etykiety, tematy) zmieniaj przez sekcję tłumaczenia w panelu administracyjnym. Wybierz typ: szablony wiadomości, język i sklep, a następnie uzupełnij brakujące pola. Ta metoda jest bezpieczna dla aktualizacji i nie narusza plików źródłowych, a jednocześnie pozwala na szybkie korekty bez dostępu do FTP.

Eksport i import motywu

Współpraca zespołowa jest łatwiejsza, gdy możesz wyeksportować cały motyw korespondencji do jednego pliku i zaimportować go na innym środowisku. Zadbaj o spójne nazewnictwo i dokumentację: które pliki odpowiadają za konkretne powiadomienia, jakie zmienne są wymagane i jakie są style bazowe. Po imporcie wykonaj test wysyłki dla wszystkich kluczowych komunikatów.

Style i wbudowane mechanizmy

Mechanizm motywu zazwyczaj pozwala na wprowadzenie arkusza stylów, który zostanie osadzony w mailu. Pamiętaj, że duża część klientów pocztowych ignoruje zewnętrzne arkusze – stąd konieczność osadzania styli wewnątrz elementów lub w sekcji head z mechanizmem wstrzykiwania do atrybutu style. Bazuj na prostym HTML i zachowuj zgodność z wytycznymi branżowymi.

Wielojęzyczność i multistore

Jeżeli prowadzisz kilka sklepów lub wersji językowych, po każdej zmianie motywu przejdź przez wszystkie warianty i uzupełnij treści. Sprawdź stopki prawne (adres firmy, NIP, polityka prywatności) osobno dla każdego sklepu. Ustal jednolity preheader i zasady formatowania nazw produktów w wielu językach, aby uniknąć łamania linii i nieczytelności.

Stylowanie, zgodność i dostarczalność

Układ tabelkowy i minimalizm

W wiadomościach stosuj layout oparty o tabele. Zapewnia to stabilność w Outlook (silnik Word) i wielu desktopowych klientach. Unikaj zagnieżdżeń wielopoziomowych, zredukuj liczbę kolumn do niezbędnego minimum i trzymaj szerokość głównego kontenera w granicach 600–700 px. Linki CTA powinny mieć wyraźny kontrast i wystarczające pole klikalne.

Style inline i zgodność

Największą szansę na jednakowy wygląd masz, gdy stosujesz CSS inline: style bezpośrednio w atrybucie style każdego elementu. Dla responsywności dodaj media queries, pamiętając, że nie wszystkie klienty je obsługują. Testuj: klient po kliencie, urządzenie po urządzeniu. Zadbaj o bezpieczne fonty (Arial, Helvetica, Georgia) i sensowne fallbacki.

Tryb ciemny i dostępność treści

Coraz więcej klientów wspiera ciemny motyw. Sprawdź, jak zachowa się Twoja kolorystyka; unikaj jasnoszarych tekstów na białym tle. Zapewnij kontrast na poziomie WCAG, teksty alternatywne dla obrazów i logiczną kolejność nagłówków. To nie tylko dobra praktyka – to wyższa dostępność i lepsza skuteczność.

Preheader, tematy i autoryzacja domeny

Preheader – pierwsze 35–90 znaków podglądu w skrzynce – powinien wzmacniać tytuł i wyjaśniać korzyść. W temacie unikaj krzykliwej interpunkcji i słów, które zwiększają szanse na spam. Skonfiguruj SPF, DKIM i DMARC dla domeny wysyłającej; poprawia to reputację i dostarczalność. Monitoruj wskaźniki: wskaźnik otwarć, kliknięcia, skargi na spam.

Testy A/B i iteracje

Po wdrożeniu uruchom testy: dwa warianty tematu, różne przyciski CTA, alternatywne ułożenie bloku rekomendacji. Zbieraj dane przez kilka cykli, wyciągaj wnioski i wdrażaj wygrane warianty. Sukces to nie jednorazowe „gotowe”, lecz stały proces doskonalenia.

Typowe problemy i ich diagnoza

• Brak obrazów – sprawdź, czy używasz pełnych URL i certyfikatu SSL.
• Rozjechany układ w Outlook – uprość tabele, usuń margin, korzystaj z padding.
• Znaki diakrytyczne jako „krzaki” – ustaw UTF‑8, nagłówki i temat bez BOM.
• Niepodmienione pola {…} – upewnij się, że wszystkie zmienne są przekazane.
• Spam – ogranicz słowa alarmowe, dodaj stopkę z danymi firmy, dbaj o SPF/DKIM.

Automatyzacja, utrzymanie i dobre praktyki

Wersjonowanie i porządek w katalogach

Utrzymuj szablony w repozytorium Git: katalog /themes/{motyw}/mails/ lub pełny motyw e‑mail jako paczka. Każda zmiana powinna mieć opis: powód, zakres, wpływ. Ułatwia to rolback i audyt. W zespołach stosuj code review: druga para oczu złapie literówki i niespójności w układzie.

Konwencje nazewnicze i spójność

Nazywaj pliki po funkcji: account_created, order_conf, password_query. Zachowuj identyczną strukturę bloków w każdej wiadomości (nagłówek, tytuł, treść, CTA, stopka). Trzymaj paletę w zmiennych (jeżeli to możliwe) i ujednolicaj odstępy oraz rozmiary fontów.

Aktualizacje platformy i kompatybilność

Przy aktualizacji sklepu sprawdź listę zmian dotyczących poczty. Jeżeli nowe wydanie wprowadza zmiany w ścieżkach lub systemie motywu e‑mail, zaktualizuj swoje nadpisania. Po migracji wykonaj pełny test wysyłki: każdy kluczowy szablon, wszystkie języki, minimum trzech dostawców skrzynek.

Wielojęzyczność i wielosklep

W środowiskach wielojęzycznych trzymaj treści w tłumaczeniach panelowych oraz w parach .html/.txt dla każdego języka. Dla multistore dokumentuj różnice w stopkach, danych firmy i linkach do polityk. Unikaj wstrzykiwania nazw sklepów w treści „na sztywno” – wykorzystaj zmienne kontekstowe.

Checklisty wdrożeniowe

• Komplet plików .html i .txt dla wszystkich komunikatów i języków.
• Testy wyglądu na: Gmail (web i mobilny), Apple Mail, Outlook, Android.
• Spójny nagłówek i stopka, poprawny preheader, wyraźne CTA.
• Konfiguracja SPF, DKIM, DMARC dla domeny nadawczej.
• Logi wysyłki i mechanizm ponowień błędów (retry) po stronie serwera.
• Procedura rollback i kopia zapasowa poprzedniej wersji szablonów.

Współpraca z modułami i rozszerzeniami

Gdy zmieniasz wiadomości wysyłane przez zewnętrzny moduł, sprawdź, gdzie trzyma on swoje pliki e‑mail. W wielu przypadkach wystarczy umieścić nadpisania w katalogu motywu sklepu pod odpowiednią ścieżką i nazwą. Zadbaj o zgodność nazw i języków; po aktualizacji modułu przetestuj wysyłki, bo rozszerzenie mogło wprowadzić nowe zmienne.

Bezpieczeństwo i prywatność

Nie umieszczaj w treści wrażliwych danych (pełne numery kart, hasła). Linki logowania kieruj przez HTTPS. Dla linków resetu hasła ustaw krótki, rozsądny TTL. W stopce informuj, dlaczego użytkownik otrzymuje wiadomość i jak może zmienić preferencje.

Praktyczny przewodnik krok po kroku

Krok 1: Wybierz metodę pracy

Jeżeli masz dostęp do Motywu e‑mail w panelu – skorzystaj z niego. W przeciwnym razie pracuj w katalogu /themes/{twój_motyw}/mails/{język}/. Zaplanuj listę komunikatów, które zmieniasz lub dodajesz, i przygotuj makietę wizualną (np. w Figma), uwzględniając prostotę i ograniczenia klientów pocztowych.

Krok 2: Przygotuj bazowy layout

Zbuduj blokowy layout: nagłówek z logo (obraz o szerokości ~120–180 px), tytuł komunikatu, główny akapit, lista kluczowych informacji (np. produkty, kwoty, terminy), przycisk CTA i stopka z danymi. Wszystkie odstępy realizuj paddingiem w komórkach tabel. Unikaj margin – część klientów je ignoruje.

Krok 3: Stwórz parę plików

Utwórz nazwany plik .html i odpowiadający mu .txt. Wersję tekstową przygotuj ręcznie – nie generuj jej „automatycznie” z HTML; dzięki temu dopracujesz styl i kolejność informacji. W HTML zastosuj prosty grid tabelkowy, bez skomplikowanych zagnieżdżeń. Użyj wyglądu spójnego z Twoim brandbookiem.

Krok 4: Wstaw zmienne i treści dynamiczne

W miejscach, gdzie treść zależy od użytkownika lub zamówienia, wstaw placeholdery: imię klienta, numer zamówienia, łączna wartość, termin dostawy. Upewnij się, że mechanizm wysyłki przekazuje wszystkie wartości i że masz bezpieczne formatowanie liczb i walut. Dla linków, które prowadzą użytkownika do konta lub zamówienia, dodaj parametry śledzące kampanię (UTM).

Krok 5: Testy w panelu i skrzynkach

Wyślij testową wiadomość z panelu administracyjnego – sekcja wysyłki testowej. Otwórz ją w kilku klientach: przeglądarkowy, mobilny, desktopowy. Popraw odstępy, fonty i rozmiary elementów interaktywnych. Sprawdź wersję tekstową oraz to, jak wygląda wiadomość bez obrazów (wyłącz autoladowanie w kliencie).

Krok 6: Dostarczalność i reputacja

Jeżeli używasz zewnętrznego nadawcy, dodaj i zweryfikuj domenę. Skonfiguruj podpisy DKIM i wpis SPF na DNS. Rozważ dedykowaną adresację IP dla większych wolumenów. Monitoruj bounsy, skargi i wskaźniki zaangażowania. Unikaj nadużywania grafik bez tekstu – zrównoważ treść i obrazy.

Krok 7: Wdrożenie i utrzymanie

Gdy wszystkie testy zakończą się powodzeniem, wdroż zmiany na produkcję: z deploymentem kontrolowanym, oknem serwisowym i planem awaryjnym. Po wdrożeniu monitoruj wskaźniki (otwarcia, kliknięcia, porzucone koszyki). Zbieraj opinie zespołu obsługi klienta – to oni najszybciej powiedzą, czy komunikat jest zrozumiały.

Dodatkowe wskazówki warsztatowe

• Przycisk CTA buduj jako tabelę z wypełnieniem i linkiem w środku; unikaj border-radius większego niż 6–8 px dla zgodności.
• Dla list produktów używaj jednego wiersza na produkt, z prostą miniaturą i nazwą; ceny wyrównuj do prawej.
• Nie osadzaj skryptów – wiele klientów je usuwa; unikaj też formularzy w wiadomości.
• Stosuj pełne adresy URL do zasobów i linków; względne ścieżki mogą nie działać poza kontekstem sklepu.
• Preheader wstaw jako pierwszą linię, wizualnie ukrytą (np. mała czcionka, kolor tła równy kolorowi tekstu), ale czytelną dla klienta poczty.

Wdrażając powyższe praktyki, budujesz fundament stabilnego systemu korespondencji: czytelnego, spójnego z marką i łatwego w utrzymaniu. To inwestycja, która szybko się zwraca – każda wiadomość wspiera sprzedaż i buduje relację z klientem.