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
• Koszyk (widoczny tylko po włączeniu)
• Czat (widoczny tylko po włączeniu czatu online)
• Profil

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ń wyglądu Klaviyo Customer Hub w Klaviyo użyj przycisku Podgląd, aby zobaczyć zmiany wprowadzone w interfejsie huba na Twojej stronie internetowej.

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ę Witryna > Klaviyo Customer Hub w lewym panelu nawigacyjnym w Klaviyo.
2. Otwórz Projekt > Edytuj swój Hub
3. W panelu układu po prawej stronie, w sekcji Stały układ, dostosuj wezwanie do działania (CTA), aby wyświetlało się w bloku Logowanie. Możesz to zrobić na każdej karcie 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 na karcie Website.
2. Wybierz Projekt w nawigacji Klaviyo Customer Hub.
3. Na górze strony Projekt zobaczysz kartę, która pokazuje status Twojego Hubu. Wybierz przycisk Edytuj swój Klaviyo Customer Hub , aby przejść do edytora Klaviyo Customer Hub.
   

4. W edytorze wybierz ikonę palety z menu nawigacji po lewej stronie.
5. 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

6. Opcjonalnie możesz zastosować zaawansowane style za pomocą niestandardowego CSS. Więcej informacji znajdziesz w sekcji Niestandardowy CSS poniżej.
7. Więcej informacji na temat wybierania innego języka znajdziesz w artykule Obsługa języka i ustawień regionalnych w Klaviyo Customer Hub.
8. Kliknij Opublikuj, aby wprowadzić zmiany na żywo.

Dostosuj widżet Klaviyo Customer Hub

Oprócz projektowania samego Klaviyo Customer Hub możesz też dostosować widżet hubu — to niewielki, pływający element na Twojej stronie, który odwiedzający mogą kliknąć, aby szybko otworzyć interfejs Klaviyo Customer Hub. Widżet pokazuje kupującemu aktualne informacje, takie jak przychodzące wiadomości czatu oraz potwierdzenia podczas dodawania produktów do listy Ulubionych. Zalecamy włączenie interfejsu widżetu, aby zwiększyć zaangażowanie klientów, ale nie jest on wymagany, aby Hub był aktywny.

Aby dostosować widżet huba:

1. Wejdź do edytora Klaviyo Customer Hub.
2. W pływającym panelu sterowania nad Twoim Hubem przełącz stan z Otwarte na Zamknięte. Powinno to otworzyć wysuwany panel Edytuj widżet .
3. W sekcji Ustawienia widżetu możesz dostosować, którzy kupujący mają 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.
4. Możesz też skonfigurować kształt, kolor, ikonę i układ swojego widżetu.

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;
}

Dodatkowe źródła