Streszczenie
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 Wygląd i treści > Szablony wiadomości automatycznych. 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:
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ć. Wprowadź nazwę w polu „Nazwa”.
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.
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ę:
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).
Uwaga: 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.
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ść.
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:
Uwaga: 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
Zobacz też na inny przykład, pochodzacy ze sklepu MPConcept.pl:
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 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:
Jeżeli nie chcesz ustawiać nic w HTML, zadbaj o marginesy w obrazkach.
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.
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:
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:
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ę.
Skąd wziąć ikony?
Jak użyć szablonu?
Oczywiście nigdy nie zapomnij użyć przycisku zapisu po wykonanych zmianach.
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:
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:
Uwaga: 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:
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 Ustawienia > Obsługa zamówień> Formy 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.
Nazwa „Twój sklep internetowy” jest nazwą nadawcy, którą możesz zmodyfikować.
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.