Jak wyświetlać produkty pionowo w wiadomościach e-mail
Czego się dowiesz?
Dowiedz się, jak wyświetlać produkty w sekwencjach porzuconego koszyka zakupowego oraz potwierdzenia zamówienia pionowo (tj. z obrazem nad informacjami o produkcie, a nie obok).
Utwórz pionowy blok produktu
Poniższe instrukcje przekształcają istniejącą poziomą dynamiczną tabelę w sekcję z obrazem produktu nad jego szczegółami. Sekcja powtarza się dla każdego produktu w koszyku lub zamówieniu. Jeśli nie masz jeszcze e-maila sekwencji zawierającego dynamiczną tabelę, znajdź go w bibliotece sekwencji.
- Wybierz Sekwencje na pasku bocznym Klaviyo.
- Przejdź do sekwencji porzuconego koszyka zakupowego lub potwierdzenia zamówienia.
- Jeśli e-mail, który planujesz edytować, ma status Na żywo, przed edycją wybierz Ręcznie z listy rozwijanej statusu na jego karcie wiadomości. Automatycznie przestanie wysyłać; odbiorcy, którzy dotrą do czasu wysyłki, przejdą do statusu Wymaga sprawdzenia. Pozostaw e-maile, które są już w statusie Szkic lub Ręcznie, w ich obecnym statusie.
- Wybierz e-maila zawierającego Twoją tabelę dynamiczną (tabelę, która wyświetla produkty z czyjegoś koszyka lub zamówienia), a następnie kliknij Edytuj, aby otworzyć edytor e-maili.
- Dodaj nową sekcję bezpośrednio pod blokiem tabeli dynamicznej.

- Dodaj do nowej sekcji blok obrazu i blok tekstu — obraz nad tekstem.
- Wybierz swoją oryginalną tabelę dynamiczną. W sekcji Style skopiuj wartości z pól Kolekcja wierszy i Alias wiersza.
- Wybierz nową sekcję, otwórz Wyświetlanie i kliknij Dodaj powtarzanie treści.

- Wklej wartość Kolekcja wierszy z oryginalnej tabeli do pola Powtórz dla, a wartość Alias wiersza do pola Alias elementu, a następnie kliknij Zapisz.

- Wybierz oryginalną tabelę, otwórz Treść i wybierz komórkę zawierającą obraz produktu. Kliknij Zastąp w przypadku obrazu dynamicznego.

- W wyświetlonym oknie modalnym skopiuj wszystko z pola Zmienna dynamiczna lub dynamiczny adres URL, a następnie zamknij okno modalne bez zmieniania oryginalnego obrazu.

- Kliknij blok obrazu w nowej sekcji.
- Kliknij Wybierz obraz.
- Wybierz Dynamiczny obraz i wklej skopiowaną wartość w polu Zmienna dynamiczna lub dynamiczny URL.
- Kliknij Zapisz.
- Wróć do komórki z obrazem produktu w oryginalnej tabeli i skopiuj znacznik w polu Adres linku.

- Wklej ten znacznik w polu Adres linku w swoim nowym bloku obrazu.
- Na karcie Zawartość w oryginalnej tabeli wybierz komórkę zawierającą szczegóły produktu i skopiuj jej tekst, w tym znaczniki personalizacji i linki.

- Wklej tekst do nowego bloku tekstowego.
- Kliknij Podgląd i wybierz przykładowe zdarzenie dla wyzwalacza sekwencji, które zawiera dane produktu. Jeśli to możliwe, użyj zdarzenia z wieloma produktami. Sprawdź, czy obraz każdego produktu pojawia się nad odpowiadającymi mu szczegółami oraz czy linki do obrazów są poprawne. Jeśli coś wygląda nieprawidłowo, sprawdź wartości Powtórz dla oraz Alias elementu w tej sekcji, dynamiczny URL obrazu, adres linku oraz skopiowany tekst i znaczniki personalizacji.
- Gdy nowa sekcja będzie gotowa, usuń oryginalny blok tabeli.
- Opcjonalnie zapisz nową sekcję jako treści uniwersalne, aby użyć jej w innych wiadomościach w sekwencji.
- Poczekaj, aż Twoje zmiany zostaną zapisane, a potem otwórz Więcej opcji obok Zakończ i wybierz Wróć do sekwencji. Jeśli przed edycją zmieniłeś ten e-mail z Aktywny na Ręczny, wybierz Aktywny z listy rozwijanej statusu na karcie wiadomości, aby wznowić automatyczne wysyłanie.
Odbiorcy już znajdujący się w Needs Review pozostają tam, gdy przywrócisz e-mail do Live. Sprawdź ich osobno, aby zdecydować, czy wysłać, czy anulować ich wiadomości. Dowiedz się, jak zarządzać odbiorcami w Needs Review.
Rezultat
Po wykonaniu tych kroków e-mail będzie zawierał pionowy blok produktu (z obrazami nad informacjami o produkcie), zamiast obrazów produktu i informacji wyświetlanych poziomo.

Dodatkowe źródła
- Dark mode email design best practices
Learn about dark mode, a device setting some users turn on to darken their displays. This setting impacts how emails are displayed. Dark mode is an end user setting that is selected at the device level, and Klaviyo does not have direct control over how dark mode is implemented on each device.
- How to update your brand styles in Klaviyo
Learn what to update in Klaviyo when rebranding or refreshing your brand’s design.