Jak używać niestandardowego CSS do stylizowania widżetów Klaviyo Reviews

Czego się dowiesz?

Dowiedz się więcej o niestandardowym CSS dla Klaviyo Reviews, w tym jak wdrożyć kilka podstawowych zastosowań. W przypadku bardziej zaawansowanych zastosowań przejdź do naszego zasobu dla deweloperów dotyczącego niestandardowego CSS dla Klaviyo Reviews. Większość dostosowań widżetu można wdrożyć za pomocą edytorów typu „przeciągnij i upuść”; CSS jest wymagany tylko w przypadku zaawansowanych zastosowań.

Informacje o niestandardowym kodzie CSS dla Klaviyo Reviews

Klaviyo Reviews udostępnia szeroki zakres selektorów klas CSS, których można użyć do pisania niestandardowego kodu CSS i stosowania zaawansowanych opcji stylizacji do widżetów recenzji. Aby dowiedzieć się więcej, przejdź do naszego kompletnego słownika klas CSS Klaviyo Reviews.

Jak zastosować niestandardowy CSS

Możesz zastosować niestandardowy CSS w Klaviyo Reviews w taki sam sposób, jak każdy inny niestandardowy CSS:

• Dodaj niestandardowy CSS do głównego arkusza stylów CSS w witrynie.
• Wstaw znaczniki <style> w kodzie pojedynczej strony, aby zastosować CSS na tej stronie.
• Osadź CSS w jednym elemencie HTML (np. div), aby zastosować go tylko do tego elementu.
• Dodaj niestandardowy CSS do całej witryny w Ustawienia motywu > Niestandardowy CSS (Shopify) lub Style > CSS (WooCommerce).

Skupimy się tutaj na ostatniej opcji, ponieważ jest ona najprostsza do wdrożenia.

Pamiętaj, że Klaviyo Reviews, w tym style domyślne, zwykle ładują się po CSS z Twojej platformy e-commerce. Oznacza to, że ważne jest używanie precyzyjnych selektorów, aby Twój niestandardowy CSS nie został nadpisany przez ustawienia domyślne.

Zastosuj niestandardowy CSS dla Shopify

1. W panelu administracyjnym Shopify przejdź do sekcji Sklep internetowy > Motywy.
2. W menu dodatkowych opcji (3 kropki) dla bieżącego motywu kliknij Duplicate.
   
   Nie zaleca się wprowadzania zmian w bieżącym motywie, gdy jest aktywny, ponieważ te zmiany mogą być widoczne dla odwiedzających witrynę, zanim będzie można je sprawdzić i rozwiązać ewentualne problemy.

3. Kliknij Dostosuj obok nowej kopii motywu.
4. Kliknij ikonę ustawień motywu.
   

5. Wybierz Niestandardowy CSS z menu.
   

6. Dodaj niestandardowy CSS.
   

1. Przejdź do strony w edytorze, na której wyświetlają się widżety opinii (np. Domyślny produkt).
2. Sprawdź zmiany, a następnie kliknij Opublikuj.

Dodaj niestandardowy CSS dla WooCommerce

Aby zastosować CSS do określonej strony lub stron, musisz użyć selektora identyfikatora strony,.page-id-YOUR_PAGE_ID . Dowiedz się, jak znaleźć identyfikator strony.

1. W panelu administracyjnym WordPress przejdź do Wygląd > Edytor.
2. Wybierz Style.
   

3. Otwórz menu z trzema kropkami (Więcej).
4. Wybierz Dodatkowy CSS.
   

5. Dodaj niestandardowy CSS.
   

1. Sprawdź zmiany, a następnie kliknij Opublikuj.

Przypadki użycia niestandardowego CSS

Poniższe fragmenty kodu CSS obejmują kilka podstawowych zastosowań. Bardziej zaawansowane dostosowanie wymaga wsparcia programisty. Jeżeli nie masz w zespole programisty i nie czujesz się komfortowo, pisząc kod samodzielnie, rozważ skontaktowanie się z partnerem Klaviyo w celu uzyskania pomocy.

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

#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}  

#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}

Dodatkowe źródła