Shopify에 재입고 기능을 설치하는 방법

학습 내용 

고객이 재입고 알림을 구독할 수 있도록 Shopify용 Klaviyo의 재입고 기능을 설치하는 방법을 알아봅니다. 재입고 설정은 Klaviyo에서 플로우를 생성하고 사용자 지정 가능한 코드 조각을 Shopify 스토어에 추가하는 것으로 구성됩니다. 

시작하기 전에 알아야 할 것

리소스

Klaviyo는 사용자 지정 코딩을 지원하지 않습니다. 개발자 지원이 필요한 경우 Klaviyo 파트너사 중 한 곳에 문의하세요. 

Klaviyo의 재입고 기능 관련 정보

Klaviyo의 Shopify 재입고 기능에는 두 가지 주요 구성 요소가 있습니다.

1. 재입고 플로우
   누군가 재입고 알림을 구독하면 Klaviyo 프로필에서 재입고 알림 구독 이벤트가 추적됩니다. 이 이벤트는 재고가 다시 들어오는 플로우를 트리거하는 데 사용할 이벤트입니다. 쇼핑객은 제품을 구독할 때 플로우에 추가되며, 관심 품목이 재입고되면 연락을 받게 됩니다.
2. 웹사이트 버튼
   상품 품절 시 '재입고 시 알림' 버튼을 자동으로 표시하는 코드 조각을 Shopify 테마에 추가해야 합니다. 코드 조각을 설치하자마자 다음과 같은 일이 일어납니다.
   • 쇼핑객이 상품을 검색하다가 품절된 경우 '재입고 시 알림' 버튼이 '품절' 버튼 바로 옆 또는 아래에 표시됩니다.
   • 누군가 '알림 받기' 버튼을 클릭하면 구매자가 상품 재입고 시 알림을 받을 이메일을 입력하는 양식이 팝업창으로 표시됩니다.
   • 양식이 제출되는 즉시 Klaviyo 내 쇼핑객의 프로필에 재입고 구독 이벤트가 추적됩니다.

Klaviyo는 버전 수준에서 재고를 모니터링하므로 쇼핑객은 특정 상품 버전에 대한 알림을 수신하도록 구독할 수 있습니다. 예를 들어, 고객이 좋아하는 핑크색 티셔츠의 미디엄 사이즈가 품절된 것을 발견하면 이 특정 상품을 구독할 수 있으며, Klaviyo는 해당 사이즈와 색상이 재입고된 경우에만 고객에게 알림을 보냅니다.

코드 조각 설치 전

아래 지침에 따라 코드 조각을 설치하기 전에 다음과 같이 해야 합니다.

•  Klaviyo의 앱 삽입 기능을 이용하거나 수동으로 Klaviyo 온사이트 추적 기능( )을 Shopify 스토어(조회한 제품 포함)에서 활성화했는지 확인합니다. 
• 제품 페이지에 '장바구니에 추가' 버튼이나 문의 양식이 있어야 합니다. 일부 Shopify 테마에서는 재고가 없는 경우 '장바구니에 추가' 버튼이 제거될 수 있습니다. 이 경우 재고가 없다면 Shopify 테마에 '품절' 버튼이 표시되는지 확인하여 Klaviyo 코드가 작동하는지 확인합니다.

Shopify 재입고 영상

코드 조각 설치

아래 코드 조각을 theme.liquid 파일에 추가합니다. 이 지침은 Shopify 2.0 사용자와 빈티지 테마를 사용하는 사용자 모두에게 적용됩니다. 

1. Shopify 관리자에서 온라인 스토어 > 테마를 클릭합니다.
2. 테마의 작업 드롭다운을 클릭하고 코드 수정을 선택합니다.
3. theme.liquid 파일을 검색하고 클릭하여 편집기에서 엽니다.
4. 아래 JavaScript 코드 조각을 복사하여 </body> 태그 바로 위에 있는 theme.liquid 파일에 붙여넣습니다. 

   <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
         account: "PUBLIC_API_KEY",
         platform: "shopify"
       });
       klaviyo.enable("재입고",{ 
       trigger: {
         product_page_text: "Notify Me When Available",
         product_page_class: "button",
         product_page_text_align: "center",
         product_page_margin: "0px",
         replace_anchor: false
       },
       modal: {
        headline: "{product_name}",
        body_content: "이 상품의 재입고 알림을 받으려면 등록하세요.",
        email_field_label: "Email",
        button_label: "재입고 시 알림 받기",
        subscription_success_label: "알림을 설정했습니다! 재입고 시 알려드리겠습니다.",
        footer_content: '',
        additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
        drop_background_color: "#000",
        background_color: "#fff",
        text_color: "#222",
        button_text_color: "#fff",
        button_background_color: "#439fdb",
        close_button_color: "#ccc",
        error_background_color: "#fcd6d7",
        error_text_color: "#C72E2F",
        success_background_color: "#d3efcd",
        success_text_color: "#1B9500"
       }
     });
   </script>

5. 코드 조각의 PUBLIC_API_KEY 텍스트를 Klaviyo 공개 API 키로 바꿔야 합니다. 계정의 공개 API 키를 찾는 방법을 알아보세요. 여러 개의 Klaviyo 계정을 사용하는 경우 올바른 계정의 키를 사용하고 있는지 확인하세요. 키를 복사하여 코드 조각에 붙여넣습니다.
   
6. 여기서 멈추고 theme.liquid 파일을 저장하여 기본 구성을 사용할 수 있습니다. 또는 아래에서 재입고 버튼 및 설정을 사용자 지정하는 방법을 알아보세요.

양식 및 버튼 사용자 지정

Klaviyo '알림 받기' 버튼과 양식은 다양한 방식으로 구성할 수 있습니다. 디자인 기본 설정에 따라 색상, 글꼴, 텍스트 및 기타 요소를 변경할 수 있습니다.

위의 코드 조각에 포함된 기본값은 아래에 설명되어 있습니다. 업데이트하는 경우 레이블 자체가 아닌 값만 업데이트해야 합니다.

트리거 설정

트리거는 품목이 품절되었을 때 표시되는 버튼입니다. 이 버튼은 기본적으로 '알림 받기'라고 표시되지만 원하는 대로 설정할 수 있습니다. 트리거의 기본 코드(복사한 코드 조각 내)는 아래와 같습니다.

트리거: {
    product_page_text: "Notify Me When Available",
    product_page_class: "button",
    product_page_text_align: "center",
    product_page_margin: "0px",
    alternate_anchor: "AddToCart",
    replace_anchor: false
    }, 

매개 변수는 다음과 같습니다.

• product_page_text
  상품 품절 시 팝업창으로 표시되는 버튼 안의 텍스트입니다.
• product_page_class
  이 클래스는 버튼 모양을 결정합니다. 기본값 'button'은 이 버튼이 테마 내 다른 기본 버튼과 일치하게 만듭니다.
• product_page_text_align
  재입고 버튼 내부 텍스트의 정렬(예: 가운데, 오른쪽 또는 왼쪽)입니다.
• product_page_margin
  버튼 주위의 텍스트와 버튼 사이에 추가되는 여백입니다.
• alternate_anchor
  Shopify 테마에서 '장바구니에 추가' 버튼 이외의 요소를 사용하는 경우 이 텍스트를 해당 요소의 ID로 바꿉니다.
• replace_anchor
  이 값을 거짓으로 설정하면 '품절' 및 '알림 받기' 버튼이 모두 표시됩니다. 참으로 설정하면 '알림 받기' 버튼이 '품절' 버튼으로 바뀝니다.

트리거 가시성 설정

제품 페이지에 재입고 버튼을 표시할 제품을 선택하려면 아래에 해당 매개 변수를 포함하면 됩니다. include_on_tags 또는 exclude_on_tags 중 하나만 포함하되 둘 다는 포함하지 마세요.

다음은 include_on_tags가 추가된 코드 조각의 Klaviyo.init 섹션의 예시입니다.

klaviyo.init({
    account: "PUBLIC_API_KEY",
    platform: "shopify",
    include_on_tags: "dog, cat"
});

• include_on_tags
  이 태그는 특정 태그가 포함된 품목에 한정하여 재입고 버튼이 표시되도록 합니다. 위의 예에서는 "dog", "cat", 또는 둘 다로 태그가 지정된 제품에만 재입고 버튼이 표시됩니다.
• exclude_on_tags
  위의 값과 반대입니다. exclude_on_tags를 사용하면 지정된 제품을 제외한 모든 제품에 재입고 버튼이 표시됩니다.

모달 설정

모달은 상품 재입고 시 알림 받기 버튼을 클릭하면 나타나는 팝업 양식입니다.

다음은 코드 조각에서 변경할 수 있는 기본 설정입니다.

• headline
  팝업 상단에 표시되는 헤드라인으로, 기본적으로 Shopify의 {product_name} 변수를 사용하여 헤드라인을 제품 이름으로 동적으로 채웁니다.
• body_content
  고객에게 해야 할 일을 알려주는 팝업 내부에 표시되는 텍스트입니다.
• email_field_label
  이메일 필드 내부의 플레이스홀더 텍스트
• button_label
  이 팝업 양식의 제출 버튼 내 텍스트입니다.
• subscription_success_label
  누군가 팝업 양식을 성공적으로 제출하면 표시되는 메시지입니다.
• footer_content
  제출 버튼 아래의 바닥글에 표시할 텍스트입니다(선택 항목).
• close_label
  닫기 버튼의 텍스트로 기본값은 '닫기'입니다.
• background_color
  팝업 양식의 배경색으로 기본값은 흰색입니다.
• text_color
  팝업 양식의 텍스트 색상으로, 기본값은 검정색입니다.
• button_text_color
  팝업 양식에 있는 버튼의 텍스트 색상으로, 기본값은 흰색입니다.
• button_background_color
  양식 제출 버튼의 배경색으로, 기본값은 파란색입니다.
• error_background_color
  양식 제출에 오류가 있을 때 표시되는 오류 상자의 배경색으로, 기본값은 옅은 빨간색입니다.
• error_text_color
  양식 제출에 오류가 있을 때 표시되는 오류 메시지의 텍스트 색상으로, 기본값은 빨간색입니다.
• success_background_color
  누군가 양식을 성공적으로 제출한 후 표시되는 제출 성공 상자의 배경색으로, 기본값은 옅은 녹색입니다.
• success_text_color
  누군가 양식을 성공적으로 제출한 후 표시되는 제출 성공 메시지의 텍스트 색상으로, 기본값은 녹색입니다.
• font_family
  텍스트 서식이 지정된 글꼴 모음의 이름입니다. Times New Roman은 글꼴 모음의 한 예시입니다.
• headers_font_family
  헤더 텍스트의 서식이 지정된 글꼴 모음의 이름으로, Helvetica 글꼴 모음의 한 예시입니다.

'알림 받기' 버튼의 위치 사용자 지정하기

다음 코드 조각을 사용하여 '알림 받기' 버튼의 위치를 변경할 수 있습니다. 기본적으로 이 버튼은 현재 '장바구니에 추가/품절 버튼'의 옆이나 아래에 표시되거나 이를 대체합니다. 이 코드를 사용하면 설명 아래, 페이지 하단, 이미지 아래 등에 버튼을 배치할 수 있습니다. 이렇게 하려면 버튼을 표시할 위치에 product.liquid 파일에 코드 조각을 배치해야 합니다. 버튼 텍스트를 '재입고 시 알림 받기'가 아닌 다른 것으로 변경한 경우 이 또한 반드시 업데이트하세요. 

<a class="klaviyo-bis-trigger" style="display:none;" href="#">사용 가능 시 알림 받기</a>

원할 경우

선택 사항: 고객에게 마케팅 수신 동의 안내

누군가 재입고 알림을 구독한다고 해서 기본 뉴스레터 목록에 구독했다는 의미는 아닙니다.

쇼핑객이 상품 재입고 시 알림을 받겠다고 요청했더라도 정기적으로 마케팅 콘텐츠를 받기 시작하면 구독을 취소할 가능성이 높습니다. 이 시나리오에서 쇼핑객은 원치 않는 이메일을 받은 후 조기에 수신 거부할 수 있으므로 이러한 쇼핑객을 충성 고객으로 육성할 기회를 잃게 됩니다.

마케팅 이메일 수신에 동의한 회원을 확보하려면 재입고 양식에 이와 같은 확인란을 추가하면 됩니다.

이를 구현하려면 계정 ID 후의 'klaviyo.init' 섹션에 목록 ID를 추가하여 코드 조각을 한 가지 추가해야 합니다.

1. 'klaviyo.init' 섹션은 다음과 같이 표시됩니다.

   klaviyo.init({
           account: "PUBLIC_API_KEY",
           list: "YOUR_LIST_ID",
           platform: "shopify"
   });

2. YOUR_LIST_ID를 구독자를 추가하려는 Klaviyo 목록의 ID로 바꿉니다. 일반적으로 이 목록이 기본 뉴스레터 목록이 되어야 합니다.
3. 이 추가 코드 조각(5줄 참조)은 다음과 같이 표시됩니다.

   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
           account: "PUBLIC_API_KEY",
           list: "YOUR_LIST_ID",
           platform: "shopify"
       });
       klaviyo.enable("재입고",{ 
          트리거: {
            ...
          },
          모달: {
            ...
          }
       });
   </script>

4. 확인란에 표시되는 내용을 사용자 지정하려면 '모달' 섹션에 표시하려는 텍스트를 추가하면 됩니다. 기본적으로 이 확인란은 '이메일 목록에 추가'라고 표시됩니다. 수신 동의한 사람이 마케팅 이메일을 받게 된다는 사실을 알 수 있도록 이 문구를 매우 명확하게 작성해야 합니다.

   modal: {
       newsletter_subscribe_label: "Add me to your email list."
           ...
       }

5. 이 상자의 선택 또는 선택 취소 여부를 제어하려면 '모달' 섹션에 'subscribe_checked'를 매개변수로 추가하면 됩니다. 참은 기본적으로 확인란이 선택되어 있고 거짓은 선택되지 않은 상태이므로 사용자가 별도로 선택해야 합니다.

   modal: {
       subscribe_checked: true
           ...
       }

Shopify의 '품절 시 계속 판매' 설정과 Klaviyo의 재입고 기능을 사용할 수 있나요?

Klaviyo의 재입고 플로우는 재고 수준이 0에서 최소 재고 규칙에 설정된 특정 수량으로 변경되는 시점을 감지하여 작동합니다. Shopify의 '재입고 시 계속 판매' 설정을 활성화하면 목록에 재고가 없어도 제품을 구매할 수 있으므로 '알림 받기' 버튼이 표시되지 않습니다. 

이 시나리오에서는 재고 수준이 변경되지 않았으므로 Klaviyo의 재입고 플로우는 이 제품을 구독한 사람들에게 이메일을 보내지 않습니다. 재입고 이메일은 제품의 재고 수준이 최소 재고 규칙 집합에 도달한 경우에만 고객에게 전송됩니다. 

또한 '재입고 시 계속 판매' 설정을 활성화하면 제품이 구매 가능한 상태로 표시되므로 재고 수준에 관계없이 제품을 구매할 수 있어, 이 제품에 대한 Klaviyo의 재입고 모달이 사이트에 표시되지 않습니다.

문제 해결 팁

재입고 버튼의 모양은 스토어에서 사용하는 특정 Shopify 테마에 따라 달라집니다. 사용자 정의 테마를 사용하는 경우 재입고 기능이 제대로 작동하도록 테마 코드를 사용자 정의해야 할 수 있습니다.

플로우 설정

다음으로 Klaviyo에서 재입고 플로우를 설정하면 누군가 상품 재입고 알림을 구독할 때마다 알림이 트리거됩니다. 

재입고 설치 테스트

재입고 설치가 제대로 작동하는지 테스트하려면 다음과 같이 하세요.

1. 스토어에서 테스트 제품을 정합니다.
2. 해당 제품의 재고를 0으로 설정합니다.
3. 제품 페이지에서 '알림 받기' 버튼이 표시되는지 확인합니다.
4. '알림 받기' 버튼을 클릭하고 양식을 작성합니다.
5. 계정 설정에서 재입고 규칙을 충족할 만큼 충분한 재고를 추가합니다. 
6. 생성한 재입고 메시지를 받았는지 확인합니다.

결과

Klaviyo의 재입고 기능을 Shopify 스토어에 설치했습니다.

추가 자료

• 재입고 버튼 및 무료 Shopify 테마 양식의 스타일 지정 방법
• API를 통해 재입고를 설정하는 방법