Stworzenie szablonu wiadomości e-mail

Układ wiadomości e-mail to sama wiadomość: temat, wygląd oraz wszelkie załączniki. Akcja w Shopify Flow wybiera układ i nadawcę, a następnie wysyła wiadomość. Ponieważ układ jest oddzielony od przepływu pracy, jeden szablon może służyć wszystkim klientom bez konieczności ponownej ingerencji w kod HTML.

Lista zawiera dwie zakładki: Transakcyjne i Marketingowe, z których każda pokazuje liczbę zawartych w niej szablonów. Domyślnie otwiera się zakładka Transakcyjne, a każdy szablon utworzony przed wprowadzeniem typów wiadomości e-mail jest szablonem transakcyjnym. Wyniki wyszukiwania, sortowanie i numer strony są zachowywane po przełączeniu się między zakładkami. Szablon marketingowy jest oznaczony ikoną Marketing obok nazwy, a opcja Utwórz szablon wiadomości e-mail w zakładce „Marketing” powoduje utworzenie nowego szablonu jako szablonu marketingowego.

Utwórz układ

Przejdź do sekcji Szablony wiadomości e-mail i kliknij opcję Utwórz szablon wiadomości e-mail. Należy ustawić:

• Nazwa - jak ją rozpoznaje Pan/Pani. Widzi ją tylko Pan/Pani.
• Temat - obsługuje {{ variables.xxx }} oraz {{ secrets.xxx }}.
• Tekst podglądu - opcjonalny. Krótka fraza wyświetlana w większości skrzynek odbiorczych obok tematu wiadomości. Zalecana długość to 40-100 znaków; obsługuje te same zmienne co temat. Jeśli pozostawi Pan/Pani to pole puste, klient pocztowy wybierze zamiast tego pierwszy fragment tekstu z treści wiadomości.
• Opis - opcjonalny, do Państwa własnego użytku.
• Typ wiadomości e-mail - transakcyjny, obejmujący wiadomości, których oczekują klienci, takie jak aktualizacje dotyczące zamówień i wysyłek; są one zawsze wysyłane, nawet do klientów, którzy zrezygnowali z otrzymywania wiadomości marketingowych. Marketingowe - dotyczące biuletynów, promocji i wiadomości mających na celu odzyskanie klientów; każdy odbiorca otrzymuje indywidualną wiadomość zawierającą link do rezygnacji z subskrypcji oraz dane Państwa firmy z sekcji Ustawienia, a klienci, którzy zrezygnowali z subskrypcji, są pomijani. W odróżnieniu od edytora treści, typ wiadomości można zmienić później w edytorze układu. Szczegóły w E-maile marketingowe i rezygnacje z subskrypcji.

Następnie proszę wybrać edytor:

Redaktor	Najlepiej nadaje się do
Kreator wizualny	Profesjonalnie zaprojektowane wiadomości e-mail z identyfikacją wizualną firmy, tworzone przy użyciu bloków typu „przeciągnij i upuść”
Tekst sformatowany / HTML	Proste komunikaty transakcyjne lub w pełni dostosowana wiadomość e-mail w formacie HTML, którą można wkleić

Kreator wizualny

Narzędzie do tworzenia składa się z dwóch paneli: po lewej stronie znajdują się ustawienia, a po prawej - podgląd roboczy na obszarze roboczym. Bloki można dodawać za pomocą przycisku Dodaj sekcję lub znaków + umieszczonych pomiędzy istniejącymi blokami.

W lewym panelu znajdują się cztery zakładki:

Zakładka	Co się w nim znajduje
Ogólne informacje	Nazwa, Temat, Tekst podglądu, Opis
Budowanie marki	Kolory, typografia i odstępy w układzie całej wiadomości e-mail
Bloki	Ustawienia dla dowolnego bloku wybranego na obszarze roboczym
Zmienne testowe	Fragment kodu JSON usługi Shopify Flow, opis zmiennych systemowych oraz przykładowe wartości do podglądu

Każdy blok na obszarze roboczym posiada elementy sterujące umożliwiające jego przeciągnięcie, powielenie, usunięcie lub ukrycie bez usuwania.

Odwołanie do bloku

Elementy

Blok	Ustawienia
Tekst	Formatowanie tekstu, wyrównanie, rozmiar czcionki (12/14/16/18), kolor
Nagłówek	Tekst nagłówka, rozmiar (od bardzo dużego H1 do małego H4), wyrównanie, kolor
Obraz	Obraz (przesłany lub link), tekst alternatywny, szerokość 10-100%, wyrównanie
Przycisk	Etykieta, adres URL, styl (główny / dodatkowy / konturowy), wyrównanie, promień obramowania 0-24 pikseli
Separator	Kolor, styl (linia ciągła / przerywana / kropkowana), grubość 1-8
Odstępy	Wysokość 4-80 pikseli
Załącznik	Wybór pliku, link lub metapole dotyczące zamówienia lub klienta danego etapu oraz tytuł. Zobacz Załączniki i obrazy
Pętla	Powtarza blok kodu Liquid + HTML dla zmiennej typu tablica
HTML / Kod	Surowy kod HTML z wykorzystaniem Liquid, w tym konstrukcje warunkowe typu {% if %}
Kod QR	Dane (adres URL lub tekst, z możliwością użycia zmiennych), rozmiar 80-300 pikseli, wyrównanie
Tabela pozycji	Pozycje zamówienia z zmiennej listy, zawierającej wiersze z obrazkami, ilościami, cenami i sumami

Bloki handlowe i treściowe (nowość w wersji 1.17; szczegółowe informacje na temat każdego z nich można znaleźć w sekcji Bloki treści: produkt, rabat, odliczanie, śledzenie i inne)

Blok	Jak to działa
Produkt	Jedna karta produktu: zdjęcie, tytuł, opis, cena wraz z ceną porównawczą oraz przycisk. Każde pole przyjmuje zmienną
Tabela produktów	Dwie lub trzy karty w każdym wierszu z zmiennej zawierającej listę, takiej jak tabela pozycji
Kod rabatowy	Pole na kod z przyciskiem, który pozwala zastosować kod podczas finalizacji zamówienia. Może to być kod wpisany ręcznie lub unikalny kod jednorazowego użytku, generowany w Państwa sklepie dla każdego adresu e-mail
Odliczanie	Odliczanie na żywo do określonej daty, wyświetlane w postaci animowanego obrazka po otwarciu wiadomości e-mail. Ramki, kartki z odwracanym obrazkiem, styl minimalistyczny lub tekstowy
Śledzenie zamówienia	Przewoźnik, numer śledzenia, przycisk „Śledź” oraz pasek postępu aktualizowany na podstawie statusu przesyłki
Ocena w postaci gwiazdek	Gwiazdki wygenerowane na podstawie liczby, wraz z opisem i opcjonalnym linkiem do Państwa strony z recenzją
Referencje	Cytat wraz z imieniem i nazwiskiem, stanowiskiem oraz zdjęciem - w formie kartki, z podkreśleniem lub bez
Linki do serwisów społecznościowych	Rząd ikon sieciowych
Film	Miniatura z przyciskiem odtwarzania, prowadzącym do filmu
Podpis	Imię i nazwisko, stanowisko, nazwa firmy, numer telefonu, adres e-mail, strona internetowa oraz zdjęcie
Tabela	Niewielka tabela danych, w której każda komórka zawiera jedną zmienną
Wyświetl w przeglądarce	Typowy napis „wyświetl tę wiadomość e-mail w przeglądarce”
Cena	Samodzielna linia cenowa: cena, opcjonalna cena porównawcza przekreślona, rozmiar, kolor i wyrównanie

Układ

Blok	Ustawienia
Obraz + tekst	Położenie obrazu (po lewej/po prawej), szerokość obrazu 20-70%, wyrównanie w pionie, odstęp, kolor tła oraz podelementy: obraz, tekst i przycisk
Dwie kolumny	Podział kolumn (50/50, 33/67, 67/33, 40/60, 60/40), odstęp 0-40, wyrównanie w pionie, wypełnienie oraz oddzielna zawartość lewej i prawej kolumny
Kolumny	Dwie, trzy lub cztery równe kolumny, z których każda zawiera własne bloki
Pokaż, jeśli	Sekcja, która jest wysyłana wyłącznie wtedy, gdy warunek dotyczący zmiennych jest spełniony, na przykład variables.total > 100 lub language == "de"

Budowanie marki

Zakładka Branding dotyczy całego układu:

• Kolory - podstawowe, dodatkowe, tekstu, tła treści, tła zawartości
• Typografia - czcionka nagłówków, czcionka tekstu głównego, wysokość wiersza
• Układ - poniższe opcje regulacji odstępów

Kontrola	Co się zmienia	Zakres
Maksymalna szerokość	Jak bardzo może się zwiększyć objętość treści wiadomości e-mail	400-800 pikseli
Wyściółka do pojemników	Odstępy wokół całego obszaru treści	0-40 pikseli
Wypełnienie blokowe (boki)	Odstęp między treścią a lewą i prawą krawędzią	0-40 pikseli
Wypełnienie blokowe (u góry i u dołu)	Odstępy powyżej i poniżej treści każdego bloku	0-40 pikseli
Odstępy między blokami	Odstęp pionowy między jednym blokiem a kolejnym	0-40 pikseli

Proszę ustawić niewielkie wartości opcji Wypełnienie bloków (u góry i u dołu). Opcja Odstępy między blokami już zapewnia rozdzielenie bloków, więc zwiększenie obu wartości spowoduje powstanie dużych przerw.

Jeśli nadał Pan/Pani nazwy kolorom marki w sekcji Ustawienia > Marka i czcionki, wszystkie próbki kolorów w kreatorze wyświetlają je w postaci próbek pod polem, a kliknięcie próbki powoduje zastosowanie tego koloru. Próbka koloru aktualnie wybranego w polu jest podświetlona. Zobacz Ustawienia.

W menu rozwijanym czcionek dostępne są czcionki systemowe (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), zestaw czcionek Google (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk) oraz dowolną czcionkę niestandardową, którą Państwo przesłali w sekcji Ustawienia > Marka i czcionki.

Nagłówek i stopka

Nagłówek i stopka to obszary klikalne znajdujące się u góry i u dołu obszaru roboczego. W każdym z nich można zastosować zapisany szablon, dzięki czemu zmiana identyfikacji wizualnej spowoduje jednoczesną aktualizację wszystkich układów, lub opcję Niestandardowe (tylko ten układ) w celu wprowadzenia jednorazowej zmiany. Zobacz Szablony nagłówków i stopek.

Tryb sformatowanego tekstu / HTML

W tym trybie okno edycji stanowi pojedynczy edytor z przełącznikiem „Tekst sformatowany / HTML” oraz oddzielnym przełącznikiem Podgląd.

• Tryb tekstu sformatowanego udostępnia Państwu znany pasek narzędzi do formatowania.
• HTML udostępnia pole tekstowe w postaci surowej - proszę wkleić gotową wiadomość e-mail, jeśli już ją Państwo mają.
• Funkcja Wstaw obraz pozwala dodać obraz przechowywany na serwerze - pochodzący z Państwa biblioteki multimediów lub z podanego linku.

Podgląd ma charakter wyłącznie do odczytu i wyświetla tagi Liquid w niezmienionej postaci. Aby zobaczyć rzeczywiste wartości, proszę wysłać wiadomość e-mail testową.

Podłączenie do serwisu Shopify Flow

Układ to dopiero połowa zadania - Shopify Flow musi dostarczyć wartości do Państwa symboli zastępczych.

Każdy szablon zawiera kartę „Użyj w Shopify Flow”, w której znajdują się dokładne zmienne (w formacie JSON) do wklejenia w akcji Send Transactional Email, z już poprawnie wpisanymi nazwami kluczy. Proszę skopiować tę treść, wkleić ją do Shopify Flow i zastąpić wszelkie symbole zastępcze typu <pick a Flow variable>.

Układ dla każdego etapu procesu Shopify Flow wybiera się na stronie konfiguracji danej akcji, na której wyświetlany jest podgląd tego układu wypełniony zmiennymi testowymi. Dzięki jasnym nazwom i realistycznym zmiennym testowym łatwo jest tam rozpoznać właściwy układ.

Pełny przewodnik: Przekazywanie danych z serwisu Shopify Flow.

Podgląd z zmiennymi testowymi

W zakładce Zmienne testowe wyświetlone są wszystkie zmienne typu {{ variables.x }} wykryte przez aplikację, dzięki czemu można wprowadzić przykładowe wartości i sprawdzić, czy projekt wyświetla się poprawnie.

Aby przekazać tablicę do bloku Loop, należy wprowadzić ją w tej zakładce jako tablicę JSON.

Wyślij wiadomość e-mailową testową

Proszę skorzystać z opcji Wyślij e-mail testowy w edytorze układu. Spowoduje to rzeczywiste wyrenderowanie układu i wysłanie wiadomości z wybranego przez Państwa nadawcy, z tematem opatrzonym prefiksem [TEST]. Jest to jedyny sposób na sprawdzenie, czy kod Liquid faktycznie się wyświetla, ponieważ podgląd na stronie nie przeprowadza jego oceny.

Po uruchomieniu serwisu proszę sprawdzić sekcję Historia - wysyłka, w której symbol zastępczy nie wygenerował żadnego wyniku, zostanie oznaczona jako Puste zmienne. Zobacz Historia i rozwiązywanie problemów.

Ponowne wykorzystanie projektu

• Więcej → Opcja Zapisz jako szablon pozwala zapisać projekt, dzięki czemu będzie można ponownie z niego skorzystać. Zapisane projekty znajdują się w sekcji Moje szablony, w której przechowywane są wyłącznie projekty zapisane przez użytkownika.
• Więcej → Funkcja Duplikuj tworzy kopię układu w tym samym miejscu.
• Więcej → Funkcja Eksportuj umożliwia pobranie pliku, a opcja Importuj na stronie listy pozwala na zaimportowanie pliku w formacie .zip lub .json, wyeksportowanego wcześniej z aplikacji - jest to przydatne przy przenoszeniu projektu między sklepami.

Usuwanie układu

W każdej chwili mogą Państwo usunąć układ. Jeśli któryś z kroków w Shopify Flow nadal odwołuje się do tego układu, zostanie on oznaczony etykietą „Używany w Shopify Flow”, a komunikat potwierdzający usunięcie zawiera odpowiednią informację - nie uniemożliwia to jednak usunięcia.

Po usunięciu każdy etap procesu Shopify Flow, który nadal odwołuje się do tego elementu, kończy się niepowodzeniem z komunikatem Email template not found, który pojawia się w historii. Aby to naprawić, proszę skierować te etapy na inny układ.

Powiązane

• Bloki treści: produkt, rabat, odliczanie, śledzenie i inne - produkt, rabat, odliczanie, śledzenie oraz inne bloki treści.
• Przekazywanie danych z serwisu Shopify Flow - przekazywanie wartości.
• Zmienne i ciecze - pełny opis zmiennych.
• Załączniki i obrazy - pliki, obrazy i ograniczenia rozmiaru.
• Szablony nagłówków i stopek - elementy identyfikacji wizualnej do wielokrotnego wykorzystania.
• E-maile marketingowe i rezygnacje z subskrypcji - czym wyróżnia się szablon marketingowy.
• Ustawienia - kolory marki, niestandardowe czcionki oraz domyślne ustawienia wiadomości e-mail obowiązujące w całym sklepie.