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

학습 내용

사이트에서 쇼핑객이 즐겨찾는 품목을 저장하도록 허용하는 방법을 알아보세요. 제품 옆에 즐겨찾기 버튼을 추가하면 Klaviyo 고객 허브 서랍에 쇼핑객이 저장한 품목을 표시하고, 전환을 유도하는 후속 플로우를 보낼 수 있어요.

시작하기 전에 알아야 할 것

이 가이드에서는 Klaviyo의 Klaviyo 고객 허브 설정에서 즐겨찾기 설정을 활성화하고, 웹사이트의 여러 페이지에 즐겨찾기 버튼을 추가하는 방법을 다룹니다. 진행하기 전에 Klaviyo에서 Klaviyo 고객 허브 기능이 활성화되어 있는지 확인하세요.

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

즐겨찾기 정보

즐겨찾기 버튼을 사용하면 쇼핑객이 관심 있는 제품을 저장할 수 있어요. 쇼핑객이 즐겨찾기에 추가한 항목은 Klaviyo 고객 허브 서랍에 표시되며, 플로우에서 추가 전환을 유도하는 데 사용할 수 있어요.

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

가시성을 높이고 사용을 유도하기 위해 다음 항목에도 즐겨찾기 버튼을 추가할 수 있어요:

• 제품 세부 정보 페이지
• 컬렉션 페이지(“상품 목록 페이지”라고도 함)

이 두 페이지 중 한 곳에서 즐겨찾기한 항목도 Klaviyo 고객 허브 서랍의 즐겨찾기 섹션에 저장돼요. 고객 계정에 로그인했는지 여부와 관계없이, 모든 방문자가 제품을 즐겨찾기 목록에 추가할 수 있다는 점에 유의해 주세요. 로그인하면 저장해 둔 즐겨찾기가 Klaviyo 프로필과 동기화돼요.

Klaviyo 고객 허브에 즐겨찾기가 표시되도록 활성화

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

1. Klaviyo의 기본 왼쪽 탐색에서 서비스 - Klaviyo 고객 허브를 선택해 주세요.
2. 확장 탭을 클릭합니다.
3. Favorites, 아래에서 즐겨찾기 사용을 선택하려면 확인란을 선택해 주세요.
   

4. 아이콘 선택 드롭다운에서 제품 아래에 표시할 즐겨찾기 아이콘 유형(예: 하트 또는 더하기 기호)을 선택하세요.
   • 기본적으로 미리보기에는 선택되지 않은(즉, 즐겨찾기로 지정되지 않은) 아이콘 버전이 표시돼요. 미리보기에서 아이콘을 클릭해 즐겨찾기 상태로 바뀌는지 확인해 보세요.
5. 저장을 클릭합니다.

이제 Klaviyo 고객 허브 인터페이스에 표시된 모든 제품 아래에 즐겨찾기 버튼이 표시됩니다. 이를 클릭하면 항목이 즐겨찾기 섹션에 추가됩니다.

제품 세부 정보 페이지에 즐겨찾기 버튼을 추가하는 방법은 다음 섹션에서 확인해 주세요.

기존 위시리스트를 Klaviyo 고객 허브로 가져오기

다른 위시리스트 애플리케이션에서 Klaviyo 고객 허브로 전환하는 경우, 합리적인 수준으로 데이터 손실을 최소화해 고객의 저장된 항목을 원활하게 마이그레이션할 수 있어요. Klaviyo는 쇼핑객이 저장한 제품을 잃지 않도록, 과거 즐겨찾기 및 위시리스트 데이터를 가져오기 위한 표준 워크플로우를 제공해요.

네이티브 앱 가져오기

Klaviyo는 다음과 같은 인기 위시리스트 앱에서 데이터를 직접 가져올 수 있도록 기본 제공 네이티브 지원을 제공해요.

• Swym
• Wishlist King

CSV로 가져오기

다른 위시리스트 제공업체에서 마이그레이션하는 경우, 데이터를 Klaviyo로 직접 가져올 수 있어요. Klaviyo 고객 허브 즐겨찾기 설정으로 이동한 다음 업로드 영역에 CSV 파일을 드롭해 주세요. 템플릿은 필요 없어요. 가져오기 도구가 파일 형식을 자동으로 인식하고 그에 맞게 데이터를 매핑하여 쇼핑객의 Klaviyo 고객 허브 프로필을 채웁니다.

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

제품 상세 페이지에 "즐겨찾기에 추가" 버튼을 추가해 참여 유도를 크게 높이세요.

1. Klaviyo의 즐겨찾기 설정에서 앱 블록 추가를 선택합니다.
2. 그러면 Shopify 테마 편집기가 새 창에서 열리고, 기본 상품 페이지 템플릿에 Klaviyo Favorites 앱 블록이 추가되었음을 알리는 모달이 표시돼요. 알겠어요를 클릭하세요.
   

3. 필요에 따라 앱을 클릭하고 드래그하여 제품 상세 페이지에서의 위치를 조정하세요.
4. 준비되면 저장을 클릭하여 Shopify에서 변경 사항을 저장하세요. 이 시점에서 즐겨찾기 버튼이 제품 페이지의 제품 아래에 표시돼요.
5. 선택 사항: 추가 스타일 지정을 위해 Klaviyo로 다시 이동하세요. 앱 블록 스타일 드롭다운을 사용하면 제품 페이지에서 즐겨찾기 버튼의 모양을 사용자 지정할 수 있어요. 다음 둘 중 하나를 선택하세요.
   • 상속을 선택하면 사이트의 버튼 스타일을 동기화해요(기본값).
   • 사용자 정의에서 특정 버튼 글꼴과 텍스트 색상을 선택합니다.
     

6. 변경 사항을 저장해 주세요.

웹사이트로 다시 이동하세요. 제품 상세 페이지에서 제품 아래에 즐겨찾기 버튼이 표시되는 것을 확인할 수 있을 거예요.

다음으로 컬렉션 페이지에 즐겨찾기 버튼 추가 섹션으로 건너뛰어 주세요.

즐겨찾기 버튼 수동 설치(빈티지 테마 또는 맞춤 설정)

빈티지 Shopify 테마를 사용하거나 앱 블록을 지원하지 않는 커스텀 설정을 사용하는 경우, 찜하기 동작(예: 제품 페이지)을 사용하려는 페이지에 Klaviyo 위시리스트 앱을 수동으로 설치해야 할 수 있어요.

그렇게 하려면

1. Shopify 스토어 관리자 페이지를 여세요.
2. 판매 채널에서 온라인 스토어를 선택합니다.
3. 현재 테마에서 점 3개 메뉴를 클릭한 다음 코드 편집을 선택하세요. 대신 초안 테마에서 테스트하려면 먼저 현재 테마를 복제한 다음 복제한 테마의 코드를 편집하세요.
   

4. 제품 세부 정보 페이지에 해당하는 파일을 찾으세요. 테마에 따라 다르지만, 일반적으로 이름에 “product”라는 단어가 포함돼 있어요. 예를 들어 Dawn 테마에서는 이를 “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. collections 파일에서 찾기 바로가기(Mac에서는 Command+F, Windows에서는 Control+F)를 사용해 파일 내에서 “render”라는 단어를 검색하세요. 이렇게 하면 제품 그리드가 포함된 스니펫 이름을 식별하는 데 도움이 돼요.
   • 스니펫은 {% render 'snippet-name'%}과 유사한 형식으로 표시되는 경우가 많으며, 여기서 'snippet-name'은 관련 스니펫 파일의 이름(예: card-product)입니다.
     

6. 왼쪽 사이드바에서 이전 단계에서 확인한 스니펫 파일(예: card-product.liquid)을 검색해 열어 주세요.
7. 이 파일 상단에서 “Accepts” 아래에 나열된 객체 값을 확인합니다(예: “card_product”).
   

8. 다음 코드를 복사한 다음 스니펫 파일에 붙여넣으세요:
   • 팁: 파일에서 가격이 렌더링되는 첫 번째 위치를 찾고, 그 위에 위의 코드를 붙여넣어 주세요.
     <div

    class="klaviyo-favorites-plp-slot"

   data-product-id="{{ OBJECT.id }}"

   data-product-url="{{ OBJECT.url }}"

   data-variant-id="{{OBJECT.selected_or_first_available_variant.id}}"

  ></div>
9. 붙여넣은 코드에서 OBJECT을(를) 앞에서 기록해 둔 객체 값으로 바꿔 주세요.
   • 예를 들어, 파일의 object 값이 “card_product”인 경우 가격 위에 있는 파일에 붙여넣으면 코드는 다음과 같이 표시돼요.
     

10. Shopify에서 저장을 클릭하세요.
11. 사이트의 컬렉션 페이지로 이동한 다음 새로고침하세요.

이제 각 제품에 즐겨찾기 버튼이 표시될 거예요. 로드하는 데 몇 초 정도 걸릴 수 있어요. 기본적으로 오른쪽 상단에 배치돼요. 위치를 변경하려면 맞춤 CSS에 대한 도움을 받기 위해 개발자에게 문의하세요.

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

• 코드 조각에서 OBJECT을(를) 파일의 객체 값으로 바꿨는지 확인해 주세요.
• 파일의 다른 위치에 코드를 붙여 넣어 보세요.
• 올바른 스니펫 파일에 코드를 붙여넣었는지 확인하세요.

그래도 표시되지 않으면 개발자의 도움을 받으세요. Klaviyo 지원 팀은 테마 파일을 직접 편집할 수 없어요.

다음 단계

사이트에 즐겨찾기 버튼을 추가했으니, 최근에 저장한 항목을 쇼핑객에게 상기시켜 전환을 유도할 수 있도록 즐겨찾기 리마인더 플로우를 설정하세요.

추가 자료