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