Shopifyにチャットボットを設置する方法【テーマコードを編集】
ShopifyのストアにAIチャットボットを設置する手順を解説します。 Shopifyではテーマのコードを直接編集して設置します。作業自体は5分ほどで終わります。
⚠️ 作業の前に、必ずテーマの複製（バックアップ）を取ってください
テーマコードの編集には、次の2つのリスクがあります。
① テーマを更新すると、追加したコードが削除されます（Shopify公式ヘルプにも明記されています）
② 編集を誤ると、ストアの表示が崩れることがあります
Shopify公式も「カスタマイズの前にテーマを複製してバックアップを作ること」を推奨しています。 手順1で必ず複製してください。問題が起きても、元のテーマに戻せます。
準備するもの：埋め込みコード
チャットボットのサービスから発行される、次のような1行のコードを用意します。
FAQuickの場合、管理画面の「埋め込みコード」欄にある「コードをコピー」ボタンで取得できます。
設置手順
テーマを複製してバックアップを取る
Shopify管理画面で「オンラインストア」→「テーマ」を開きます。 現在のテーマの「…」メニューから「複製」を選んでください。
これで、失敗しても元に戻せる状態になります。この手順を飛ばさないでください。
コードエディタを開く
公開中のテーマの「…」メニューから「コードを編集」を選びます。
theme.liquid を開く
左側のファイル一覧から、「Layout」フォルダの中にある theme.liquid をクリックします。これが全ページ共通の骨組みになるファイルです。
</body> の直前に貼り付ける
ファイルの一番下のあたりにある </body> という行を探します
（Ctrl + F でファイル内を検索できます）。
その直前の行に、埋め込みコードを貼り付けてください。
保存して、ストアで確認する
「保存」をクリックし、ストアを開いてください。右下にチャットボタンが表示されていれば完了です。
💡 全ページに表示されます
theme.liquid は全ページ共通のファイルなので、トップページだけでなく、商品ページやカートページにもチャットボットが表示されます。
購入前の「送料は？」「返品できる？」といった質問にその場で答えられるため、カゴ落ちを減らす効果が期待できます。
テーマを更新する時の注意
Shopifyのテーマを新しいバージョンに更新すると、追加したコードは引き継がれません。 テーマ更新後にチャットボットが消えていたら、同じ手順でもう一度貼り付けてください。
更新の頻度が高い場合や、コード編集に不安がある場合は、Shopifyアプリでコードを挿入できるタイプのツールを使う方法もあります。
表示されない時は
- 編集したテーマは「公開中」のものですか？ 複製した方（非公開）を編集していないか確認してください。
- 保存しましたか？ コードエディタでは「保存」を押すまで反映されません。
- 貼る場所が違いませんか？
</body>の直前です。</head>ではありません。 - コードが途中で切れていませんか？ 末尾の
</script>まで貼れているか確認してください。 - ブラウザのキャッシュが残っている可能性があります。
Ctrl + F5で強制的に再読み込みしてください。
テーマ編集の詳細は、Shopify公式ヘルプ（テーマコードの編集）もあわせてご確認ください。