Jak używać niestandardowego CSS do stylizacji widżetów Klaviyo Reviews?
Czego się dowiesz
Dowiedz się więcej o niestandardowym CSS dla Klaviyo Reviews, w tym o tym, jak wdrożyć kilka podstawowych przypadków użycia. Aby zapoznać się z bardziej zaawansowanymi przypadkami użycia, przejdź do naszego zasobu dla deweloperów na temat niestandardowego CSS dla Klaviyo Reviews. Większość dostosowań widżetów można zaimplementować za pomocą edytorów typu "przeciągnij i upuść"; CSS jest wymagany tylko w zaawansowanych przypadkach użycia.
Wdrożenie niestandardowego CSS dla widżetów recenzji wymaga edycji kodu twojej witryny. Jest to zalecane tylko dla doświadczonych technicznie marketingowców lub tych, którzy mają dostęp do programisty. Chociaż nasz produkt pomaga w dostosowaniu CSS, nasz zespół ds. pomocy nie może pomóc Ci w dostosowaniu widżetu poza ogólnymi wskazówkami zawartymi w tej dokumentacji. Aby zachować bezpieczeństwo Twoich danych, Klaviyo's zespół ds. pomocy nie jest w stanie otworzyć Twoich plików HTML.
O niestandardowym CSS dla Klaviyo Reviews
Klaviyo Reviews zapewnia szeroki zakres selektorów klas CSS, które mogą być używane do pisania niestandardowych CSS i stosowania zaawansowanych opcji stylizacji do twoich widżetów recenzji. Aby uzyskać więcej informacji, przejdź do naszego pełnego słownika klas CSS Klaviyo Reviews.
Jak zastosować niestandardowy CSSJak zastosować niestandardowy CSS
Możesz zastosować niestandardowy CSS do Klaviyo Reviews w taki sam sposób, jak w przypadku każdego innego niestandardowego CSS:
- Dodaj niestandardowy kod CSS do głównego arkusza stylów CSS witryny.
- Wstaw <style> styl <> znacznik w kodzie pojedynczej strony, aby zastosować CSS do tej strony.
- Osadź CSS w pojedynczym elemencie HTML element (np. div), aby zastosować go tylko do tego elementu element.
- Dodaj niestandardowy CSS do całej witryny w Ustawieniach motywu > Niestandardowy CSS (Shopify) lub Style > CSS (WooCommerce).
Skupimy się tutaj na ostatniej opcji, ponieważ jest ona najprostsza do wdrożenia.
Zauważ, że Klaviyo Reviews, w tym domyślne style, zazwyczaj ładują się po CSS z twojej platformy e-commerce. Oznacza to, że ważne jest, aby używać precyzyjnych selektorów, aby Twój niestandardowy CSS nie został nadpisany przez domyślne ustawienia.
Zastosuj niestandardowy CSS dla ShopifyZastosuj niestandardowy CSS dla Shopify
- W panelu administracyjnym Shopify przejdź do sklepu internetowego > Motywy.
- W menu opcji dodatkowych (3 kropki) dla bieżącego motywu kliknij opcję Duplikuj.
Nie zaleca się wprowadzania zmian w bieżącym motywie, gdy jest on aktywny, ponieważ zmiany te mogą zostać wyświetlone odwiedzającym witrynę, zanim będziesz mógł przejrzeć zmiany i rozwiązać wszelkie problemy. - Kliknij przycisk Dostosuj obok nowej kopii motywu.
- Kliknij ikonę ustawień motywu.
- Wybierz opcję Własny CSS z menu.
- Dodaj swój niestandardowy CSS.
Przykładowe fragmenty CSS są dostępne do skopiowania w sekcji poniżej. - Przejdź do strony w edytorze, na której mogą pojawić się Twoje recenzje (np. Domyślny produkt).
- Przejrzyj wprowadzone zmiany, a następnie kliknij przycisk Opublikuj.
Dodaj niestandardowy CSS dla WooCommerce
Musisz użyć selektora identyfikatora strony,.page-id-YOUR_PAGE_ID aby zastosować CSS do określonej strony lub stron. Dowiedz się, jak znaleźć identyfikator strony.
- W panelu administracyjnym Wordpress przejdź do Wygląd > Edytor.
- Wybierz style.
- Otwórz menu z trzema kropkami(Więcej).
- Wybierz opcję Dodatkowe CSS.
- Dodaj swój niestandardowy CSS.
Przykładowe fragmenty CSS są dostępne do skopiowania w sekcji poniżej. - Przejrzyj wprowadzone zmiany, a następnie kliknij przycisk Opublikuj.
Niestandardowe przypadki użycia CSS
Poniższe fragmenty CSS obejmują kilka podstawowych przypadków użycia. Bardziej zaawansowane dostosowywanie wymaga pomocy dewelopera. Jeśli nie masz programisty w swoim zespole i nie czujesz się komfortowo pisząc kod samodzielnie, rozważ skontaktowanie się z partneremKlaviyo w celu uzyskania pomocy.
Wygląd ikony oceny (gwiazdka)
Zastąp poniższe adresy URL obrazami reprezentującymi odpowiednio preferowaną pełną gwiazdę, częściową gwiazdę i pustą gwiazdę. Zauważ, że dla Shopify sklep, twoje adresy URL muszą odnosić się do obrazów sklep w Shopify, ze względu na ich zasady.
Klaviyo-product-reviews-wrapper {
.kl_reviews__star {
display: none;
}
.kl_reviews__full_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/full-moon.png?v=1705073898");
background-size: cover;
}
.kl_reviews__partial_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/last-quarter-moon.png?v=1705073898");
background-size: cover;
}
.kl_reviews__empty_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/new-moon.png?v=1705073898");
background-size: cover;
}
}
Rozmiar miniatury obrazu
Ustaw określoną szerokość dla obrazów przesłanych przez klienta na liście recenzji.
Klaviyo-product-reviews-wrapper .kl_reviews__review__image { width: 225px; }
Kolory i style przycisków
Zastosuj style tylko do przycisku Napisz recenzję.
Klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
} Zastosuj style tylko do przycisku Zadaj pytanie.
Klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
}