Jak dostosować styl Klaviyo Customer Hubu

Czego się dowiesz?

Dowiedz się więcej o opcjach projektowych stylizowania wysuwanego panelu Klaviyo Customer Hub i o tym, jak możesz dopasować jego wygląd do swojej marki. Ponieważ interfejs Klaviyo Customer Hub jest integralną częścią doświadczenia klienta, najlepszą praktyką jest jego stylizacja tak, aby wyglądał jak rozszerzenie Twojej witryny.

Kilka słów na początek

Ten przewodnik wyjaśnia, jak dostosować styl interfejsu Klaviyo Customer Hub. Przed kontynuowaniem upewnij się, że funkcja Klaviyo Customer Hub jest włączona.

Dowiedz się więcej o Klaviyo Customer Hub.

Opcje projektu Klaviyo Customer Hub

Szuflada Klaviyo Customer Hub ma wiele konfigurowalnych kart:

• Dla Ciebie
• Zamówienia
• Profil
• Czat (widoczny tylko wtedy, gdy włączony jest czat online)
  
  

Masz różne opcje dostosowywania projektu na każdej z tych kart, w tym edytowanie tekstu, kolorów, czcionek i nie tylko. Wybory dostosowywania stylu są dziedziczone na każdej karcie w szufladzie Klaviyo Customer Hub, aby zapewnić spójne doświadczenie zgodne z marką dla osób odwiedzających Twoją witrynę.

Podczas edytowania ustawień projektu dla Klaviyo Customer Hub w Klaviyo użyj przycisku Wyświetl na żywo, aby zobaczyć zmiany wprowadzone w interfejsie huba na swojej stronie internetowej. Pamiętaj, że jeśli Klaviyo Customer Hub jest aktywny, zapisane zmiany są publikowane w Twojej witrynie.

Dostosuj główne wezwanie do działania (CTA) dla każdej karty

Domyślnie, gdy kupujący loguje się na swoje konto klienta, Klaviyo wyświetla „Welcome, first.name” jako główny nagłówek na karcie Dla Ciebie w wysuwanym panelu Klaviyo Customer Hub. Tego tekstu nie można edytować.

W przypadku niezalogowanych kupujących możesz jednak napisać własny nagłówek wezwania do działania (CTA), który będzie wyświetlany nad przyciskiem „Zaloguj się” przed zalogowaniem. Może to pomóc zachęcić niezalogowanych odwiedzających do zalogowania się i zaangażowania się w interfejs Klaviyo Customer Hub.

W poniższym przykładzie główne wezwanie do działania (CTA) brzmi „Zdobywaj nagrody, śledź zamówienia i zapisuj historię zakupów.”

Uwaga: wskaźnik „dostępne nagrody” wyświetla się automatycznie, jeśli masz jedno z poniższych:

1. kupon statyczny skonfigurowany w Klaviyo Customer Hub LUB
2. Jeśli masz włączoną integrację lojalnościową (np. Smile).

Aby zaktualizować główne wezwanie do działania (CTA) w interfejsie Klaviyo Customer Hub:

1. Otwórz kartę Usługa - Klaviyo Customer Hub w lewym panelu nawigacyjnym Klaviyo.
2. Kliknij przycisk Ustawienia.
3. W sekcji Wiadomości powitalne dostosuj wezwanie do działania (CTA), które ma się wyświetlać nad przyciskiem „zaloguj się” dla niezalogowanych kupujących. Możesz to zrobić dla każdej karty wysuwanego panelu Klaviyo Customer Hub:
   • Dla Ciebie
   • Zamówienia
   • profil
     

4. Kliknij Zapisz.

Zaprojektuj Klaviyo Customer Hub

Aby uzyskać opcje projektowania służące do dostosowania interfejsu Klaviyo Customer Hub:

1. Przejdź do Klaviyo Customer Hub w lewym panelu nawigacyjnym Klaviyo.
2. Wybierz Projekt.
3. Wybierz Hub u góry podglądu.
   
   
   

4. W menu Styl można dostosować język wyświetlania, czcionki, kolor i ustawienia stylu oraz podejrzeć, jak te zmiany będą wyglądać na kanwie interfejsu Klaviyo Customer Hub
5. Opcjonalnie możesz zastosować zaawansowane style za pomocą niestandardowego CSS. Więcej informacji znajdziesz w sekcji Niestandardowy CSS poniżej.
6. Więcej informacji na temat wybierania innego języka znajdziesz w artykule Obsługa języka i ustawień regionalnych w Klaviyo Customer Hub.
7. Kliknij Zapisz, aby opublikować zmiany.

Dostosuj widżet Klaviyo Customer Hub

Oprócz projektowania samego Klaviyo Customer Hub możesz też dostosować widżet huba, czyli mały, pływający element na Twojej stronie internetowej, w który odwiedzający mogą kliknąć, aby szybko otworzyć interfejs Klaviyo Customer Hub. Widżet wyświetla klientowi aktualne informacje, takie jak przychodzące wiadomości na czacie i opinie podczas dodawania produktów do listy Ulubione. Zalecamy włączenie interfejsu użytkownika widżetu, aby zwiększyć znaczące zaangażowanie klientów, zwłaszcza gdy włączone są czat online i Ulubione.

Aby dostosować widżet huba:

1. W lewym menu nawigacyjnym Klaviyo wybierz Klaviyo Customer Hub.
2. Wybierz Projekt.
3. Wybierz widżet u góry podglądu.

4. W menu Ogólne można dostosować, którzy kupujący powinni widzieć widżet oraz który widok Klaviyo Customer Hub ma się otwierać po kliknięciu widżetu.
   • Wybierz, którzy kupujący mają widzieć widżet w Twojej witrynie:
     • Wszyscy kupujący (rozpoznani, zalogowani i niezalogowani) – Widżet wyświetla się dla wszystkich.
     • Rozpoznani lub zalogowani kupujący – Widżet pojawia się tylko wtedy, gdy Klaviyo rozpozna osobę (Zidentyfikowana) lub gdy jest ona zalogowana (Uwierzytelniona). To idealne rozwiązanie, aby ograniczyć natłok treści dla zupełnie nowych odwiedzających, a jednocześnie utrzymać spersonalizowane doświadczenie dla powracających.
     • Tylko zalogowani kupujący – Widżet pojawia się tylko u osób z aktywną sesją Shopify.
5. W menu Styl można dostosować ustawienia Koloru i Stylu oraz sprawdzić podgląd tego, jak te zmiany będą wyglądać w płótnie interfejsu widżetu Klaviyo Customer Hub
6. W menu Układ możesz dostosować sposób pozycjonowania widżetu w witrynie.
7. Kliknij Zapisz, aby opublikować zmiany.

Dostosuj dodatkowe stany widżetu

Dodatkowe stany widżetu możesz dostosować, wybierając strzałkę obok Ikona i przechodząc do innego stanu widżetu.

• Stan Dodaj do koszyka jest widoczny na stronach szczegółów produktu. Konfigurowalny widżet zachęca kupujących do dokonania zakupu lub zapisania produktu na później, gdy przewiną poniżej górnej części strony szczegółów produktu, gdy tradycyjny przycisk Dodaj do koszyka nie jest już widoczny. Dowiedz się więcej z artykułu Jak skonfigurować widżet Dodaj do koszyka w Klaviyo Customer Hub.

Niestandardowy CSS dla Klaviyo Customer Hub

Jeśli opcje projektowania Klaviyo Customer Hub nie spełniają potrzeb związanych z brandingiem, można zastosować zaawansowane style za pomocą niestandardowego CSS.

Chociaż Klaviyo Customer Hub używa resetów CSS, aby uniknąć kolizji z CSS Twojej witryny, może być konieczne dodanie niestandardowego CSS, aby obsłużyć przypadki brzegowe lub zastosować unikalny styl, taki jak wysuwany panel lub niestandardowe wartości promienia zaokrąglenia obramowania.

Zastosuj niestandardowy CSS

Dodaj dowolny niestandardowy CSS bezpośrednio do sekcji Niestandardowy CSS w ustawieniach projektu Klaviyo Customer Hub i pamiętaj, aby zapisać zmiany.

Wszystkie podstawowe elementy w Klaviyo Customer Hub mają nazwy klas z prefiksem kl-hub-:

• Wszystkie elementy tekstowe mają klasę kl-hub-text, natomiast nagłówki mają klasę kl-hub-heading
• Przyciski mają klasę kl-hub-button oraz obejmują też ich warianty (np. kl-hub-button-primary, kl-hub-button-secondary itd.)
• Sam panel wysuwany Klaviyo Customer Hub ma klasę kl-hub-drawer
• Pola wprowadzania tekstu mają klasę kl-hub-input
• Wszystkie bloki treści mają klasę kl-hub-content-block i zawierają też Nazwę wewnętrzną bloku (np. kl-hub-content-block-reward-program dla bloku treści o nazwie „Program nagród”)

To nie jest wyczerpująca lista; więcej można znaleźć, analizując Klaviyo Customer Hub za pomocą debuggera przeglądarki. Jeśli element ma klasę zaczynającą się od kl-hub-, można bezpiecznie użyć jej w niestandardowym CSS.

Przykład CSS

Jeśli chcesz, aby wszystkie przyciski i nagłówki w Klaviyo Customer Hub były zapisane wielkimi literami, możesz wpisać następujący niestandardowy CSS:

.kl-hub-button, .kl-hub-heading {

    text-transform: uppercase;
}