사이트와 클라비요 고객 허브에서 즐겨 찾기 버튼을 표시하는 방법

학습 내용

쇼핑객이 즐겨찾는 상품을 사이트에 저장할 수 있도록 허용하는 방법을 알아보세요. 제품 옆에 즐겨 찾기 버튼을 추가하면 클라비요 고객 허브 서랍에 쇼핑객의 저장된 항목을 표시하고 후속 플로우를 전송하여 전환을 유도할 수 있습니다.

시작하기 전에 알아야 할 것

이 가이드에서는 클라비요 고객 허브 설정()에서 즐겨찾기 설정을 활성화하고 Klaviyo 웹사이트의 여러 페이지에 즐겨찾기 버튼을 추가하는 방법에 대해 설명합니다. 계속 진행하기 전에 Klaviyo 에서 클라비요 고객 허브 기능이 활성화되어 있는지 확인하세요.

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

즐겨찾기 정보

즐겨 찾기 버튼을 사용하면 쇼핑객이 관심 있는 제품을 저장할 수 있습니다. 클라비요 고객 허브 서랍에 쇼핑객이 즐겨찾는 상품이 표시되며, 플로우에서 추가 전환을 유도하는 데 사용할 수 있습니다.

고객 허브 설정에서 즐겨찾기 기능을 활성화하면 클라비요 고객 허브 인터페이스에 표시되는 모든 제품과 함께 즐겨찾기 버튼이 나타납니다.Klaviyo 쇼핑객이 이 버튼을 클릭하면 해당 품목이 즐겨찾기 섹션에 추가되고 Klaviyo 프로필에 저장됩니다.

가시성을 높이고 사용을 장려하기 위해 즐겨 찾기 버튼을 추가할 수도 있습니다:

• 제품 상세 페이지
• 컬렉션 페이지('제품 목록 페이지'라고도 함) 

이 페이지 중 하나에서 즐겨찾기에 추가한 항목은 클라비요 고객 허브 서랍의 쇼핑객의 즐겨찾기 섹션에도 저장됩니다. 방문자는 고객 계정에 로그인했는지 여부와 관계없이 누구나 즐겨찾기에 제품을 추가할 수 있습니다. 로그인하면 저장한 즐겨찾기가 모두 Klaviyo 프로필에 동기화됩니다.

고객 허브 서랍에 표시할 즐겨찾기를 활성화합니다.

클라비요 고객 허브 서랍에 즐겨찾기를 표시하려면 먼저 에서 즐겨찾기 설정을 활성화해야 Klaviyo 합니다. 

1. Klaviyo의 왼쪽 메인 탐색에서 고객 허브를 선택합니다.
2. 오른쪽 상단의 톱니바퀴 아이콘을 클릭합니다.
   
3. 확장 프로그램을 선택합니다.
4. 즐겨찾기아래에서 확인란을 선택하여 즐겨찾기를 활성화합니다.
   
5. 아이콘 선택 드롭다운에서 제품 아래에 표시할 즐겨찾기 아이콘 유형(예: 하트 또는 더하기 기호)을 선택합니다. 
   • 기본적으로 미리보기에는 아이콘의 선택되지 않은(즉, 즐겨찾기에 추가되지 않은) 버전이 표시됩니다. 미리보기에서 아이콘을 클릭하면 즐겨찾기 상태로 변경되는 것을 확인할 수 있습니다.
6. 저장을 클릭합니다.

이제 클라비요 고객 허브 인터페이스에 표시되는 모든 제품 아래에 즐겨 찾기 버튼이 나타납니다. 클릭하면 즐겨찾기 섹션에 항목이 추가됩니다.

제품 세부 정보 페이지에 즐겨 찾기 버튼을 추가하는 방법에 대한 안내는 다음 섹션을 계속 진행합니다. 

제품 상세 페이지에 즐겨찾기 버튼 추가

제품 세부 정보 페이지의 제품 아래에 즐겨 찾기 버튼을 추가하여 쇼핑객이 결제 중인 특정 품목을 즐겨 찾기에 추가할 수 있습니다. 

1. 의 즐겨찾기 Klaviyo 설정에서 앱 블록 추가를 선택합니다. 
2. 이렇게 하면 Shopify 테마 편집기가 새 창에서 실행되고 Klaviyo 즐겨찾기에 앱 블록이 기본 제품 페이지 템플릿에 추가되었음을 나타내는 모달이 표시됩니다. 알았다를 클릭합니다.
   
3. 필요에 따라 앱을 클릭하고 드래그하여 제품 세부 정보 페이지에서 위치를 조정합니다. 
4. 준비가 완료되면 저장을 클릭하여 Shopify에 변경 사항을 저장합니다. 이 시점에서 즐겨 찾기 버튼은 제품 페이지의 제품 아래에 표시됩니다. 
5. 선택 사항입니다: 추가 스타일링을 보려면 뒤로 이동하여 Klaviyo 로 이동하세요. 앱 블록 스타일 드롭다운을 사용하여 제품 페이지에서 즐겨 찾기 버튼의 모양을 사용자 지정할 수 있습니다. 둘 중 하나를 선택하세요:
   • 상속을 사용하여 사이트의 버튼 스타일을 동기화합니다(기본값).
   • 사용자 지정을 통해 특정 버튼 글꼴과 텍스트 색상을 선택할 수 있습니다.
     
6. 변경 사항을 저장합니다.

뒤로 이동하여 웹사이트로 이동합니다. 제품 세부 정보 페이지의 제품 아래에 즐겨 찾기 버튼이 채워지는 것을 볼 수 있습니다.

다음으로 컬렉션 페이지에 즐겨찾기 추가 버튼 섹션으로 건너뜁니다. 

즐겨찾는 버튼 수동 설치(빈티지 테마 또는 사용자 지정 설정)

빈티지 Shopify 테마를 사용하거나 앱 블록을 지원하지 않는 사용자 지정 설정을 사용하는 경우, 즐겨찾기 작업을 원하는 페이지(예: 제품 페이지)에 Klaviyo 위시리스트 앱을 수동으로 설치해야 할 수 있습니다.

그렇게 하려면

1. Shopify 스토어 관리자를 엽니다.
2. 판매 채널에서 온라인 스토어를 선택합니다.
3. 현재 테마에서 점 3개 메뉴를 클릭한 다음 코드 편집을 선택합니다. 테마 초안에서 테스트하려면 먼저 현재 테마를 복제한 다음 복제 테마의 코드를 편집하세요.
   
4. 제품 세부 정보 페이지의 파일을 찾습니다. 테마에 따라 다르지만 일반적으로 이름에 '제품'이라는 단어가 포함되어 있습니다. 예를 들어 새벽 테마에서는 이를 "main-product.liquid"라고 합니다.
5. 즐겨찾기 버튼을 표시할 위치에 다음 코드 조각을 붙여넣습니다:
   <div class="klaviyo-wishlist-slot" data-product-id="{{ product.id }}" ></div>
6. 저장을 클릭합니다.
7. 스토어 미리 보기를 클릭합니다.
8. 스토어 미리 보기 내에서 제품 페이지로 이동합니다. 추가된 즐겨찾기 버튼이 지정된 위치에 표시되어야 합니다.

컬렉션 페이지에 즐겨찾기 버튼 추가하기

Shopify 사이트에 작은 코드 스니펫을 설치하여 컬렉션 페이지에 즐겨 찾기 버튼을 추가하면 쇼핑객이 제품을 탐색하는 동안 빠르게 품목을 저장할 수 있습니다. 이는 모바일 디바이스를 사용하는 쇼핑객에게 특히 유용합니다.

그렇게 하려면

1. Shopify 스토어 관리자를 엽니다.
2. 판매 채널에서 온라인 스토어를 선택합니다.
3. 현재 테마 옆의 점 3개 메뉴를 클릭한 다음 코드 편집을 선택합니다. 
   • 테마 초안에서 테스트하려면 먼저 현재 테마를 복제한 다음 복제 테마에서 코드를 편집하세요.
4. 왼쪽 사이드바에서 컬렉션 파일을 검색하여 엽니다. 이 예에서는 featured-collections.liquid 파일을 사용하지만 테마에 따라 다른 파일을 사용할 수도 있습니다.
   
5. 컬렉션 파일 내에서 찾기 단축키(Mac의 경우 Command+F 또는 Windows의 경우 Control+F)를 사용하여 파일 내에서 '렌더링'이라는 단어를 검색합니다. 이렇게 하면 제품 그리드가 포함된 스니펫 이름을 식별하는 데 도움이 됩니다.
   • 스니펫은 다음과 유사한 형식으로 표시될 가능성이 높습니다: {% render 'snippet-name'%} 여기서 '스니펫 이름'은 관련 스니펫 파일의 이름입니다(예: 카드-제품).
     
6. 왼쪽 사이드바에서 이전 단계에서 식별한 스니펫 파일(예: card-product.liquid)을 검색하여 엽니다.
7. 이 파일의 상단에서 '수락' 아래에 나열된 개체 값(예: "card_product")을 확인합니다.
   
8. 다음 코드를 복사하여 스니펫 파일에 붙여넣습니다:
   • 팁: 팁: 파일에서 가격 렌더링의 첫 번째 인스턴스를 찾아 그 위에 코드를 붙여넣습니다.
     <div

    class="Klaviyo-favorites-plp-slot"

   데이터-product-id="{{ OBJECT.id }}"

   데이터-product-url="{{ OBJECT.url }}"

   데이터와 같은 이메일의 다른 버전-id="{{OBJECT.selected_or_first_available_variant.id}}"

  ></div>
9. 붙여넣은 코드 내에서 OBJECT를 앞서 언급한 객체 값으로 바꿉니다.
   • 예를 들어 파일의 객체 값이 'card_product'인 경우 가격 위에 파일에 붙여넣으면 코드가 다음과 같이 표시됩니다.
     
10. Shopify에서 저장을 클릭합니다.
11. 사이트의 컬렉션 페이지로 이동하여 새로 고침합니다.

이제 각 제품에 즐겨찾는 버튼이 표시될 것입니다. 로드하는 데 몇 초 정도 걸릴 수 있습니다. 기본적으로 오른쪽 상단 모서리에 위치합니다. 위치를 변경하려면 개발자에게 사용자 정의 CSS에 대한 도움을 요청하세요. 

즐겨찾는 버튼이 여전히 나타나지 않으면 다음 문제 해결 단계를 시도해 보세요:

• 코드 조각에서 OBJECT를 파일의 객체 값으로 바꿨는지 확인합니다.
• 파일의 다른 곳에 코드를 붙여넣어 보세요.
• 코드를 올바른 스니펫 파일에 붙여넣었는지 확인합니다.

그래도 표시되지 않으면 개발자에게 도움을 요청하세요. Klaviyo의 지원팀은 테마 파일을 직접 편집할 수 없습니다.

다음 단계

이제 사이트에 즐겨 찾기 버튼을 추가했으므로 즐겨 찾기 알림 플로우를 설정하여 쇼핑객에게 최근에 저장한 항목을 상기시켜 전환을 유도할 수 있습니다.

추가 자료

• 고객 허브 시작하기
• 클라비요 고객 허브에서 제품 추천을 활성화하는 방법 
• 고객 허브 스타일 지정 방법