このガイドでは、FlowHuntをShopifyストアに接続し、あらかじめ用意されたShopifyチャットボットフローを追加・公開し、ストアフロントにチャットボットを埋め込む手順を説明します。
前提条件
- 管理者権限のあるShopifyストア
- ワークスペースにアクセスできるFlowHuntアカウント：https://app.flowhunt.io/
- 重要: FlowHuntアカウントはShopify管理者アカウントと同じメールアドレスを使用してください。
1) ShopifyとFlowHuntを連携（Shopify App Store経由）
- Shopify App Storeを開き、「FlowHunt」で検索します。
- 「インストール」をクリックし、必要に応じて正しいストアを選択します。
- 要求されている権限を確認し、「アプリをインストール」または「認可」をクリックします。
インストール後、Shopifyおよび/またはFlowHuntの画面にリダイレクトされます。連携はマーケットプレイスのインストールフローを通じて作成されます。
2) FlowHuntアプリをShopifyストアにインストール
- Shopifyの認可画面で要求されている権限を確認します。
- 「アプリをインストール」をクリックしてインストールを完了します。
3) Shopify連携が有効になっていることを確認
インストールが完了したら、FlowHunt → 連携画面に戻ります。Shopifyが「接続済み/有効」と表示されているはずです。
有効でない場合は、「再接続」をクリックして認可フローを再実行してください。
4) FlowライブラリからShopifyチャットボットを追加
- FlowHuntでFlowライブラリに移動します。
- 「Shopify Chatbot」で検索します。
- テンプレートを開いて「ワークスペースに追加」をクリックします。
これで、すぐに使えるShopifyチャットボットフローがワークスペースに追加されます。
5) チャットボットをブランド用にカスタマイズ
追加したフローを開いて、次を調整します：
- システムプロンプトとトーン：ブランドの声やガイドラインを設定
- ナレッジソース：商品カタログ、FAQ、ポリシー、その他ドキュメントを接続
- ツールとアクション：注文検索、ステータス確認、CRM更新などを必要に応じて有効化（プランや設定によります）
- UI/ブランディング：ウィジェット名、挨拶文など、Chatbotsセクションで表示ラベルを設定
設定が完了したら「保存」してください。
6) フローを公開
フローの「公開」をクリックすると、Webサイトやストアフロントでチャットボットが利用できるようになります。
7) 新しい連携コード（チャットボット）を作成
- FlowHuntで「Chatbots」に移動します。
- 「新しい連携コード」をクリックします。
- 先ほど公開したフローを選択します。
- ウィジェットのオプション（テーマ、位置、起動動作、言語、許可ドメインなど）を設定します。
- 保存します。FlowHuntがスクリプトスニペット（連携コード）を生成します。
このスニペットは次のステップでShopifyテーマに貼り付けるので、控えておきましょう。
8) Shopifyストアフロントにチャットボットを埋め込む
連携コードの追加方法は2つあります。ニーズに合った方法を選んでください。
オプションA — theme.liquid（全ページ共通）に追加
この方法では、ストアのすべてのページにチャットボットが表示されます。以下の詳細手順に従ってください。
ステップ1: Shopify管理画面でオンラインストア > テーマに移動
ステップ2: 使用中のテーマ横のカスタマイズをクリック
ステップ3: 左上の**3点リーダー（⋯）**をクリックし、コードを編集を選択
ステップ4: Layoutフォルダのtheme.liquidファイル（/layout/theme.liquid）を探す
ステップ5: 連携コードを閉じタグ </body> の直前に追加
ステップ6: Ctrl + S（MacはCmd + S）で保存
保存後、ストアフロントを開いてページをリロードします。全ページにチャットボットが表示されるはずです。
重要な注意点:
</body>直前に貼り付けることで全ページでウィジェットが読み込まれます- FlowHuntのスニペットはそのまま改変せずに使用してください
- チャットボットはストアのすべてのページに表示されます
オプションB — カスタムLiquidセクション（特定ページのみ）
この方法では、チャットボットを特定のページやテンプレートのみに表示できます。商品ページや特定のランディングページだけに表示したい場合に最適です。
ステップ1: オンラインストア > テーマで使用中テーマのカスタマイズをクリック
ステップ2: チャットボットを表示したいテンプレート（例：商品ページ、コレクションページ、特定ページ）に移動
ステップ3: セクションを追加またはブロックを追加（テーマによる）をクリック
ステップ4: カスタムLiquidを選択
ステップ5: FlowHuntの連携コードを、カスタムLiquidの内容エリアに貼り付け
ステップ6: 保存をクリックし、プレビューでそのテンプレートにチャットボットが表示されるか確認
重要な注意点:
- この方法なら、チャットボットの表示場所を細かくコントロールできます
- 表示したいテンプレートごとに手順を繰り返す必要があります
- サイト全体に展開する前のテストにも最適です
- チャットボットは設定したテンプレートのみに表示されます
動作確認とテスト
- ストアフロントをシークレット／プライベートウィンドウで開き、キャッシュの影響を避けてください
- よくある質問（配送、返品、在庫など）でフローが正常に動作するか確認
- FlowHuntの会話ログ（必要ならVerboseを有効化）で使用されたドキュメントやツールを確認
トラブルシューティング
- チャットボットが表示されない：連携コードがページに含まれているか、テーマが公開されているか、Chatbots設定でドメインが許可されているか確認してください
- ウィジェットが重複表示される：重複スニペットを削除し、1つの連携コードだけを有効にしてください
- 回答が出ない：フロー内のナレッジソースやドキュメントリトリーバー設定を確認し、再公開してください
- Shopify権限エラー：FlowHunt → 連携でShopifyを再接続し、必要に応じて再インストールしてください