Shopify 블로그 기본 댓글에는 답글이 없다

기본 댓글 폼이 해 주는 것과 못 하는 것

Shopify 블로그 댓글은 블로그 단위로 켜고 끕니다. 관리자에서 콘텐츠(Content) > 블로그 게시물(Blog posts) > 블로그 관리(Manage blogs)로 가면 설정이 딱 세 가지입니다. 댓글 사용 안 함, 댓글 허용, 검토 보류, 댓글 허용 및 자동 게시. 달린 댓글에는 승인됨·승인되지 않음·스팸 중 하나가 붙고, 스팸으로 의심되는 것은 Shopify 가 자동으로 표시합니다. 스팸 표시를 푸는 동작이 곧 승인이기도 합니다. 나중에 사람들이 놀라는 지점은 둘입니다. 한 번 승인한 댓글은 미승인으로 되돌릴 수 없고, 삭제한 댓글은 복구할 수 없습니다.

더 큰 제약은 구조입니다. 테마는 {% form 'new_comment', article %} 로 폼을 그리고 article.comments 를 돌려 기존 댓글을 뿌리는데, 이 목록은 한 페이지에 50개씩 끊깁니다. comment 객체가 내주는 값은 author, content, created_at, email, id, status, updated_at, url 입니다. 어떤 댓글이 어떤 댓글에 달렸는지 가리키는 값이 하나도 없으니, Liquid 를 직접 짜도 답글은 그려 낼 수 없습니다.

한 달에 댓글 하나쯤 달리는 스토어라면 기본 폼을 그대로 두는 편이 낫습니다. 갈아탈 이유가 생기는 것은 독자들이 글 아래에서 서로 이야기하기 시작할 때, 그러니까 한 방향 쪽지함으로는 부족해질 때입니다.

내 테마의 글 템플릿이 어느 쪽인지 먼저 본다

Shopify 에서 진짜 관문은 이것이고 요금제와는 상관이 없습니다. 무엇 하나 복사하기 전에 확인하세요. 어느 파일을 열지가 여기서 갈립니다. 코드 편집(Edit code) 화면에서 템플릿(Templates) 폴더를 열고 글 템플릿을 찾습니다. templates/article.liquid 이 보이면 vintage 테마여서 그 파일에 HTML 과 Liquid 를 바로 적을 수 있습니다. templates/article.json 이 보이면 Online Store 2.0 이나 Horizon 세대 테마이고, 요즘 스토어는 대부분 이쪽입니다.

JSON 템플릿은 마크업이 아니라 섹션과 설정의 목록입니다. 거기에 <div> 를 붙여넣으면 JSON 이 깨져 저장이 실패하고, 사람들은 정확히 이 자리에서 손을 놓고 Shopify 에서는 위젯이 안 된다고 결론을 내립니다. JSON 테마에서 손댈 곳은 글의 메인 섹션입니다. 섹션(Sections) 폴더를 열어 그 템플릿이 참조하는 섹션을 찾으세요. Dawn 이라면 sections/main-article.liquid 이고, 테마 편집기의 섹션 목록에서는 블로그 게시물 이라는 이름으로 보입니다.

설치가 되는 스토어와 안 되는 스토어

요금제를 올려야 하는 일은 없습니다. Shopify 는 코드 편집기, 테마 편집기, 사용자 지정 Liquid 섹션, App embed 블록을 요금제 조건 없이 문서로 설명하고, Basic 요금제 페이지에는 손볼 수 있는 온라인 스토어와 댓글을 받는 블로그 기능이 들어 있다고 적혀 있습니다. Basic 위로는 그게 이야기의 전부입니다. 다만 Shopify 가 지금 열거하는 요금제 아홉 개 중 넷은 이 이야기 밖에 있고, 이유가 두 갈래입니다.

Lite 와 Agentic 은 설치할 지면 자체가 없습니다. Lite 요금제 페이지는 이 요금제에 온라인 스토어 판매 채널이 포함되지 않는다고 적고, Agentic 요금제 페이지는 이 요금제에서 쓸 수 없는 기능 목록의 첫 줄에 Online Store 를 올려 두었습니다. 온라인 스토어가 없으면 테마도 블로그도 없고 댓글이 앉을 자리도 없으니, 막힌 것이 아니라 이야기 자체가 성립하지 않습니다.

Starter 와 Retail 은 다른 쪽 제약을 공유합니다. 둘 다 쓸 수 있는 테마를 Spotlight 하나로 제한하고, 둘 다 다른 테마와 추가 사용자 지정 옵션은 제공되지 않는다고 적어 두었으며, 코드 편집기에 들어갈 수 있는지는 어느 쪽 페이지도 말하지 않습니다. 그러니 된다도 안 된다도 아니라 확인 안 됨으로 두고, 계획을 세우기 전에 내 스토어에서 코드 편집을 직접 눌러 보는 편이 빠릅니다. 두 요금제 모두 신규 가입은 닫혀 있습니다. Starter 페이지의 문장은 "The Starter plan isn't available to new stores." 이고, Retail 페이지에도 Retail 을 두고 같은 문장이 있습니다. 지금 이 둘 중 하나를 쓰고 있다면 원래부터 쓰고 있었기 때문입니다.

독자에게 보일 댓글창의 모양

로더와 마운트 요소를 각자 자리에 넣는다

1. 주소창에 떠 있는 주소가 등록 대상이다

   후보는 딱 둘입니다. .myshopify.com 주소는 스토어를 만들 때 발급되어 없어지지 않고, 나중에 연결한 커스텀 도메인은 고객이 실제로 입력하는 주소입니다. 블로그 글을 어느 쪽이 내보내는지는 도메인 설정을 어디까지 했느냐에 달렸고, 커스텀 도메인을 아직 연결하지 않은 스토어는 전부 myshopify 주소로 나갑니다. 위젯은 location.hostname 을 site id 에 등록된 도메인 목록과 맞춰 보므로, 실제 글을 열었을 때 주소창에 있는 주소를 등록하세요. 전환 중이거나 myshopify 주소로 확인 작업을 한다면 둘 다 등록합니다. 등록은 BootSignal 대시보드에서 하고, 돌아오는 값이 site id 입니다. Shopify 테마에 들어가는 BootSignal 값은 그 문자열 하나뿐입니다.

2. 테마를 복제한 다음 코드 편집을 연다

   Shopify 관리자에서 온라인 스토어(Online Store)로 가서 테마를 찾고, 가로 메뉴("...") 아이콘을 눌러 코드 편집(Edit code)을 고릅니다. 모바일에서는 메뉴 아이콘 > Sales channels(판매 채널) > 온라인 스토어 > Manage themes(테마 관리) > 가로 메뉴 아이콘 > 코드 편집 순서입니다. 손대기 전에 테마를 복제해 두세요. 테마 업데이트가 코드 수정분을 지울 수 있으니 돌아갈 사본이 있는 편이 낫습니다.

3. theme.liquid 에 로더를 넣는다

   파일 목록에서 레이아웃(Layout) 폴더를 열고 theme.liquid 를 고릅니다. 닫는 </body> 태그 바로 앞에 로더를 붙여넣고 저장(Save)을 누릅니다. 태그의 defer 는 그대로 두세요. Shopify 의 Theme Check 는 파서를 막는 스크립트를 스토어가 느려지는 원인으로 지적하고, defer 가 붙은 태그는 렌더링을 붙잡지 않습니다. 나머지 BootSignal 위젯도 모두 이 태그 하나로 뜨니, 나중에 별점 블록이나 공지 바를 더해도 스토어에 스크립트 파일이 하나 더 늘지는 않습니다.

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ko" defer></script>

   복사

4. 글의 메인 섹션에 마운트 요소를 더한다

   JSON 테마라면 섹션(Sections) 폴더를 열어 글의 메인 섹션(Dawn 은 sections/main-article.liquid)을 편집합니다. 마운트 요소는 본문 뒤, 보통 기본 댓글 블록이 있던 자리에 둡니다. vintage 테마라면 같은 위치로 templates/article.liquid 에 붙여넣습니다. data-thread-id 를 글에 연결해 두면 글 하나가 댓글창 하나를 갖습니다.

   <div data-bootsignal="comments" data-thread-id="{{ article.handle }}"></div>

   복사

5. 저장하고 발행된 글을 열어 본다

   섹션 파일을 저장하고 실제 블로그 글 URL 을 평범한 브라우저 탭에서 엽니다. 댓글창이 글 아래에 뜨고, Google 로그인을 마친 첫 방문자부터 글을 쓸 수 있습니다. 아무것도 안 보이면 주소창의 호스트네임을 읽어 대시보드 목록과 맞춰 보세요. 위젯이 하고 있는 검사가 바로 그것입니다.

마운트 div 가 theme.liquid 에 가면 안 되는 이유

theme.liquid 는 전역 레이아웃입니다. 로더는 모든 페이지에서 돌아야 하니 거기가 맞고, 마운트 요소는 성격이 다릅니다. 레이아웃에 붙여넣으면 빈 댓글창이 상품 페이지와 장바구니, 정책 페이지, 홈에까지 따라 나옵니다. 이 실수는 아주 흔하고, 그다음에 결제 버튼 아래 댓글 상자가 왜 앉아 있는지 묻게 됩니다.

테마가 잠겨 있거나 구조가 특이해서 글 섹션에 정말 손이 닿지 않는다면, 템플릿 조건문으로 감싸 블로그 글에서만 그려지게 합니다.

{% if template contains 'article' %}
  <div data-bootsignal="comments" data-thread-id="{{ article.handle }}"></div>
{% endif %}

되기는 합니다. 다만 스토어의 모든 페이지가 불러오는 파일에 블로그용 마크업을 넣어 두는 셈입니다. 제자리는 섹션 파일입니다.

코드 편집기를 열지 않는 사용자 지정 Liquid 경로

코드를 건드리지 않는 길도 있습니다. 테마 편집(Edit theme)으로 편집기를 열고, 위쪽 가운데의 템플릿 드롭다운에서 블로그 글 템플릿으로 바꿉니다. 그다음 왼쪽 섹션(Sections) 목록에서 섹션 추가(Add section)나 블록 추가(Add block)를 누르고 사용자 지정 Liquid 를 고릅니다. Liquid 코드 칸에 마운트 요소를 붙여넣고 저장하면 끝입니다. Shopify 의 Theme Store 요구사항은 마켓플레이스 테마에 이 섹션을 의무로 두고 사용자 지정 Liquid 블록을 앱이 코드를 끼워 넣는 자리로 설명하니, 대부분의 스토어에는 이미 있습니다.

• liquid 설정은 내용을 50kb 로 제한합니다. 위젯 스니펫이 거기에 닿을 일은 없습니다.
• 잘못된 Liquid 는 저장할 때 오류가 나고, 닫히지 않은 HTML 태그는 대신 닫아 줍니다. 허술하게 붙여넣으면 구조가 조용히 바뀔 수 있으니 스니펫은 온전한 채로 넣으세요.
• 이 설정에서는 {% javascript %} 나 {% stylesheet %} 태그를 쓸 수 없습니다. 평범한 HTML 에 <script src> 하나, 그 모양만 살아남습니다.
• 직접 만든 테마, 마켓플레이스 밖에서 받은 테마, 오래된 vintage 테마에는 사용자 지정 Liquid 가 아예 없을 수 있습니다. 그러면 코드 편집기가 유일한 길입니다.

기본 폼을 끄지 않으면 두 개를 돌리게 된다

위젯이 살아난 뒤에도 테마는 여전히 Shopify 자기 댓글 폼을 그 아래에 그립니다. 콘텐츠 > 블로그 게시물 > 블로그 관리로 가서 블로그를 고르고 댓글 사용 안 함 으로 바꾸세요. 코드는 건드리지 않고 폼이 사라집니다.

끄기 전에 남길 만한 것은 미리 복사해 두고, 그것도 Shopify 밖에 두세요. 삭제한 댓글은 복구할 수 없고 기본 테이블에서 위젯으로 옮겨 주는 경로도 없으니, 옛 댓글과 새 댓글은 처음부터 서로 다른 것으로 살게 됩니다.

값이 트래픽을 따라가지 않는 이유

구독 하나가 댓글창과 그 옆에 나중에 얹을 것들까지 덮습니다. 등록 도메인 하나에 월 $20 또는 연 $200, 페이지뷰나 방문자를 세는 항목은 없습니다. 개인 사이트보다 스토어 블로그에서 이 차이가 크게 느껴지는데, 구매 가이드 글 하나가 특가 정보 모음 사이트에 걸리면 트래픽이 하룻밤에 몇 배가 되고도 청구서는 그대로이기 때문입니다. 스토어를 하나 더 열면 등록 도메인이 하나 더 늘고, 추가는 대시보드에서 합니다. 카탈로그는 유료 위젯 31개와 구독 없이 쓰는 브라우저 도구 31개이고, 구독한 뒤에 추가되는 위젯도 포함입니다(요금 전체). 다른 댓글 도구와 값을 나란히 놓고 본 글은 비교 지면에 있습니다.

구독이 끊기더라도 댓글이 블로그에서 사라지지는 않습니다. 그대로 보이면서 읽기 전용이 되고, 아무것도 삭제되지 않고, 다시 구독하면 원래대로 돌아옵니다. 몇 년을 두고 갈 스토어에 무엇을 설치하든, 이건 미리 알아 둘 값이 있습니다.

같은 글에 별점까지

theme.liquid 에 붙인 로더가 나머지 위젯도 돌리니, 두 번째 위젯은 같은 섹션 파일에 div 한 줄이면 됩니다. 스토어 블로그에서 별점은 제 몫을 합니다. 점수가 붙은 구매 가이드는 점수가 없는 글과 다르게 읽힙니다.

여기 모인 후기는 리뷰월 위젯의 재료가 되기도 합니다. 리뷰월은 사람들이 실제로 남긴 말만 보여 줄 수 있고, 없는 후기를 만들어 낼 방법이 없습니다. 가짜처럼 보이는 사회적 증거가 판매를 깎아먹는 커머스 사이트에서는 그게 중요합니다.

테마를 업데이트하면 글을 다시 확인한다

아무도 미리 알려 주지 않는 유지보수 항목입니다. Shopify 는 분명하게 적어 두었습니다. 테마에 넣은 코드 수정이 테마 업데이트와 호환되지 않으면 업데이트된 사본에서 그 수정분이 전부 제거됩니다. 내 로더와 마운트 요소도 코드 수정입니다. 전혀 다른 이유로 승인한 업데이트에서 조용히 사라질 수 있고, 경고도 없습니다. 댓글창이 없어도 페이지는 깨지지 않기 때문입니다.

1. 업데이트하기 전에 지금 테마를 복제해 두면, 돌아가는 설치본이 사본으로 남습니다.
2. 업데이트가 발행되면 블로그 글 하나를 열어 댓글창이 그대로 있는지 봅니다.
3. 사라졌으면 코드 편집을 다시 열어 두 조각을 다시 붙입니다. 로더는 theme.liquid, 마운트 요소는 글 섹션입니다.
4. 댓글 자체는 위험하지 않습니다. BootSignal 쪽에 thread id 로 저장되어 있어서, 다시 붙여넣으면 대화가 있던 그대로 돌아옵니다.

스토어 변경 사항을 적어 두는 곳이 있다면 다른 테마 수정 항목 옆에 이것도 한 줄 남기세요. 업데이트 직후에 쓰는 2분이, 제일 좋은 글 아래 토론이 한 달째 비어 있었다는 이야기를 고객에게서 듣는 것보다 낫습니다.