사용자 정의 CSS를 사용하여 클라비요 리뷰 위젯의 스타일을 지정하는 방법

학습 내용

몇 가지 기본 사용 사례를 구현하는 방법을 포함하여 클라비요 리뷰용 사용자 지정 CSS에 대해 알아보세요. 더 고급 사용 사례에 대한 자세한 내용은 클라비요 리뷰용 커스텀 CSS에 대한 개발자 리소스를 참조하세요. 대부분의 위젯 사용자 지정은 드래그 앤 드롭 편집기를 사용하여 구현할 수 있으며, CSS는 고급 사용 사례에만 필요합니다. 

클라비요 리뷰용 맞춤 CSS 정보 

클라비요 리뷰는 사용자 정의 CSS를 작성하고 리뷰 위젯에 고급 스타일링 옵션을 적용하는 데 사용할 수 있는 다양한 CSS 클래스 선택기를 제공합니다. 자세한 내용은 클라비요 리뷰 CSS 클래스 전체 사전을 참조하세요. 

사용자 정의 CSS 적용 방법 

다른 사용자 정의 CSS를 적용하는 것과 동일한 방식으로 Klaviyo 리뷰에 사용자 정의 CSS를 적용할 수 있습니다: 

• 사이트의 기본 CSS 스타일시트에 사용자 정의 CSS를 추가합니다.
• <style> 단일 페이지의 코드 내에 태그를 삽입하여 해당 페이지에 CSS를 적용합니다.
• 단일 HTML 요소(예: div)에 CSS를 삽입하여 해당 요소에만 적용합니다.
• 테마 설정 > 사용자 지정 CSS(Shopify) 또는 스타일 > CSS (WooCommerce)에서 전체 사이트에 사용자 지정 CSS를 추가합니다. 

여기서는 구현이 가장 간단한 마지막 옵션에 중점을 두겠습니다. 

기본 스타일을 포함한 클라비요 리뷰는 일반적으로 이커머스 플랫폼에서 CSS를 로드한 후에 로드됩니다. 즉, 정확한 선택기를 사용하여 사용자 정의 CSS가 기본값으로 덮어쓰이지 않도록 하는 것이 중요합니다. 

Shopify용 사용자 지정 CSS 적용

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다. 
2. 현재 테마의 추가 옵션 메뉴(점 3개)에서 복제를 클릭합니다.
   
   변경 사항을 검토하고 문제를 해결하기 전에 사이트 방문자에게 편집 내용이 표시될 수 있으므로 현재 테마가 라이브 상태인 동안에는 편집하지 않는 것이 좋습니다. 
3. 테마의 새 사본 옆의 사용자 지 정을 클릭합니다. 
4. 테마 설정 아이콘을 클릭합니다.
   
5. 메뉴에서 사용자 정의 CSS를 선택합니다.
   
6. 사용자 정의 CSS를 추가합니다.
   
   아래 섹션에서 샘플 CSS 스니펫을 복사할 수 있습니다. 
7. 편집기에서 리뷰 위젯이 표시되는 페이지(예: 기본 제품)로 이동합니다. 
8. 편집 내용을 검토한 다음 게시를 클릭합니다. 

WooCommerce용 사용자 지정 CSS 추가

페이지 ID 선택기(.page-id-YOUR_PAGE_ID )를 사용해야 합니다. 를 클릭하여 특정 페이지에 CSS를 적용합니다. 페이지 ID를 찾는 방법을 알아보세요.

1. 워드프레스 관리자에서 모양 > 편집기로 이동합니다. 
2. 스타일을 선택합니다. 
   
3. 점 3개(자세히) 메뉴를 엽니다. 
4. 추가 CSS를 선택합니다. 
   
5. 사용자 정의 CSS를 추가합니다.
   
   아래 섹션에서 샘플 CSS 스니펫을 복사할 수 있습니다. 
6. 편집 내용을 검토한 다음 게시를 클릭합니다. 

사용자 정의 CSS 사용 사례 

아래의 CSS 스니펫은 몇 가지 기본적인 사용 사례를 다룹니다. 고급 사용자 지정에는 개발자의 지원이 필요합니다. 팀에 개발자가 없고 직접 코드를 작성하는 데 익숙하지 않다면 클라비요 파트너에게 도움을 요청하세요.

#클라비요-제품-리뷰-래퍼 {
  .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; 
  }
}

#ㅋㅋㅋㅋ-제품 리뷰 래퍼 .kl_reviews__button:nth-child(1) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}  

#ㅋㅋㅋㅋ제품 리뷰 래퍼 .kl_reviews__button:nth-child(2) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}

추가 자료 

• 클라비요 리뷰 CSS 클래스 참조(개발자 리소스)
• 리뷰 위젯을 사용자 지정하는 방법
• 리뷰 제출 페이지를 사용자 지정하는 방법