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

사이트 탐색 모음("헤더")에 특정 "즐겨찾기" 아이콘을 추가하면 고객이 클라비요 고객 허브 내에서 즐겨찾기를 찾는 데 발생하는 마찰을 줄여 더 많은 참여를 유도할 수 있습니다. 쇼핑객에게 저장된 품목을 위한 전용 시작 지점을 제공하면 더 큰 장바구니를 만들고 스토어를 더 자주 방문하도록 유도할 수 있습니다.

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

이 가이드에서는 테마 에셋에 하트 아이콘을 업로드하고 Shopify의 Liquid 코드를 사용하여 사이트 헤더에 코드 링크를 삽입하는 방법에 대해 설명합니다.

참고 이 프로세스에는 Shopify 테마 코드 편집이 포함됩니다. 코드 작성에 익숙하지 않거나 팀에 개발자가 없는 경우 Klaviyo 파트너에게 문의하여 도움을 받으시기 바랍니다. Klaviyo 지원팀은 사용자 지정 코드 구현 문제를 해결할 수 없습니다.

시작하기 전에 알아야 할 것

변경하기 전에 라이브 테마를 복제하는 것이 좋습니다. 이렇게 하면 라이브 스토어에 영향을 주지 않고 안전한 환경에서 새 아이콘을 테스트할 수 있습니다.

1. Shopify에서 온라인 스토어 > 테마로 이동합니다.

2. 라이브 테마 옆의 점 3개 메뉴(...) 를 클릭합니다.

3. 복제를 선택합니다.

1단계: 에셋 준비하기(아이콘을 사용하려는 경우)

먼저 버튼 역할을 할 아이콘 파일을 업로드합니다. SVG 파일을 사용하는 것이 가장 좋은데, 화질 저하 없이 화면 크기에 맞게 조정할 수 있고 테마의 색상을 그대로 계승할 수 있기 때문입니다.

1. 사용하려는 아이콘을 찾아야 합니다. 모든 아이콘을 사용할 수 있지만 픽셀화를 방지하기 위해 SVG를 사용하는 것이 좋습니다. 표준(MIT 라이선스) 버전은 여기에서 다운로드할 수 있습니다: 히어로 아이콘 하트.svg.

2. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

3. 테마를 찾아 점 3개 메뉴(...)를 클릭하고 > 코드 편집을 클릭합니다.

4. 왼쪽 사이드바에서 아래로 스크롤하여 자산 폴더로 이동한 다음 새 자산 추가를 클릭합니다.

5. 아이콘 파일을 업로드합니다.

2단계: 헤더(상단 탐색 모음) 링크 삽입하기

그런 다음 아이콘을 표시하는 코드 조각을 추가하고 이를 클라비요 고객 허브에 연결합니다.

1. 테마 코드 편집기에서 헤더를 제어하는 파일을 찾습니다.

   • 온라인 스토어 2.0 테마(예: 새벽): 섹션/header.liquid를 검색합니다.

   • 빈티지 테마: snippets/header-icons.liquid 또는 header-bar.liquid를 검색하세요.

2. 삽입 지점을 찾습니다: Ctrl+F (또는 Mac의 경우 Cmd+F )를 누르고 카트 또는 계정이라는 단어를 검색합니다. 기존 아이콘이 있는 동일한 컨테이너(보통 또는 <div> <ul><ul > )에 새 코드를 붙여넣고 싶습니다.

3. 링크를 표시할 위치(예: 장바구니 아이콘 바로 앞)에 아래 코드 옵션 중 하나를 붙여넣습니다.

<a href="#k-hub/favorites"
 id="즐겨찾기에 아이콘 거품"
 aria-label="즐겨찾기에 열기"
 title="즐겨찾기에"
 style="display:flex;align-items:center;justify-content:center;height:4.4rem;width:4.4rem;">
  <스팬 스타일"높이:20px;너비:20px"> 
 {{ 'icon-heart.svg' | inline_asset_content }} 
 </span>
</a>

<a href="#k-hub/favorites" class="header__menu-item header__menu-item--list" style="text-decoration: none;"> 
 즐겨찾기는
</a>

<a href="#k-hub/favorites" class="버튼 버튼-기본"> 
 즐겨찾기를
</a>

팁: 테마 스타일 일치하기 테마에서 헤더 아이콘에 특정 CSS 클래스를 사용하는 경우(예: 헤더__icon or icon-link), you can replace the inline style= attribute in the code above with that class (e.g., class="header__아이콘"). 이렇게 하면 간격 및 호버 효과가 다른 버튼과 완벽하게 일치합니다.

결과

저장 후 새 시크릿/비공개 창에서 스토어를 열어 브라우저 캐싱을 우회합니다. 탐색 모음에 하트 아이콘이 표시됩니다. 이 아이콘을 클릭하면 이제 클라비요 고객 허브 내에서 즐겨찾기 탭이 열립니다.

문제 해결

아이콘이 표시되지 않거나 올바르지 않게 보이는 경우:

• 아이콘이 깨진 이미지입니다: 자산 폴더에 파일을 업로드하고 이름을 정확히 icon-heart.svg로 지정했는지 확인하세요. 파일 이름은 대소문자를 구분합니다.

• 아이콘이 잘못 정렬되었습니다: 테마의 탐색 모음 높이와 일치하도록 코드 조각의 스타일 속성에서 높이 및 너비 값을 조정해야 할 수 있습니다.

• 변경 사항이 표시되지 않습니다: Shopify 테마는 적극적으로 캐시합니다. 시크릿 창에서 테마를 미리 보거나 초안 테마로 작업하는 경우 URL에 ?preview_theme_id=를 추가해 보세요.