Dobre maile transakcyjne bez znajomości HTML?

E-mail marketing – średniozaawansowany
● ● ●
Email marketing10 minut czytania

TL;DR

Do stworzenia przejrzystego maila nie potrzebujesz znajomości HTML i CSS. Korzystając z edytora wizualnego możesz znacznie poprawić wiadomości. Zaprezentuj dane o zamówieniu w formie tabel i/lub list wypunktowanych. Stwórz szablon maila, w którym wykorzystasz powtarzalne elementy: logo, nagłówek wiadomości, ikony social media, podpis, banery promujące tekst na blogu lub aktualną ofertę, ikony opisujące wyróżniki marki. Korzystaj z nagłówków i zmiany koloru oraz wielkości czcionki. Rozluźnij nieco formalne komunikaty i napisz je prostym a sympatycznym językiem.

 

Jak łatwo zmienić maile transakcyjne?

W jednym z poradników opisaliśmy, co cechuje dobre maile transakcyjne. Wiele elementów możesz łatwo zmienić: temat maila, tekst, informacje mające się pobierać z danych zamówienia. Niektóre poprawki sprowadzają się jednak do edycji wyglądu maila. Jak to zrobić, jeśli nie masz możliwości skorzystania z pomocy informatyka a HTML i CSS są ci obce?

 

Na platformie Shoper maile automatyczne edytujemy w zakładce Zawartość > Wiadomości e-mail. W poradniku będziemy pokazywać, gdzie zmienia się konkretne maile w naszym oprogramowaniu. Jeśli jednak korzystasz z innego usługodawcy, również możesz łatwo zastosować nasze wskazówki.

 

Przede wszystkim szablon maila

Maile transakcyjne posiadają wiele wspólnych, powtarzalnych elementów. Aby każdorazowo nie tworzyć ich od nowa i nie wprowadzać osobno zmian w każdym typie wiadomości, korzystamy z szablonów. Na platformie Shoper znajdziemy je u dole listy wiadomości e-mail:

 

Szablon maila Shoper

 

Jakie elementy mogą pojawiać się wiele razy w wiadomościach?

  • menu/nagłówek wiadomości,
  • ikony social media,
  • ikony prezentujące wyróżniki marki,
  • dodatkowe grafiki,
  • informacje o programie lojalnościowym,
  • wspomnienie najnowszego wpisu na blogu lub organizowanego konkursu,
  • podpis ze zdjęciem.

 

Nagłówek maili z twojego sklepu

Po wyborze nowego szablonu maila musimy przede wszystkim go nazwać:

 

nazwa szablonu maila transakcyjnego

 

W pierwszej kolejności masz możliwość edycji szablonu tekstowego. To pojawiający się w nielicznych sytuacjach wariant maila. Wystarczy, że pod znacznikiem {content} dopiszesz stopkę z podziękowaniem za zakupy i danymi kontaktowymi. 

 

stopka maila tekstowego

 

Znacznik {content} zaciąga treść poszczególnych maili np. maila z potwierdzeniem zamówienia.

Przejdźmy do najważniejszego okna, w którym będziemy dokonywać edycji: „treść HTML”.

Na początek wstawimy logo sklepu, wybierając ikonę:

 

wstaw/edytuj obrazek

 

Wstawiając obrazki na platformie Shoper zawsze podawaj wyłącznie jeden wymiar (najlepiej wysokość) i zaznacz opcję zachowaj proporcje. Dzięki temu unikniesz niezbyt estetycznego skalowania obrazków na mniejszych rozdzielczościach (urządzenia mobilne).

 

responsywny obrazek Shoper

 

ikona: uwagaUwaga: Nie zapomnij o dodaniu tekstu alternatywnego. W wypadku platformy Shoper jest nim opis obrazka. Wyświetli się w momencie, gdy obrazek się nie załaduje.

 

Proste menu w nagłówku maila

Po dodaniu loga możesz je wyśrodkować oraz dodać link. Zalecamy wstawianie linku do aktualnej promocji lub do strony głównej.

 

wyrównanie do środka

 

Pora na menu! Możesz wykorzystać znak kreski pionowej i spację, aby stworzyć prostą linijkę tekstu. Nie używaj zbyt wielu spacji naraz, mogą zostać zredukowane do jednej, gdy klient otrzyma już wiadomość.

 

menu nagłówka maila

 

Wystarczy, że zaznaczysz poszczególne słowa, aby dodać odpowiednie linki. Następnie nie zapomnij zmienić ich koloru, aby nie wyświetlała się podstawowa, ostra niebieska walka. W sklepie Shoper użyjesz opcji Kolor tekstu.

 

Po takim prostym nagłówku może już występować pusta linijka (wciśnij enter) i znacznik {content} z treścią konkretnych wiadomości. Teraz pora zadbać o prostą, wspólną dla wszystkich wiadomości stopkę. Po znaczniku {content} dodaj co najmniej pustą linijkę tekstu. Dzięki temu właściwa treść maila nie będzie się zbyt mocno zlewała z elementami szablonu, a wiadomość będzie bardziej przejrzysta.

 

Co zawrzeć w stopce maila?

To już zależy od twoich potrzeb 🙂 Przede wszystkim pamiętaj o jednym:

 

ikona: uwagaUwaga: Staraj się, aby obrazki wgrywane do maila nie przekraczały 600 pikseli szerokości. Jest to bezpieczna szerokość*, w ramach której twoje maile na pewno będą się poprawnie wyświetlać. Jej znaczne przekroczenie jest błędem, który może negatywnie wpłynąć na odbiór maili czy skuteczność kampanii mailingowych. 

 

Pokaż, co wyróżnia twoją markę

O każdej porze dnia i nocy musisz umieć szybko i precyzyjnie odpowiedzieć na pytanie: czemu ktoś ma dokonać zakupu u ciebie, a nie w konkurencyjnym e-sklepie czy w galerii handlowej? Swoje myśli możesz zebrać w formie krótkich zdań z nagłówkami i towarzyszącymi im obrazkami. Zobacz jak zrobił to np. sklep Infinigoods.pl

 

Infinigoods wartości

 

Zobacz też na inny przykład, pochodzacy ze sklepu MPConcept.pl:

 

mpconcept wartości marki

 

Najprostsza forma, w jakiej możesz wstawić ikony to po prostu jeden duży obrazek. Możesz też zdecydować się na tabelkę, zawsze jednak sprawdź, jak wyświetla się na telefonach komórkowych. My zdecydowaliśmy się na tabelę z czterema kolumnami i trzema wierszami.

 

wstaw tabelę Shoper

 

Wstaw ikony do poszczególnych komórek (nie zapomnij o opisach obrazków). Ustaw im pożądany rozmiar. Następnie dodaj podpisy wiersz niżej. Możesz zaznaczyć każdy z nich i zamienić na nagłówek. Wyśrodkuj poszczególne komórki, zaznacz także całą tabelę i również użyj ikony wyśrodkowania. Tymi prostymi krokami możesz uzyskać taki efekt:

 

Shoper przykład tabelki
Pamiętaj, że przerywane ramki są widoczne tylko w edytorze na potrzeby układania tabeli.

 

Jeżeli nie chcesz ustawiać nic w HTML, zadbaj o marginesy w obrazkach.

 

marginesy obrazka

 

Wszystkie obrazki powinny mieć tę samą szerokość. W najprostszym przypadku możesz po prostu otworzyć narzędzie typu Paint, powiększyć obrazek i użyć narzędzia Zaznaczenia, aby wyśrodkować ikonę. Dzięki temu ikony będą estetycznie wyrównane.

 

Paint edycja ikon

 

Bardziej profesjonalnym rozwiązaniem będzie skorzystanie z narzędzia typu Gimp, Corel czy Photoshop, aby ikony miały przezroczyste tło i dostosowywały się do tła, które wyświetla się skrzynce mailowej. W większości przypadków będzie to jednak biel.

 

Dodatkowe treści i grafiki

Najnowszy interesujący poradnik na blogu? Wyjątkowa promocja lub wyprzedaż? Nie zapomnij poinformować o tym, co może być ciekawe dla odbiorców. Stwórz prosty, zachęcający komunikat i zamieść pod nim baner odsyłający do wybranej strony. Nie bój się też pisać w pierwszej osobie, jeśli prowadzisz firmę samodzielnie lub zarządzasz małym zespołem. Dla lepszego sformatowania tekstu możesz użyć nagłówków:

 

Dodawanie nagłówków w mailu

 

Nie zapomnij się podpisać

Konkretne osoby pracujące w zespole będą budzić cieplejszy odbiór niż bliżej nieokreślone „my” – firma. Jeśli wpisuje się to w komunikację twojej marki, możesz również użyć znaków emoji, które możesz skopiować z zewnętrznych stron. Na potrzeby testowego sklepu, przygotowałem poniższy podpis:

 

podpis właściciela sklepu

Ikony social media

To już ostatnia prosta. Wstaw ikony do profilów, które prowadzisz (np. do strony na Facebooku i Instagramu), zaznacz ikony i dodaj linki do poszczególnych stron. Jeśli pasuje to do twojej koncepcji, wyśrodkuj również całą linijkę.

 

dodawanie ikon social media

 

Skąd wziąć ikony?

 

Jak użyć szablonu?

Oczywiście nigdy nie zapomnij użyć przycisku zapisu po wykonanych zmianach:

Shoper zapisz

Przejdź do wybranego maila transakcyjnego, którego treść chcesz edytować. Zmieńmy przykładowo mail, który użytkownicy otrzymują po zapisie na newsletter: Subskrypcja – dodanie. Aby użyć na tej wiadomości stworzonego szablonu, wybierz szablon z listy:

 

wybór szablonu maila

 

Musisz to zrobić indywidualnie dla każdej wiadomości, którą chcesz zmienić. Oto efekt końcowy uzyskany po edycji maila z potwierdzeniem zapisu na newsletter oglądany z poziomu aplikacji Gmail z telefonu:

 

przykładowy mail transakcyjny

 

ikona: uwagaUwaga: Możesz użyć przycisku „Podgląd”, ale najlepiej będzie, jeśli sprawdzisz rzeczywisty mail w praktyce. Po kliknięciu w podgląd możesz wpisać adresata  testowego maila i kliknąć „Wyślij e-mail testowy”. Możesz też spełnić warunki, dzięki którym otrzymasz maila na skrzynkę i porównasz go na komórce i komputerze (np. zapisz się na newsletter, złóż testowe zamówienie).

 

Potwierdzenie złożenia zamówienia – edycja maila

Spróbujmy jeszcze edytować mail, w którym jest nieco więcej znaczników. Mail potwierdzenia złożenia zamówienia może być o wiele czytelniejszy, jeśli zaprezentujesz dane w formie tabeli lub list wypunktowanych. Kliknij i powiększ poniższy obrazek i zobacz, jak możesz poprawić jakość domyślnego maila bez korzystania z HTML, wyłącznie w edytorze wizualnym:

 

mail transakcyjny przykład

 

ikona: zobacz równieżKliknij, aby zobaczyć mail, jaki otrzymałby klient.

 

Na obrazku został zaznaczony szczególny znacznik z platformy Shoper. {payment_notify} zaciąga informacje powiązane z konkretną formą płatności. Dzięki temu, np. jeśli klient wybrał przelew tradycyjny, możesz przekazać mu w mailu dane do przelewu.

 

Przejdź do zakładki Konfiguracja > Sprzedaż i Dostawy > Płatności > wybierz formę płatności, którą chcesz edytować, np. przelew tradycyjny > zębatka > Edytuj.

 

Zobaczysz tam komunikat po złożeniu zamówienia, który wyświetla się bezpośrednio w sklepie po potwierdzeniu zakupu. Z kolei do maila, w miejsce znacznika {payment_notify} zostaną przekopiowane treści z Komunikatu email. Zamieść tam dane niezbędne do przelewu.

 

W wypadku innych form płatności wystarczy, że poinformujesz klienta o dokonanej płatności online. Może się zdarzyć, że coś przeszkodziło użytkownikowi w sfinalizowaniu płatności natychmiastowej. Może chcieć ją ponowić. Wystarczy, że stworzysz wtedy link kierujący do adresu /{order_url} – linku płatności wygenerowanego przez system.

 

order URL

 

Nazwa Twój sklep internetowy jest nazwą nadawcy, którą możesz zmodyfikować.

 

ikona: zobacz równieżZobacz więcej: Pamiętaj, że gotowe szablony maila możesz również zakupić.

 

*Mówiąc o optymalnej szerokości, powołujemy się na doświadczenia przytaczane przez pracowników Freshmaila – popularnego rozwiązania do email marketingu.