Klaviyo 고객 허브 스타일 지정 방법

학습 내용

Klaviyo 고객 허브 서랍의 스타일을 지정하기 위한 디자인 옵션과 브랜드에 맞게 디자인하는 방법을 알아보세요. Klaviyo 고객 허브 인터페이스는 고객 경험에 깊이 자리 잡고 있으므로 웹사이트의 확장처럼 보이도록 스타일을 지정하는 것이 모범 사례예요.

시작하기 전에 알아야 할 것

이 가이드는 Klaviyo 고객 허브 인터페이스의 스타일을 사용자 지정하는 방법을 설명해요. 계속하기 전에 Klaviyo 고객 허브 기능이 활성화되어 있는지 확인해 주세요.

Klaviyo 고객 허브에 대해 자세히 알아보기.

Klaviyo 고객 허브 디자인 옵션

Klaviyo 고객 허브 서랍에는 맞춤 설정 가능한 탭이 여러 개 있어요:

• 나를 위한 추천
• 주문
• 프로필
• 채팅 (웹 채팅이 활성화된 경우에만 표시)
  
  

이러한 각 탭에서 텍스트, 색상, 글꼴 등을 편집하는 등 디자인을 사용자 지정할 수 있는 다양한 옵션이 있어요. 스타일 사용자 지정 선택 사항은 Klaviyo 고객 허브 서랍의 각 탭에 걸쳐 연쇄적으로 적용되어, 사이트 방문자에게 일관되고 브랜드에 맞는 경험을 제공해요.

Klaviyo에서 Klaviyo 고객 허브의 디자인 설정을 편집할 때 실시간 보기 버튼을 사용해 웹사이트의 허브 인터페이스에 적용된 변경 사항을 확인하세요. Klaviyo 고객 허브가 라이브 상태인 경우 저장된 변경 사항이 사이트에 게시된다는 점에 유의하세요.

각 탭의 기본 행동 촉구를 맞춤 설정하기

기본적으로 쇼핑객이 고객 계정에 로그인하면 Klaviyo는 “환영합니다, first.name”을 Klaviyo 고객 허브 서랍의 추천 탭에 있는 기본 제목으로 표시합니다. 이 텍스트는 편집할 수 없습니다.

다만 인증되지 않은 쇼핑객의 경우, 로그인하기 전에 “로그인” 버튼 위에 표시할 행동 촉구 제목을 직접 작성할 수 있어요. 이는 인증되지 않은 방문자가 로그인하고 Klaviyo 고객 허브 인터페이스에 참여하도록 유도하는 데 도움이 될 수 있어요.

아래 예시에서 기본 행동 촉구는 “리워드 적립, 주문 추적 및 쇼핑 내역 저장.”으로 표시돼요.

참고: “사용 가능한 리워드” 표시기는 다음 중 하나가 있으면 자동으로 표시돼요.

1. Klaviyo 고객 허브 내에 설정된 고정 쿠폰, 또는
2. 로열티 연동(예: Smile)을 사용 설정한 경우.

Klaviyo 고객 허브 인터페이스의 기본 행동 촉구를 업데이트하려면:

1. Klaviyo의 왼쪽 탐색 메뉴에서 서비스 - Klaviyo 고객 허브 탭을 여세요.
2. 설정을 클릭합니다.
3. 환영 메시지에서 인증되지 않은 쇼핑객에게 "로그인" 버튼 위에 표시할 행동 촉구를 맞춤 설정하세요. Klaviyo 고객 허브 서랍의 각 탭에서 이렇게 할 수 있어요:
   • 나를 위한 추천
   • 주문
   • 프로필
     

4. 저장을 클릭합니다.

Klaviyo 고객 허브 디자인하기

Klaviyo 고객 허브 인터페이스를 맞춤설정할 수 있는 디자인 옵션:

1. Klaviyo 왼쪽 탐색 메뉴에서 Klaviyo 고객 허브로 이동해 주세요.
2. 디자인을 선택해 주세요.
3. 미리보기 상단에서 허브를 선택해 주세요.
   
   
   

4. 스타일 메뉴에서 표시 언어, 글꼴, 색상 및 스타일 설정을 조정하고, 이러한 조정 사항이 Klaviyo 고객 허브 인터페이스 캔버스에서 어떻게 표시되는지 미리 볼 수 있어요.
5. 선택적으로 Custom CSS로 고급 스타일을 적용할 수 있어요. 자세한 내용은 아래의 맞춤 CSS 섹션을 확인해 주세요.
6. 다른 언어를 선택하는 방법에 대한 자세한 내용은 Klaviyo 고객 허브의 언어 및 로케일 지원 문서를 참고하세요.
7. 변경 사항을 바로 적용하려면 저장을 클릭하세요.

Klaviyo 고객 허브 위젯 사용자 지정

Klaviyo 고객 허브 자체를 설계하는 것 외에도, 방문자가 클릭해 Klaviyo 고객 허브 인터페이스를 빠르게 열 수 있는 웹사이트의 작고 떠 있는 요소인 허브 위젯도 맞춤 설정할 수 있어요. 위젯은 들어오는 채팅 메시지나 항목을 관심 목록에 추가할 때의 피드백처럼 쇼핑객에게 시의적절한 정보를 제공해요. 웹 채팅과 즐겨찾기가 활성화되어 있을 때 특히 고객과의 의미 있는 참여 유도을 이끌기 위해 위젯 UI를 활성화하는 것을 권장해요.

허브 위젯을 맞춤 설정하려면:

1. Klaviyo의 왼쪽 탐색 메뉴에서 Klaviyo 고객 허브를 선택하세요.
2. 디자인을 선택해 주세요.
3. 미리보기 상단에서 위젯을 선택해 주세요.

4. 일반 메뉴에서 어떤 쇼핑객에게 위젯을 표시할지와 위젯을 클릭했을 때 열릴 Klaviyo 고객 허브 보기를 조정할 수 있어요.
   • 사이트에서 어떤 쇼핑객에게 위젯을 표시할지 선택해 주세요:
     • 모든 쇼핑객(인식됨, 로그인 상태 및 로그아웃 상태) ― 위젯이 모든 사용자에게 표시돼요.
     • 인식되었거나 로그인한 쇼핑객 – 이 위젯은 Klaviyo가 해당 사용자를 인식(식별됨)했거나 로그인(인증됨)한 경우에만 표시돼요. 이는 신규 방문자에게는 복잡함을 줄이면서도 재방문자에게는 고밀도 경험을 유지하는 데 이상적이에요.
     • 로그인한 쇼핑객만 해당 – 위젯은 활성 Shopify 세션이 있는 사용자에게만 표시돼요.
5. Style 메뉴에서 색상 및 스타일 설정을 조정하고, 이러한 조정이 Klaviyo 고객 허브 위젯 인터페이스 캔버스에서 어떻게 표시되는지 미리 볼 수 있어요.
6. 레이아웃 메뉴에서 웹사이트에서 위젯이 배치되는 방식을 조정할 수 있습니다.
7. 변경 사항을 바로 적용하려면 저장을 클릭하세요.

추가 위젯 상태 맞춤 설정

아이콘 옆의 캐럿을 선택하고 다른 위젯 상태로 이동하면 추가 위젯 상태를 사용자 지정할 수 있어요.

• 장바구니에 추가 상태는 상품 상세 페이지에서 표시돼요. 맞춤 설정 가능한 위젯은 기존의 장바구니에 추가 버튼이 더 이상 보이지 않는 제품 상세 페이지 상단 아래로 스크롤했을 때 쇼핑객이 구매하거나 나중에 사용할 수 있도록 제품을 저장하도록 유도해요. Klaviyo 고객 허브에서 장바구니에 추가 위젯을 설정하는 방법에 대해 자세히 알아보세요.

Klaviyo 고객 허브용 맞춤 CSS

브랜딩 요구 사항을 Klaviyo 고객 허브 디자인 옵션으로 충족할 수 없다면, 사용자 지정 CSS로 고급 스타일링을 적용할 수 있어요.

Klaviyo 고객 허브는 사이트의 CSS와의 충돌을 방지하기 위해 CSS 재설정을 사용하지만, 플로팅 드로어 또는 사용자 지정 테두리 반경 값과 같은 고유한 스타일을 적용하거나 예외 사례를 해결하려면 사용자 지정 CSS를 추가해야 할 수 있어요.

사용자 정의 CSS 적용

Klaviyo 고객 허브 디자인 설정에서 Custom CSS 섹션에 커스텀 CSS를 직접 추가하고, 변경 사항을 저장하세요.

Klaviyo 고객 허브 내의 모든 기본 요소에는 kl-hub-: 접두사가 붙은 클래스 이름이 있어요.

• 모든 텍스트 요소에는 kl-hub-text 클래스가 있으며, 제목에는 클래스가 있습니다 kl-hub-heading
• 버튼에는 kl-hub-button 클래스가 있으며, 같은 이메일의 다른 버전도 포함돼요(예: kl-hub-button-primary, kl-hub-button-secondary 등).
• Klaviyo 고객 허브 서랍 자체에는 다음 클래스가 있습니다. kl-hub-drawer
• 텍스트 입력은 다음 클래스를 사용해요. kl-hub-input
• 모든 콘텐츠 블록에는 클래스 kl-hub-content-block가 있으며, 블록 내부 이름도 포함됩니다(예: "Reward program"이라는 이름의 콘텐츠 블록은 kl-hub-content-block-reward-program).

이 목록은 전체가 아니며, 브라우저의 디버거로 Klaviyo 고객 허브를 검사하면 더 많은 항목을 찾을 수 있어요. 요소에 kl-hub-로 시작하는 클래스가 있으면 맞춤 CSS에 사용해도 안전해요.

CSS 예시

Klaviyo 고객 허브에서 모든 버튼과 제목을 대문자로 만들고 싶다면, 다음과 같은 커스텀 CSS를 작성하면 돼요:

.kl-hub-button, .kl-hub-heading {

    text-transform: uppercase;
}

추가 자료