맞춤 CSS로 Klaviyo 리뷰 위젯 스타일을 지정하는 방법

학습 내용

Klaviyo 리뷰용 사용자 지정 CSS와 몇 가지 기본 사용 사례를 구현하는 방법을 알아보세요. 더 고급 사용 사례는 Klaviyo 리뷰용 맞춤 CSS에 대한 개발자 리소스에서 확인해 보세요. 대부분의 위젯 맞춤 설정은 드래그 앤 드롭 편집기를 사용해 구현할 수 있으며, CSS는 고급 사용 사례에만 필요해요.

Klaviyo 리뷰용 사용자 정의 CSS 정보

Klaviyo 리뷰는 다양한 CSS 클래스 선택자를 제공하며, 이를 사용해 맞춤 CSS를 작성하고 리뷰 위젯에 고급 스타일링 옵션을 적용할 수 있어요. 자세한 내용은 Klaviyo 리뷰 CSS 클래스 전체 사전을 확인해 주세요.

사용자 정의 CSS 적용 방법

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

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

여기서는 구현이 가장 간단한 마지막 옵션에 집중해 볼게요.

기본 스타일을 포함한 Klaviyo 리뷰는 일반적으로 전자상거래 플랫폼의 CSS가 로드된 후에 로드돼요. 즉, 기본값이 사용자 지정 CSS를 덮어쓰지 않도록 정확한 선택자를 사용하는 것이 중요해요.

Shopify에 맞춤 CSS 적용하기

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동하세요.
2. 현재 테마의 추가 옵션 메뉴(점 3개)에서 복제를 클릭해 주세요.
   
   현재 테마가 라이브 상태일 때는 편집하지 않는 것이 좋아요. 이러한 편집 내용이 변경 사항을 검토하고 문제를 해결하기 전에 사이트 방문자에게 표시될 수 있어요.

3. 테마의 새 사본 옆에 있는 사용자 지정을 클릭하세요.
4. 테마 설정 아이콘을 클릭하세요.
   

5. 메뉴에서 사용자 지정 CSS를 선택해 주세요.
   

6. 사용자 정의 CSS를 추가합니다.
   

1. 리뷰 위젯이 표시되는 편집기 페이지로 이동하세요(예: 기본 제품).
2. 수정 사항을 검토한 다음 게시를 클릭하세요.

WooCommerce용 사용자 지정 CSS 추가

특정 페이지에 CSS를 적용하려면 페이지 ID 선택기,.page-id-YOUR_PAGE_ID 를 사용해야 해요. 페이지 ID를 찾는 방법을 알아보세요.

1. Wordpress 관리자에서 모양 > 편집기로 이동하세요.
2. 스타일을 선택해 주세요.
   

3. 점 3개(더보기) 메뉴를 여세요.
4. 추가 CSS를 선택하세요.
   

5. 사용자 정의 CSS를 추가합니다.
   

1. 수정 사항을 검토한 다음 게시를 클릭하세요.

사용자 정의 CSS 사용 사례

아래 CSS 스니펫은 몇 가지 기본 사용 사례를 다룹니다. 더 고급 사용자 지정을 하려면 개발자 지원이 필요해요. 팀에 개발자가 없고 직접 코드를 작성하는 것이 부담스럽다면, 도움을 받기 위해 Klaviyo 파트너에게 문의하는 것을 고려해 보세요.

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