Shopify 헤더에 즐겨찾기 링크(아이콘, 텍스트 또는 버튼)를 추가하는 방법

Shopify 탐색 모음(헤더)에 즐겨찾기 링크를 추가해 쇼핑객이 Klaviyo 고객 허브에서 저장한 제품을 바로 열 수 있도록 하는 방법을 알아보세요.

이를 아이콘 (예: 하트), 간단한 텍스트 링크 (예: "즐겨찾기"), 또는 버튼으로 구현할 수 있어요. 이 가이드에서는 Shopify의 Liquid 코드를 사용해 사이트 헤더에 필요한 코드를 삽입하는 방법을 안내해요.

이 헤더 링크를 통해 저장된 즐겨찾기를 열 수 있어요. 쇼핑객이 제품 상세 페이지 또는 컬렉션 페이지에서 제품을 저장할 수 있도록 하려면 사이트와 Klaviyo 고객 허브에서 즐겨찾기 버튼을 표시하는 방법을 따라 해 주세요.

주의 이 과정에서는 Shopify 테마 코드를 편집해야 해요. 코드를 작성하는 데 익숙하지 않거나 팀에 개발자가 없는 경우 Klaviyo 파트너에게 연락해 도움을 받는 것을 권장해요. Klaviyo 지원팀은 맞춤 코드 구현과 관련된 문제를 해결해 드릴 수 없어요.

시작하기 전에 알아야 할 것

이 링크를 추가하기 전에 Shopify 스토어에서 Klaviyo 고객 허브를 설정 하고 Klaviyo에서 즐겨찾기를 활성화해 주세요. 편집할 Shopify 테마에서 Klaviyo 앱 임베드가 활성화되어 있는지 확인해 주세요.

변경하기 전에 라이브 테마를 복제해 두는 것을 강력히 권장해요. 이렇게 하면 라이브 스토어에 영향을 주지 않고 새 링크를 테스트할 수 있어요.

1. Shopify에서 온라인 스토어 > 테마로 이동하세요.
2. 라이브 테마 옆의 점 3개 메뉴(...)를 클릭해 주세요.
3. 복제를 선택하세요.

1단계: 자산 준비(아이콘을 사용하려는 경우)

아래 아이콘 옵션에는 15KB보다 작은 SVG 파일을 사용해 주세요. SVG는 품질 저하 없이 어떤 화면 크기에도 맞게 확장되며, 테마의 색상을 상속할 수도 있어요. 텍스트 링크나 버튼을 선호하신다면 2단계로 건너뛰세요.

1. 사용하려는 아이콘을 찾아야 해요. 어떤 아이콘이든 사용할 수 있지만, 픽셀화되는 것을 방지하려면 SVG를 사용하는 것을 권장해요. 여기에서 표준(MIT 라이선스) 버전을 다운로드할 수 있어요: Heroicons heart.svg. 아래 아이콘 코드와 일치하도록 파일을 icon-heart.svg로 저장하세요.
2. Shopify 관리자에서 온라인 스토어 > 테마로 이동하세요.
3. 중복된 테마를 찾아 점 3개 메뉴(...) > 코드 편집을 클릭해 주세요.
4. 왼쪽 사이드바에서 assets 폴더를 마우스 오른쪽 버튼으로 클릭한 다음 업로드...를 선택해 파일 선택 창을 여세요.
5. SVG 파일을 선택하고 열기를 클릭해 주세요.

2단계: 헤더(상단 탐색 모음) 링크를 삽입해 주세요

다음으로 아이콘, 텍스트 링크 또는 버튼에 사용할 코드 조각을 추가해 주세요. 각 옵션을 선택하면 Klaviyo 고객 허브에서 즐겨찾기가 열려요.

1. 1단계를 건너뛰었다면 Shopify에서 코드 편집기를 여세요: 온라인 스토어 > 테마로 이동해 주세요. 복제한 테마 옆에서 점 3개 메뉴(...) > 코드 편집을 클릭해 주세요. 복제한 테마의 코드 편집기에서 헤더를 제어하는 파일을 찾으세요.
   • Online Store 2.0 테마(예: Dawn): sections/header.liquid을(를) 검색해 보세요.
   • Vintage 테마: snippets/header-icons.liquid 또는 header-bar.liquid을(를) 검색해 보세요.
2. 삽입 위치 찾기: Ctrl+F (Mac에서는 Cmd+F)을 누르고 cart 또는 account라는 단어를 검색하세요. 기존 아이콘이 들어 있는 동일한 컨테이너(일반적으로 <div> 또는 <ul>) 안에 새 코드를 붙여넣으면 돼요.
3. 링크가 표시될 위치(예: 장바구니 아이콘 바로 앞)에 아래 코드 옵션 중 1 개를 붙여넣어 주세요.

옵션 A: 아이콘 링크

1단계를 완료했고, 예시에서 아이콘 이름이 icon-heart.svg라고 가정할 때 하트 아이콘을 표시하려면 이 코드를 사용하세요:

<a href="#k-hub/favorites"
   id="favorites-icon-bubble"
   aria-label="Open Favorites"
   title="Favorites"
   style="display:flex;align-items:center;justify-content:center;height:4.4rem;width:4.4rem;">
  <span style="height:20px;width:20px">
    {{ 'icon-heart.svg' | inline_asset_content }}
  </span>
</a>

옵션 B: 텍스트 링크 또는 버튼

텍스트 링크나 버튼을 선호한다면 이 코드를 사용해 보세요. 이를 위해 어떤 에셋도 업로드할 필요가 없어요.

간단한 텍스트 링크의 경우:

<a href="#k-hub/favorites" class="header__menu-item header__menu-item--list" style="text-decoration: none;">
  Favorites
</a>

버튼의 경우:

<a href="#k-hub/favorites" class="button button--primary">
  Favorites
</a>

1. 저장을 클릭합니다.

팁: 테마 스타일에 맞추기 테마에서 헤더 아이콘에 특정 CSS 클래스(예: header__icon 또는 icon-link)를 사용한다면, 위 코드에서 인라인 style= 속성을 해당 클래스로(예: class="header__icon") 바꿀 수 있어요. 결과를 미리 보기로 확인해서 간격과 호버 효과가 다른 헤더 링크와 일치하는지 확인해 보세요.

3단계: 변경 사항을 테스트하고 게시하기

코드를 저장한 후에는 편집한 테마를 미리 보고, 게시하기 전에 링크를 테스트해 보세요.

1. Shopify에서 온라인 스토어 > 테마로 이동하세요. 수정한 복제 테마 옆에서 점 3개 메뉴(...) > 미리 보기를 클릭하세요.
2. 데스크톱과 모바일에서 헤더를 확인해 주세요. 추가한 아이콘, 텍스트 링크, 또는 버튼이 표시될 거예요. 이를 클릭한 다음, Klaviyo 고객 허브에서 저장된 즐겨찾기가 열리는지 확인해 주세요.
3. 복제된 테마의 모든 변경 사항을 고객에게 표시할 준비가 되면 온라인 스토어 > 테마로 돌아가세요. 초안 테마에서 편집한 복제본을 찾은 다음 게시를 클릭하세요.
4. 라이브 스토어를 열고 즐겨찾기 링크를 다시 테스트해 보세요.

문제 해결

링크가 표시되지 않거나, 잘못 표시되거나, Klaviyo 고객 허브가 열리지 않는 경우:

• 아이콘이 표시되지 않음: 파일이 assets 폴더에 있고, 15KB보다 작은 SVG이며, 코드 조각과 일치하도록 정확히 icon-heart.svg (으)로 이름이 지정되어 있는지 확인해 주세요. 파일 이름은 대소문자를 구분합니다.
• 아이콘 정렬이 맞지 않아요: 테마의 탐색 모음 높이와 일치하도록 코드 조각의 style 속성에서 height 및 width 값을 조정해야 할 수 있어요.
• 변경 사항이 표시되지 않음: 편집한 테마를 미리 보고 있는지 확인해 주세요. Shopify에서 미리 보기를 다시 열어 주세요. 중복 테마를 저장해도 라이브 스토어는 업데이트되지 않으니, 테스트 후 게시해 주세요.
• Klaviyo 고객 허브 링크가 열리지 않음: Klaviyo 고객 허브가 설정되어 있고, 보고 있는 테마에서 Klaviyo 앱 임베드가 활성화되어 있는지 확인해 주세요. 링크가 여전히 #k-hub/favorites을(를) 사용하고 있는지 확인해 주세요.