Shopify のブログコメントには返信機能がない

標準のコメントフォームでできること、できないこと

Shopify のブログコメントはブログ単位で切り替えます。管理画面で「コンテンツ」（Content）>「ブログ記事」（Blog posts）>「ブログを管理」（Manage blogs）と進むと、設定はちょうど3つです。「コメントは無効です」、「コメントは許可されていますが、承認待ちです」、「コメントは許可されており、自動的に公開されます」。届いたコメントには「承認済み」「未承認」「スパム」のどれかが付き、スパムの疑いがあるものは Shopify が自動で印を付けます。スパムの印を外す操作が、そのまま承認にもなります。あとで驚かれるのは2つ。一度承認したコメントは未承認へ戻せず、削除したコメントは元に戻せません。

もっと大きい制約は構造のほうです。テーマは {% form 'new_comment', article %} でフォームを描き、article.comments を回して既存のコメントを並べますが、この一覧は1ページ50件で切れます。comment オブジェクトが返すのは author、content、created_at、email、id、status、updated_at、url です。どのコメントがどのコメントへの返信なのかを指す値は1つもないので、Liquid を自分で書いても返信は描けません。

月に1件コメントが付くかどうかのストアなら、標準のフォームのままで十分です。乗り換える理由が生まれるのは、記事の下で読者どうしが話しはじめたとき、つまり一方通行の投書箱では足りなくなったときです。

まず記事テンプレートがどちらかを確かめる

Shopify での本当の関門はここで、料金プランとは関係がありません。何かをコピーする前に確認してください。どのファイルを開くかがここで決まります。コードエディタ（「コードを編集」）で Templates（templates）のフォルダを開き、記事テンプレートを探します。templates/article.liquid があれば vintage テーマで、そのファイルに HTML と Liquid を直接書けます。templates/article.json があれば Online Store 2.0 や Horizon 世代のテーマで、いまのストアはほとんどこちらです。

JSON テンプレートはマークアップではなく、セクションと設定の一覧です。そこに <div> を貼り付けると JSON が壊れて保存に失敗し、ちょうどこの場所で手が止まって、Shopify ではウィジェットが動かないのだと結論づけてしまいます。JSON テーマで触るのは記事のメインセクションです。Sections（sections）のフォルダを開き、そのテンプレートが参照しているセクションを探してください。Dawn ならそれが sections/main-article.liquid で、日本語表示のテーマエディタでは「ブログ記事」という名前で並んでいます。この表示名はテーマごとの翻訳ファイルが決めるので、別のテーマでは違って見えます。

入れられるストアと、入れられないストア

料金プランを上げる必要はありません。Shopify はコードエディタもテーマエディタも、カスタム Liquid のセクションも、埋め込みアプリ（App embeds）のブロックも、プラン条件を付けずに文書で説明しています。Basic のプランページには、手を入れられるオンラインストアと、コメントを集めるブログ機能が含まれると書かれています。Basic から上はそれで話が終わりです。ただし Shopify がいま挙げている9つのプランのうち4つはこの話の外にあり、理由が2つに分かれます。

Lite と Agentic は、そもそも置く場所がありません。Lite のプランページはこのプランにオンラインストア販売チャネルが含まれないと書き、Agentic のプランページは、このプランで使えない機能の一覧の先頭に Online Store を置いています。オンラインストアが無ければテーマもブログも無く、コメント欄が座る場所もありません。塞がれているというより、話が成り立たないのです。

Starter と Retail はもう一方の制約を共有します。どちらも使えるテーマを Spotlight ひとつに絞り、どちらもほかのテーマや追加のカスタマイズは提供されないと書いていて、コードエディタに入れるかどうかはどちらのページも触れていません。だから可でも不可でもなく未確認として扱い、計画を立てる前に自分のストアで「コードを編集」を押してみるほうが早いです。2つとも新規の申し込みは閉じています。Starter のページの文は "The Starter plan isn't available to new stores." で、Retail のページにも Retail について同じ一文があります。いまどちらかを使っているなら、それは以前から使っていたからです。

読者の目に入るコメント欄

ローダーとマウント要素をそれぞれの場所へ

1. アドレスバーに出ている住所が登録の対象

   候補はちょうど2つです。.myshopify.com の住所はストアを作ったときに発行されて消えず、あとから接続した独自ドメインはお客さんが実際に打つ住所です。ブログ記事をどちらが配信しているかはドメイン設定をどこまで進めたかで決まり、独自ドメインをまだ接続していないストアはすべて myshopify の住所で出ています。ウィジェットは location.hostname をサイト ID に登録された住所と突き合わせるので、実際の記事を開いたときにアドレスバーにある住所を登録してください。切り替えの途中だったり、myshopify の住所で動作を確かめたりするなら両方を登録します。登録は BootSignal ダッシュボードで行い、返ってくるのがサイト ID です。Shopify のテーマに入る BootSignal の値は、その文字列ひとつだけです。

2. テーマを複製してから「コードを編集」を開く

   Shopify 管理画面で「オンラインストア」（Online Store）に進んでテーマを見つけ、横並びの「...」メニューから「コードを編集」（Edit code）を選びます。モバイルでは、メニューアイコン > Sales channels（販売チャネル）>「オンラインストア」> Manage themes（テーマの管理）> 横並びのメニュー >「コードを編集」の順です。触る前にテーマを複製しておいてください。テーマの更新でコードの変更が消えることがあるので、戻れる複製があるほうが安心です。

3. theme.liquid にローダーを置く

   ファイル一覧で Layout（layout）のフォルダを開き、theme.liquid を選びます。閉じる </body> タグの直前にローダーを貼り付けて「保存」（Save）を押します。タグの defer はそのままにしてください。Shopify の Theme Check は、パーサーを止めるスクリプトをストアが遅くなる原因として指摘しますし、defer の付いたタグは描画を待たせません。ほかの BootSignal ウィジェットもすべてこのタグ1つで立ち上がるので、あとから評価の欄やお知らせバーを足しても、ストアのスクリプトファイルが増えることはありません。

   コードコピー

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

4. 記事のメインセクションにマウント要素を足す

   JSON テーマなら Sections（sections）のフォルダを開き、記事のメインセクション（Dawn は sections/main-article.liquid）を編集します。マウント要素は本文の後ろ、ふつうは標準のコメントブロックがあった場所に置きます。vintage テーマなら同じ位置で templates/article.liquid に貼り付けます。data-thread-id を記事にひも付けておけば、記事1本がコメント欄1つを持ちます。

   コードコピー

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

5. 保存して、公開済みの記事を開く

   セクションのファイルを保存し、実際のブログ記事の URL を普通のブラウザタブで開きます。コメント欄が記事の下に出て、Google ログインを済ませた最初の訪問者から書き込めます。何も出てこないときはアドレスバーのホスト名を読み、ダッシュボードの一覧と突き合わせてください。ウィジェット自身がやっている確認がそれです。

マウント用の div を theme.liquid に置いてはいけない理由

theme.liquid は全ページ共通のレイアウトです。ローダーはどのページでも動くべきなのでそこが正解ですが、マウント要素は性格が違います。レイアウトに貼り付けると、空のコメント欄が商品ページにもカートにも、ポリシーのページにもトップページにも付いて回ります。この間違いはとても多く、そのあとで決済ボタンの下にコメント欄が座っている理由を探すことになります。

テーマがロックされていたり構造が変わっていたりして、記事のセクションにどうしても手が届かないときは、テンプレートの条件分岐で包んでブログ記事だけに描かせます。

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

動きはします。ただしストアの全ページが読み込むファイルに、ブログ用のマークアップを置いておくことになります。本来の住まいはセクションのファイルです。

コードエディタを開かないカスタム Liquid の道

コードに触らない道もあります。テーマエディタ（「テーマを編集」）を開き、上部中央のテンプレートのドロップダウンでブログ記事のテンプレートに切り替えます。そのあと左の一覧で「セクションを追加」（Add section）、既存のセクションの中なら「ブロックを追加」（Add block）を押し、カスタム Liquid を選びます。Dawn の日本語表示なら、追加するときの一覧では「カスタムLiquid」、追加したあとのセクション一覧では「カスタマイズされたLiquid」、コードを入れる欄は「Liquidコード」という名前です。そこにマウント要素を貼り付けて保存すれば終わりです。Shopify の Theme Store 要件はマーケットプレイスのテーマにこのセクションを義務づけ、カスタム Liquid のブロックをアプリがコードを差し込む場所として説明しているので、たいていのストアにはすでにあります。

• liquid の設定は中身を 50kb で制限します。ウィジェットのスニペットがそこに届くことはありません。
• 不正な Liquid は保存のときにエラーになり、閉じていない HTML タグは代わりに閉じられます。雑に貼ると構造が静かに変わることがあるので、スニペットは欠けのない形で入れてください。
• この設定では {% javascript %} や {% stylesheet %} のタグを使えません。生き残る形は、ふつうの HTML と <script src> だけです。
• 自作のテーマ、マーケットプレイス外のテーマ、古い vintage テーマには、カスタム Liquid が用意されていないことがあります。その場合はコードエディタだけが道になります。

標準のフォームを切らないと2つ動く

ウィジェットが動き出したあとも、テーマは Shopify 自身のコメントフォームをその下に描き続けます。「コンテンツ」>「ブログ記事」>「ブログを管理」でブログを選び、「コメントは無効です」に変えてください。コードに触らないままフォームが消えます。

切る前に、残したいものは先にコピーしておきます。置き場所も Shopify の外にしてください。削除したコメントは元に戻せず、標準のテーブルからウィジェットへ移す経路もないので、古いコメントと新しいコメントは最初から別のものとして生きていきます。

アクセスが増えても料金が動かない理由

サブスクリプション1つで、コメント欄も、あとから隣に足すものもまとめて含まれます。登録ドメイン1つあたり 月 $20 または年 $200、ページビューや訪問者を数える項目はありません。個人のサイトよりストアのブログでこの差が効くのは、購入ガイドの記事が特価まとめのサイトに拾われると一晩でアクセスが何倍にもなり、それでも請求書が動かないからです。ストアをもう1つ開けば登録ドメインが1つ増え、追加はダッシュボードで行います。カタログは有料ウィジェット38個と、登録なしで使えるブラウザツール33個で、購読したあとに増えたウィジェットも含まれます（料金の全体）。ほかのコメントツールと値段を並べた記事は比較のセクションにあります。

サブスクリプションが切れても、コメントがブログから消えることはありません。表示は残ったまま読み取り専用になり、何も削除されず、購読を再開すれば元どおりです。何年も続けるつもりのストアに何かを入れる前に、これは知っておく値打ちがあります。

同じ記事に星の評価も出す

theme.liquid に貼ったローダーがほかのウィジェットも動かすので、2つ目は同じセクションのファイルに div を1行足すだけです。ストアのブログで評価はきちんと働きます。点数の付いた購入ガイドは、点数のない記事とは違うふうに読まれます。

ここに集まったレビューは、お客様の声ウォールの材料にもなります。ウォールは実際に書かれた言葉しか出せず、無いレビューを作り出す方法がありません。作り物めいた社会的証明が売上を削るコマースのサイトでは、そこが効いてきます。

テーマを更新したら記事をもう一度開く

誰も先に教えてくれない保守の項目です。Shopify ははっきり書いています。テーマのコードに加えた変更がテーマの更新と互換性がない場合、更新されたコピーではそのコードの変更がすべて削除されます。ローダーもマウント要素もコードの変更です。まったく別の理由で承認した更新で静かに消えることがあり、警告も出ません。コメント欄が無くてもページは壊れないからです。

1. 更新の前にいまのテーマを複製しておけば、動いている設置が複製として残ります。
2. 更新が公開されたら、ブログ記事を1本開いてコメント欄がまだあるか見ます。
3. 消えていたら「コードを編集」をもう一度開き、2つの部品を貼り直します。ローダーは theme.liquid、マウント要素は記事のセクションです。
4. コメントそのものは危なくありません。BootSignal 側にスレッド ID で保存されているので、貼り直せば会話はそのまま戻ります。

ストアの変更を書き留めている場所があるなら、ほかのテーマ改修の隣にこれも1行残してください。更新の直後に使う2分は、いちばん良い記事の下の議論が1か月消えていたとお客さんから聞かされるより、ずっと安く付きます。