Shopify 스토어에 히트맵을 설치하는 방법 (앱 설치 불필요, 코드 한 줄이면 끝)

글 요약

Shopify에 히트맵을 추가하려면 theme.liquid에 코드 한 줄만 붙여넣으면 됩니다 — 앱 설치는 필요 없습니다

편집 전에는 항상 테마를 복제해 백업해 두세요. 저장하는 순간 바로 반영되며, STUDIO와 달리 별도의 재게시 단계가 없습니다

결제 페이지는 테마 코드가 실행되지 않아 추적되지 않습니다. "오류 없음"이 아니라 HeatMapX 대시보드에서 카운트가 실제로 늘어나는 것을 확인해야 성공입니다

앱을 설치하지 않고도 Shopify 스토어에 히트맵을 추가할 수 있을지 궁금하신가요? 가능합니다. Shopify는 앱 없이도 테마에 태그 코드 한 줄을 직접 붙여넣을 수 있게 해줍니다. 이 가이드에서는 편집 전 반드시 해야 할 백업 단계, 태그 추가 방법, 작동 확인 방법, 그리고 주의할 점들을 순서대로 살펴봅니다.

1단계: 사이트 키 발급받기

먼저 HeatMapX에 가입하고(무료 플랜 이용 가능), 스토어를 등록해 사이트 키를 발급받으세요. 신용카드는 필요 없습니다.

사이트 키를 받으셨다면, 아래 태그에서 YOUR_SITE_KEY 부분을 실제로 발급받은 키로 바꿔서 사용하세요.

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

진행 방법: theme.liquid에 태그 추가하기

1. (필수) 테마를 복제해 백업하기

코드를 직접 수정하기 전에는 반드시 먼저 현재 테마를 복제해 두세요. Shopify 관리자에서 온라인 스토어 → 테마로 이동해 게시 중인 테마를 찾은 뒤, "…" (작업) 메뉴를 클릭하고 복제를 선택합니다. 이렇게 하면 문제가 생겼을 때 되돌릴 수 있는 안전한 복사본이 생깁니다. 이 단계를 건너뛰면 실수로 수정했을 때 되돌릴 방법이 없습니다.

2. 코드 편집기 열기

Shopify 관리자에서 온라인 스토어 → 테마로 이동합니다
게시 중인 테마에서 "…" (작업) 메뉴를 클릭하고 코드 편집을 선택합니다
왼쪽에 테마의 파일 목록이 열립니다

3. layout/theme.liquid에 태그 추가하기

파일 목록에서 "Layout" 폴더를 열고 **theme.liquid**를 클릭합니다
파일에서 </head>를 찾아 그 바로 앞에 위 태그를 붙여넣습니다
파일을 저장합니다

4. 저장만 하면 끝 — 재게시는 필요 없음

Shopify에서는 테마 코드를 수정하면 저장하는 순간 바로 반영됩니다. STUDIO와 달리 별도의 "게시" 또는 "재게시" 단계가 없습니다. 저장하는 즉시 실제 운영 중인 스토어에 태그가 로드된 상태가 됩니다.

실제로 작동하는지 확인하는 방법

태그를 추가했다면 본인의 스토어에서 몇 개 페이지를 둘러보세요. 다만 중요한 부분이 있습니다.

페이지가 오류 없이 로드되는 것과 추적이 실제로 작동하는 것은 다릅니다. 브라우저 콘솔에 아무 문제가 표시되지 않더라도, 사이트 키를 잘못 입력했거나 태그를 엉뚱한 위치에 붙여넣었다면 데이터가 HeatMapX로 전혀 전달되지 않을 수 있습니다.

가장 확실한 확인 방법은 HeatMapX 대시보드를 열어 사이트 목록에서 해당 사이트를 찾고, 카운트가 실제로 늘어났는지 확인하는 것입니다. 상품 페이지, 컬렉션 페이지 등 몇 개 페이지를 방문한 후 카운트가 늘어난다면 설치가 정상적으로 작동하는 것입니다.

주의할 점

결제 페이지는 추적되지 않습니다

theme.liquid에 추가한 태그는 스토어 프런트 — 홈페이지, 상품 페이지, 컬렉션 페이지, 장바구니 — 에서는 실행되지만, 결제 페이지(/checkouts/ 하위의 결제 페이지)에서는 실행되지 않습니다. 결제는 테마와 별개로 Shopify가 직접 호스팅하며, theme.liquid의 테마 코드는 그곳에서 전혀 로드되지 않습니다. 대시보드에서 결제 페이지 관련 데이터가 보이지 않는다면 이는 버그가 아니라 정상적인 동작입니다.

테마를 변경하면 태그를 다시 추가해야 합니다

태그는 수정한 테마의 theme.liquid 파일에만 존재합니다. 이후 다른 테마로 전환(새 테마 게시)하면 새 테마의 theme.liquid에는 태그가 자동으로 옮겨지지 않습니다. 테마를 바꿀 때마다 동일한 절차를 반복해 새 테마에 태그를 추가하세요.

자주 묻는 질문

Q. 이걸 추가하면 스토어 속도가 느려지나요? A. 태그는 비동기로 로드되며 가볍기 때문에 페이지 로딩 속도에 미치는 영향은 미미합니다.

Q. 태그를 추가했는데 대시보드의 카운트가 늘지 않습니다 A. 가장 흔한 원인은 사이트 키 불일치입니다 — 다른 사이트의 키를 붙여넣었거나, 복사하는 과정에서 글자가 하나 빠졌을 수 있습니다. 또한 테스트 중인 페이지가 결제 페이지가 아니라 홈, 상품, 컬렉션 같은 스토어 프런트 페이지인지도 확인하세요. 결제 페이지는 절대 추적되지 않습니다.

마치며

Shopify에 히트맵을 추가하는 것은 결국 theme.liquid에 코드 한 줄을 붙여넣는 것으로 끝납니다 — 앱은 필요 없습니다. HeatMapX는 무료로 시작할 수 있으니, 한번 사용해 보시고 쇼핑객들이 실제로 스토어를 어떻게 이용하는지 확인해 보세요.