고객 허브 스타일 지정 방법

예상 5 읽은 시간(분)
|
업데이트 2025년 2월 20일 오후 6:59 EST
학습 내용

학습 내용

고객 허브 서랍을 스타일링하는 디자인 옵션과 브랜드에 맞게 서랍을 디자인하는 방법에 대해 알아보세요. 고객 허브 인터페이스는 고객 경험에 내재되어 있으므로 웹사이트의 확장으로 보이도록 스타일을 지정하는 것이 가장 좋습니다. 

시작하기 전에 알아야 할 것

시작하기 전에 알아야 할 것

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

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

스타일링 고객 허브

스타일링 고객 허브

고객 허브 서랍에는 여러 개의 사용자 지정 가능한 탭이 있습니다:

  • 사용자를 위해
  • 주문
  • 프로필
  • 채팅 (웹 채팅이 활성화된 경우에만 표시됨)

예시 브랜드 웹사이트의 고객 허브 서랍이 열리고 쇼핑객이 고객 계정에 로그인한 것을 보여줍니다.

텍스트, 색상, 글꼴 등을 편집하는 등 각 탭에서 디자인을 사용자 지정할 수 있는 다양한 옵션이 있습니다. 스타일 사용자 지정 선택 항목은 고객 허브 서랍의 각 탭에 걸쳐 계단식으로 적용되므로 사이트 방문자에게 일관된 브랜드 경험을 제공할 수 있습니다. 

고객 허브 서랍에서 대부분의 요소의 모양은 조정할 수 있지만 위치는 조정할 수 없습니다. 현재 일반 레이아웃 옵션만 사용할 수 있습니다.

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

주요 행동 촉구 사용자 지정

주요 행동 촉구 사용자 지정

기본적으로 쇼핑객이 고객 계정에 로그인하면 Klaviyo 에 "환영합니다, 첫 번째 이름"이 표시됩니다. 를 고객 허브 서랍의 For you 탭의 기본 제목으로 표시합니다. 이 텍스트는 편집할 수 없습니다.

그러나 인증되지 않은 쇼핑객의 경우 로그인하기 전에 '시작하기' 버튼 위에 표시할 행동 촉구 제목을 직접 작성할 수 있습니다. 이는 인증되지 않은 방문자가 고객 허브 인터페이스에 로그인하고 참여를 유도하도록 장려하는 데 유용할 수 있습니다.

아래 예시에서 주요 행동 촉구는 "리워드 적립, 주문 추적, 쇼핑 내역 저장"이라고 표시됩니다.

고객 허브의 For you 탭 보기에는 계정에 로그인하지 않은 쇼핑객에 대한 주요 작업 요청이 표시됩니다.

고객 허브 인터페이스의 주요 행동 촉구를 업데이트하려면 다음과 같이 하세요:

  1. 의 왼쪽 탐색에서 고객 허브 탭을 엽니다.Klaviyo
  2. 오른쪽 상단 모서리에서 설정을 선택합니다.
    고객 허브 대시보드의 설정 버튼입니다.
  3. 콘텐츠를 선택합니다.
  4. 주요 행동 촉구에서 인증되지 않은 쇼핑객을 위해 시작하기 버튼 위에 표시할 행동 촉구를 사용자 지정합니다.
    고객 허브 탭의 콘텐츠 설정 메뉴에 있는 주요 행동 촉구 섹션 Klaviyo.
  5. 저장을 클릭합니다. 
디자인 설정

디자인 설정

고객 허브 인터페이스를 사용자 지정할 수 있는 디자인 옵션입니다:

  1. 의 왼쪽 탐색에서 고객 허브로 이동합니다. Klaviyo
  2. 설정을 선택합니다.
  3. 디자인 메뉴를 엽니다. 
    Klaviyo 의 고객 허브 설정에 있는 디자인 메뉴에는 고객 허브 서랍을 사용자 지정하기 위한 모든 스타일링 옵션이 표시됩니다.

다음과 같은 색상 및 스타일 설정을 조정할 수 있습니다:

  • 글꼴
    • 제목 글꼴
      고객 허브의 각 탭의 제목에 사용됩니다. 사이트의 다른 제목에 사용된 글꼴을 자동으로 복제하려면 사이트에서 상속을선택합니다.
    • 제목 색상
      고객 허브의 각 탭의 제목 텍스트에 사용됩니다.
    • 단락 글꼴
      각 섹션, 콘텐츠 블록 및 버튼 내의 텍스트에 사용됩니다. 사이트의 다른 단락에 사용된 글꼴을 자동으로 복제하려면 사이트에서 상속을 선택합니다.
    • 단락 색상
      고객 허브의 모든 버튼, 콘텐츠 블록 및 섹션 텍스트에 사용됩니다.
  • 버튼
    • 버튼 색상
      고객 허브의 모든 버튼에 대한 배경색입니다.
    • 버튼 텍스트 색상
      고객 허브의 모든 버튼에 있는 텍스트 색상입니다. 
  • 레이아웃
    • 스타일
      고객 허브의 콘텐츠 블록, 버튼 및 섹션의 가장자리 모양입니다. 
    • 데스크톱에서의 위치
      고객 허브 서랍이 슬라이드되는 위치(뷰포트의 왼쪽 또는 오른쪽)입니다. 브랜드에서 카트 서랍을 사용하는 경우 고객 허브와 겹치지 않도록 왼쪽 정렬 위치를 사용하는 것이 좋습니다.
    • 배경 색상
      모든 텍스트, 콘텐츠 블록 및 확장 기능 아래에 있는 고객 허브의 기본 색상입니다.
허브 런처 위젯

허브 런처 위젯

고객 허브 자체를 디자인하는 것 외에도 방문자가 클릭하여 고객 허브를 빠르게 열 수 있는 웹사이트의 작은 플로팅 요소인 허브 런처 위젯을 사용자 지정할 수도 있습니다. 이는 종종 고객 허브의 웹 채팅 기능과 함께 사용됩니다. 허브 런처 위젯은 방문자의 웹사이트 여정을 따라다니며 양식 티저와 같은 기능을 합니다. 

디자인 설정 페이지의 허브 런처 위젯 스타일링 메뉴에는 숨김으로 설정되었지만 일부 스타일링이 구성된 허브 런처 예시가 표시됩니다.

허브 런처 위젯을 사용자 지정할 수 있습니다:

  • 가시성
    • 사이트 방문자가 위젯을 보고 클릭할 수 있는 사이트
  • 위젯 모양
    • 위젯의 가장자리 모양
  • 페이지 위치
    • 웹 페이지에서 위젯이 떠 있는 위치
  • 간격
    • 위젯의 위치에 따라 왼쪽/오른쪽 및 위쪽/아래쪽 모서리로부터의 거리
  • 위젯 배경색
    • 위젯의 기본 색상
고객 허브용 사용자 지정 CSS

고객 허브용 사용자 지정 CSS

고객 허브 디자인 옵션으로 브랜딩 요구 사항을 충족하지 못하는 경우 사용자 지정 CSS를 사용하여 고급 스타일을 적용할 수 있습니다.

고객 허브는 사이트의 CSS와의 충돌을 피하기 위해 CSS 재설정을 사용하지만, 엣지 케이스를 해결하거나 플로팅 서랍 또는 사용자 지정 테두리 반경 값과 같은 고유한 스타일을 적용하기 위해 사용자 지정 CSS를 추가해야 할 수도 있습니다.

고객 허브에 사용자 지정 CSS를 구현하려면 사이트의 코드를 편집해야 합니다. 기술적으로 능숙한 마케터나 개발자에게 접근할 수 있는 사람에게만 권장됩니다. 워드프레스닷컴 제품은 사용자 지정 CSS를 지원하지만, 지원팀은 이 문서에서 다루는 일반적인 지침을 넘어 고객 허브에 사용자 지정 CSS를 추가하는 데 도움을 드릴 수 없습니다. 데이터 보안을 유지하기 위해 Klaviyo 의 지원팀에서는 HTML 파일을 열 수 없습니다.

사용자 지정 CSS 적용 

사용자 지정 CSS 적용 

고객 허브 디자인 설정의 사용자 정의 CSS 섹션에 직접 사용자 정의 CSS를 추가하고 변경 사항을 저장합니다.

Klaviyo 의 고객 허브 디자인 설정 메뉴 하단에 있는 사용자 지정 CSS 섹션.

고객 허브 내의 모든 기본 요소에는 클래스 이름 앞에 kl-hub-가 붙습니다:

  • 모든 텍스트 요소는 kl-hub-text 클래스를 가지며, 제목은 kl-hub-heading클래스를 가집니다.
  • 버튼은 kl-hub-button 클래스를 가지며, 그 변형도 포함됩니다(예: kl-hub-button-primary, kl-hub-button-secondary 등).
  • 고객 허브 서랍 자체에는 kl-hub-drawer클래스가 있습니다.
  • 텍스트 입력에는 kl-hub-input클래스가 있습니다.

이 목록은 전체 목록이 아니므로 브라우저의 디버거로 고객 허브를 검사하여 더 많은 정보를 찾을 수 있습니다. 요소에 kl-hub-로 시작하는 클래스가 있는 경우 사용자 정의 CSS에 사용해도 안전합니다.

CSS 예제

CSS 예제

고객 허브의 모든 버튼과 제목을 대문자로 만들려면 다음과 같은 사용자 지정 CSS를 작성하면 됩니다:

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

    text-transform: uppercase;
}
추가 자료

추가 자료

이 도움말 문서가 유용했나요?
이 형식은 도움말 문서 피드백 용도로만 사용하세요. 지원 팀에 문의하는 방법.

Klaviyo에서 자세히 살펴보기

커뮤니티
동료, 파트너, Klaviyo 전문가와 연결되어 영감을 받고 인사이트를 공유하며, 모든 궁금한 사항에 대해 답을 얻으세요.
라이브 교육
Klaviyo 전문가와 함께하는 라이브 세션에 참여하여 모범 사례, 주요 기능 설정 방법 등에 대해 알아보세요.
지원

계정을 통해 지원에 액세스하세요.

이메일 지원 (무료 체험 및 유료 계정) 연중무휴 24시간 사용 가능

채팅/가상 비서
사용 가능 여부는 위치 및 요금제 유형에 따라 다름