Shopify AIショッピングアシスタントの作り方

Shopify AIショッピングアシスタントは、訪問者が必要なものを説明し、カタログを検索し、一致する少数の商品を説明するのに役立ちます。このチュートリアルでは、滑走の好みを尋ね、予算内のスノーボードを比較し、在庫状況について主張する前に、要求された色またはサイズを確認するアシスタントを作成します。

例は、架空のスノーボードストアであるQuickboardsです。ローカルで実行しているQuickchat AI Appでそのエージェントを作成し、実際のShopifyデモカタログに接続し、以下の会話を記録しました。商品カードには実際のカタログ画像とデモ価格が含まれます。アルパインのアートワークはAI生成の編集用イラストであり、販売中の別商品ではありません。

また、返信の背後にあるツールを調査し、アシスタントをバッチでテストし、必要に応じてカートからAI-Assisted Revenueまで追跡する方法も学びます。アトリビューションの例では、実際の販売ではなく、明確にラベル付けされたローカルのデモ注文を使用します。

完成した体験は、インライン会話を備えた専用の商品ファインダーページです。

ローカルで実行しているデモページは、実際のQuickchat AI EmbedとライブのShopifyカタログを使用しています。公開済みShopifyテーマのスクリーンショットではありません。おすすめの拡大表示はテストセクションにあります。

重要な確認は、接続が成功した後に行います。カタログには説明内に144から160 cmの長さが記載されていましたが、選択可能なSizeオプションは公開されていませんでした。バリアントテストでは、156 cmのボードを約束せずに、エージェントがその不足をどのように扱うかを示します。

何を作成し、何が必要ですか？

3つの有用な好みを収集し、最大2つのおすすめを表示し、購入者が選択を絞り込める会話型の商品ファインダーを作成します。

これは、商品レコメンデーションチャットボットの具体的な実装です。「中級者、整備されたコース、最大800ドル」のような短い条件にも、好みを言語化する手助けが必要な訪問者にも対応します。すべての訪問者に同じアンケートの完了を求めるものではありません。

開始前に以下を準備します。

1. Quickchat AIアカウントを作成するか、既存のアカウントを使用します。Freeには、個人の非商用テスト向けにMCPアクセスと月50 AIクレジットが含まれます。会話とSimulationテストはクレジットを消費します。マーチャントとして導入する場合は、商用利用プランを選択してください。
2. ShopifyストアのルートURLを用意します。例: https://your-store.myshopify.com。このカタログ固有のテストを再現するには、Quickchat AIのデモストアであるhttps://quickchat-ai.myshopify.comを使用します。デモデータは変更される場合があります。価格を比較する前に現在の結果を確認してください。
3. 導入には、WebサイトまたはShopifyテーマを編集する権限が必要です。Dawnなど、Custom Liquidセクションを持つテーマはインラインスニペットをホストできます。完全なスタンドアロンページテンプレートも使用できます。

Step 1から7では比較専用ファインダーから始めます。その後の任意セクションで、カート作成、注文アトリビューション、メッセージングチャネルを追加します。エージェントは支払いを受け付けたり在庫を予約したりしません。購入者はShopifyチェックアウトで購入を完了します。

すでに複数のShopifyアプリを評価していますか？その判断については、当社のShopify AIチャットボット比較を参照してください。このガイドは、商品検索ワークフローの構築とテストに焦点を当てます。

アシスタントはShopifyからどのように商品を選びますか？

エージェントは、購入者の好みとShopifyから返された商品データを組み合わせ、会話内で候補リストを説明します。

購入者が制約を提供します。Shopifyが商品事実を提供します。モデルが、返された候補のどれが適合し、どのように説明するかを決定します。

Shopify MCPは、エージェントとストアが公開するツールの間の接続です。MCPはModel Context Protocolの略です。ストアURLを入力すると、Quickchat AIがツール検出とカタログリクエストを処理します。この手順に貼り付けるカスタムRESTアクション、リクエスト本文、Shopify Admin APIキーはありません。

この分担はテスト時に重要です。

検索結果は候補です。それでもカテゴリが違ったり、適合度が低かったりする場合があります。同様に、商品がカタログに存在することは、すべての色とサイズの組み合わせが利用可能であることを証明しません。

Shopifyは、Storefront Catalog MCPガイドでカタログツールインターフェイスを文書化しています。この連携の背後にある商品データの問題について詳しくは、当社のShopify MCPエンジニアリングノートを参照してください。

ショッピングアシスタントはどのように作成しますか？

エージェントを手動で作成し、商品検索の役割を与え、商品価格をKnowledge Baseに入れないようにします。

Step 1. 初期設定を完了する

1. Googleまたはメールで登録します。メールを使用する場合は、サインイン前に確認メールに従ってください。
2. 初期設定画面で、Set up manuallyを選択します。
3. Identityで、Name your AI AgentにQuickboards Guideを入力します。Describe what you want your agent to doに次を入力します。

あなたはQuickboards Guideです。デモ用スノーボードストアQuickboardsのショッピングアシスタントです。訪問者が自分の滑走スタイルと予算に合うスノーボードを見つけられるよう支援してください。商品と価格には接続済みのShopifyカタログを使用してください。有用な追加質問を行い、おすすめを簡潔に説明し、商品カードを表示してください。簡潔で親しみやすく対応してください。これは商品ファインダーの会話です。商品を比較し、詳細を確認しますが、カートの作成や変更、チェックアウトの開始は行いません。商品の仕様、在庫状況、ポリシーを作り上げないでください。

4. Nextをクリックします。Knowledge Baseでは、このカタログ専用の例ではインポートオプションを空のままにし、Nextをクリックします。
5. External appsでShopifyを選択し、Nextを選択します。これにより希望する連携が記録されます。実際の接続はStep 2で行います。
6. DeploymentでChat embedを選択し、Nextを選択します。ここではまだ何も公開されません。
7. Choose your planで、Freeのまま続行するためにSkip for nowを選択します。オファーダイアログが表示された場合は閉じ、再度Skip for nowを選択します。

既存のエージェントの場合は、直接Identity → AI Personaに移動します。NameをQuickboards Guideに設定します。Main Promptフィールドに、Step 3でテスト済みの指示を設定します。

同じAI Personaタブで、このデモに合わせてPersonalityをFriendly、ProfessionをShopping Assistant、CreativityをLow、Reply LengthをNormalに設定します。

左サイドバーのIdentityから開始します。AI Personaにはこの手順の設定が含まれます。下の拡大図は編集するフィールドを示します。

ダッシュボードでは指示フィールドをMain Promptと呼びます。Editコントロールを開いて初期説明を置き換えます。変更は自動保存されます。

後で確認済みの配送ポリシーや返品ポリシーをKnowledge Baseに追加できます。当社のKnowledge Base設定ガイドでは、そのコンテンツの整理方法を説明しています。この例ではポリシーを含めないため、商品価格、オプション、在庫状況の明確な情報源は1つ、接続済みカタログだけになります。プロンプト内で2つ目の価格表を管理しないでください。

Step 2. Shopify MCPを接続して有効化する

1. Actions & MCPsを開きます。
2. Custom ActionsでAdd Actionを選択し、次にShopify MCPを選択します。
3. Shopify store URLにルートURLを入力します。

https://quickchat-ai.myshopify.com

4. Saveを選択します。保存前に接続が確認されます。
5. Shopify Storefront MCPカードのスイッチをオンにします。このダイアログで保存することと、アクションを有効化することは別の手順です。

Custom Actionsの下でShopify Storefront MCPを見つけます。そのスイッチは、エージェントが接続を使用できるかどうかを制御します。

ルートストアURLをShopify store URLに貼り付けます。MCPエンドポイントや商品パスを追加しないでください。

エージェントにすでにShopifyアクションがある場合は、別の接続を作成するのではなく、そのカードでEdit Actionを使用します。Shopify導入ドキュメントでは、別のShopifyアプリインストールルートも説明しています。ここで使用する手動MCP接続に、そのアプリのインストールは不要です。

最初の接続確認として、AI Previewを開いて次のように質問します。

Iron snowboard in Iceが注文可能か、価格はいくらか確認してください。カートには追加しないでください。

テスト日には、返されたバリアントは利用可能で、価格は$699.95 USDでした。自分のストアでは、現在の値を確認できる商品とオプションに置き換えてください。接続成功は必要ですが、この1つの回答だけではファインダー全体は検証できません。

Step 3. 完全なMain Promptを貼り付ける

Identity → AI Persona → Main Prompt → Editを開き、初期説明を次のブロックに置き換え、自動保存後にエディターを閉じます。これは最終テストで使用したプロンプトです。別カテゴリの場合は、ストアIDと好みの質問を一緒に置き換えます。カタログ根拠付けと不一致時のルールは維持してください。

あなたはQuickboards Guideです。デモ用スノーボードストアQuickboardsのショッピングアシスタントです。訪問者がカタログを1つまたは2つの適切なボードに絞り込み、トレードオフを理解できるよう支援してください。会話は簡潔で、親しみやすく、具体的にしてください。称賛や不要な前置きなしで、有用な質問または商品事実から始めてください。

重要な好みだけを収集してください。
- 「スノーボード選びを手伝って」のような広い依頼では、短い質問を1つずつ尋ねてください。滑走レベル、普段の地形、ボード単体の最大予算と通貨を把握してください。この3つの事実が分かるまで、カタログ検索や商品カード表示を行わないでください。
- すでに与えられた事実を再利用してください。訪問者が1つのメッセージで3つすべてを提供した場合は、すぐに検索に進んでください。会話を固定アンケートにしないでください。
- 色などの好みは、それが候補リストを変える場合だけ尋ねてください。カタログに使用可能なサイズガイドがない限り、身長や体重を尋ねないでください。身体寸法だけからボード長を推測してはいけません。

小さな候補リストを見つけて説明してください。
- 現在の商品と価格について、接続済みShopifyカタログを照会してください。価格、オプション、在庫状況の情報源として、Knowledge Base、過去の会話、自分の記憶を使用しないでください。
- 検索結果は候補であり、自動的なおすすめではありません。商品カテゴリ、説明、現在価格を、明示されたすべての要件に照らして確認してください。検索で返されたという理由だけで無関係な商品を表示してはいけません。
- 一致する商品を最大2つ表示してください。1つだけ合う場合は1つ表示してください。それぞれについて、商品名、現在価格と通貨を示し、返された説明に基づく関連理由を1つ説明してください。候補リストの説明は90語未満にしてください。返された事実が裏付ける場合のみトレードオフに言及してください。価格が低いだけでは、そのボードが扱いやすい、または初心者に適していることを意味しません。
- 同じ候補リストに商品カードを使用してください。文脈として余分な商品を表示したり、カタログ全体で回答を水増ししたりしないでください。
- 返されたデータがその主張を裏付けない限り、商品を「最高」と呼んだり、性能を約束したり、正確な技術仕様を述べたりしないでください。誇張されたマーケティング文言を測定された事実として繰り返さないでください。

要求されたバリアントを確認してください。
- 訪問者が特定の色、サイズ、その他のオプションについて尋ねた場合、正確なバリアントについて現在のカタログレスポンスを確認してください。レスポンスに要求されたすべてのオプション値とそのバリアントの在庫状況が含まれない場合は、product-detailツールを使用して商品と選択された組み合わせを調べてください。商品タイトルや説明だけから在庫状況を推測してはいけません。
- オプションリストに値が別々に表示されていても、その組み合わせが利用可能である証明にはなりません。正確に返されたバリアントとその在庫状況を確認してください。
- 説明内のサイズ範囲は選択可能なサイズではありません。カタログにColorはあるがSizeオプションがない場合は、色は確認できるが特定の長さは確認できないと伝えてください。要求されたサイズを約束したり、商品ページにサイズ選択があると主張したりしないでください。
- 確認していない限り、別の商品に不足しているオプションがあると約束しないでください。結果を仮定せず、代替品を確認すると提案してください。
- 確認したバリアントの現在価格と通貨を示してください。内部の商品ID、バリアントID、生のツールデータを顧客向け回答に含めないでください。

変更と一致なしを処理してください。
- 訪問者が予算、地形、レベル、その他の要件を変更した場合、更新された要件でカタログを再照会してください。以前の候補リストを置き換えてください。新しい予算を超える商品をおすすめし続けてはいけません。
- 検索で適切なものが何も返らない場合、より単純なクエリまたは同義語で一度だけ再試行してください。どちらの結果セットにも一致するものがない場合は、「このカタログで一致する商品を見つけられませんでした。」と伝えてください。空または無関係な検索結果が、ストアがそのカテゴリを一切販売していないことを証明すると主張しないでください。
- 訪問者がどの要件を1つ緩和できるかを尋ねてください。予算、サイズ、カテゴリ、在庫状況を黙って緩和しないでください。適切な一致がない場合は商品カードを表示しないでください。
- 接続が失敗した場合は、ライブカタログを確認できなかったと伝え、再試行を提案してください。推測した商品や価格で不足を埋めてはいけません。

この体験は商品ファインダーです。商品の比較と詳細確認のみを行ってください。カートの作成や変更、チェックアウト開始、支払い受付、商品の予約済みという主張は行わないでください。訪問者の言語で返信してください。短い段落を使い、em dashやen dashは使わないでください。

これらのルールはモデルの動作を導きます。厳密なカード数制限、語数バリデーター、権限境界ではありません。当社のテストでは、正確な文言と返信長は変動しました。特定の文を再現することよりも、以下の商品とバリアントの確認が重要です。システムに書き込む別のカスタムRESTアクションについては、当社のAI Action信頼性ガイドがサーバー側条件を説明しています。これらのカスタムアクション制御は、ここで使用するネイティブShopifyカードの設定ではありません。

公開前に商品おすすめをどのようにテストしますか？

会話を2つの方法でテストします。フォローアップ用のインタラクティブテストと、独立した依頼の反復可能なセット用のSimulation Testingです。

バッチスコアは調査の優先順位付けに役立ちます。実際の返信、カタログ事実、関連ツール呼び出しを確認して初めてループが閉じます。

Step 4. 完全なショッピング会話を実行する

AI Previewで新しい会話を開始し、次を送信します。

スノーボード選びを手伝ってください。

エージェントは有用な質問を1つ尋ね、商品カードを表示しないはずです。記録された最終プロンプトの実行では、次のように尋ねました。

現在の滑走レベルはどれですか: 初心者、中級者、上級者？

1つの質問で、早すぎる候補リストはありません。文言が変わっても、新しい実行を繰り返してこの動作が保たれる必要があります。

不足している好みを提供します。直接ルートをテストするには、別の新しい会話を開始し、次の完全な条件を送信します。

私は上級者で、主に整備されたリゾートコースを滑ります。スピードと正確なターンを求めており、ボード単体の予算は最大$800 USDです。

埋め込みデモでは、エージェントはAI’s board、$629.95 USDとLiquid、$749.95 USDを返し、2つの商品カードと説明を表示しました。どちらも指定予算内でした。複数のカタログ項目が合う場合、商品の選択は変わることがあります。商品名だけでなく、理由と制約を確認してください。

画像と商品リンクはShopifyカタログから取得されました。これは実際にレンダリングされたカードコンポーネントであり、デザインされた会話モックアップではありません。

次に、同じ会話で続けます。

やはり予算を$650 USDに下げます。同じ滑走の好みは維持してください。

デモでは、以前の候補リストがAI’s boardとNeo’s Board、どちらも$629.95 USDに置き換えられました。$749.95のLiquidは新しいカードには含まれなくなりました。Inboxで会話を開き、両方のターンを一緒に調査します。予算変更によって、好みの聞き取りを最初からやり直さずに提案商品が変わることを確認してください。

予算は既存の会話内で変更されました。新しい候補リストは、以前の予算超過オプションを除外しています。各カードキャプチャ上の予算ラベルは編集上の注記です。

マーチャント自身のカタログでは、おすすめされた各商品ページも開いてください。リンクが意図したストアに移動すること、商品が存在すること、表示価格が該当するマーケットとバリアントに一致することを確認します。当社デモストアの公開商品ページはパスワード保護されています。スクリーンショットは、制限のないライブショッピング先ではなく、カタログ接続とローカル埋め込みを証明するものです。

Step 5. 反復可能なSimulationデータセットを作成する

7つの独立した依頼を追加する

Testing → Create Datasetを開きます。Dataset nameにQuickboards catalog checksを入力し、Paste messagesを選択して、次を貼り付けます。各---行は、1つの会話内の別ターンではなく、独立したテストを区切ります。

7メッセージのカウントは、区切りが認識されたことを確認します。予算変更のフォローアップには、個別のデータセット行ではなくライブ会話を使用してください。

スノーボード選びを手伝ってください。
---
私は中級者です。整備されたリゾートコースを滑り、カービングを上達させたいです。最大予算は$800 USDです。
---
EUサイズ42で$300 USD未満のスキーブーツが必要です。
---
Iron snowboard in Iceが注文可能か、価格はいくらか確認してください。カートには追加しないでください。
---
Iron snowboard in Ice、サイズ156 cmは購入できますか？カートには追加しないでください。
---
Hellium snowboard in BlackでTaperedデザインを注文できますか？確認だけで、カートには何も追加しないでください。
---
Soy un snowboarder de nivel intermedio. Suelo ir por pistas preparadas y tengo un presupuesto máximo de 800 USD. ¿Qué tabla me recomiendas?

良い回答の意味を評価者に伝える

Evaluation criteriaを展開し、デフォルトのルーブリックを次に置き換えます。

この訪問者の依頼に適用されるルールだけを採点してください。すべてのテスト要件をすべての返信に適用しないでください。

訪問者が「スノーボード選びを手伝ってください」とだけ言った場合、返信は関連する質問を1つ尋ね、まだ商品をおすすめしない必要があります。
訪問者が滑走レベル、地形、予算をすでに提供している場合（スペイン語テストを含む）、予算内の妥当なボードを最大2つ直接候補として示すことが正しいです。追加の確認質問を要求しないでください。説明が好みに対応しているか評価してください。一般的な候補リストでIronやその他の特定商品を要求しないでください。
Iron/Iceの価格確認では、デモカタログは利用可能で699.95 USDと報告します。Iron/Ice/156 cmの確認では、Ironに選択可能なSizeオプションがないため、その長さは確認できないと返信する必要があります。
Hellium/Black/Taperedについては、その組み合わせが利用可能であると言ってはいけません。
スキーブーツについては、一致する商品を見つけられなかったと言う必要があります。無関係なボードやワックスをブーツのおすすめとして提示してはいけません。
返信は訪問者の言語で行い、カートを作成したと主張してはいけません。

表示される動作だけを評価してください。隠れたShopify呼び出し、現在のカタログ完全性、商品カードの内容は返信テキストからは確認できません。それらはライブカタログに対する別の手動確認が必要です。

依頼に適用されるルールを採点します。完全なショッピング条件は、追加の好みの質問を省いたことで減点されるべきではありません。

明示的な米国カタログコンテキストには、Conversation metadata (advanced)を展開して次を入力します。

{"shopify_language":"en","shopify_country":"US"}

これらはカタログコンテキストのフィールドです。スペイン語訪問者テストは、それでも回答が訪問者の言語に従うことを確認します。

実行、調査、比較を行う

1. Createを選択し、データセットを開いて、Runを選択します。
2. Start Test Runで、Final finder, US catalogのような説明的なラベルを入力し、Start Runを選択します。
3. 完了した実行をRunsで開きます。AI Response、AI Score、Justificationを一緒に読みます。切り詰められたレスポンスまたは理由にカーソルを合わせると全文を読めます。
4. 行のViewコントロールを使用して、実際の会話をInboxで開きます。バリアントの事実をShopifyに照らして確認し、下の高度なセクションに示すようにツールを調査します。
5. 間違っていた内容に応じて、エージェントの指示または評価者のルーブリックを修正します。同じデータセットを新しいラベルで再実行します。カタログが変わった場合は、商品固有の期待値を更新します。

サイドバーではTestingが選択されたままです。パンくずはデータセットと実行を識別します。各行の右側から人間のフィードバックと会話に進みます。

最終的な米国カタログテスト実行です。AI Scoreは表示されるレスポンスを採点します。Shopifyリクエスト、カード、在庫を独立して検証するものではありません。

自社実行でスコアが見逃したこと

ルーブリックの最初のバージョンは、完全な条件に対して追加質問をしなかったことを誤って減点しました。改訂済み基準では、不完全な依頼と、レベル、地形、予算をすでに含む依頼を明確に区別しています。評価者の推論も、エージェントの回答と同じようにレビューしてください。

最終実行でも、利用不可バリアントの返信にフラグが立ちました。採点者は、バリアントが存在することと、利用可能であることを混同しました。実際のカタログにはBlack/Taperedバリアントが存在し、利用不可とマークされており、エージェントはそれを正しく報告しました。このため、スコアだけでは下のバリアント確認を置き換えられません。

逆も起こりました。高く採点された候補リストが、Hydrogenを「より簡単な上達」の選択肢と呼びましたが、返された説明はその比較を立証していませんでした。これは手動レビューの発見として扱い、検証済みの商品利点として扱わないでください。記録された返信とカタログ抜粋には、両方のケースが保存されています。

サイズと利用不可バリアントはどのように確認しますか？

商品説明のテキストを在庫記録として扱うのではなく、正確なバリアントを確認します。

Iron snowboardの説明には144から160 cmの範囲が記載されていました。返された購入可能オプションはColorで、Iceが含まれていました。156 cmを確認する選択可能なSizeディメンションはありませんでした。

実際のカタログ不一致を示す概念図です。説明の範囲は、特定の購入可能な長さを確認できません。

この正確な依頼を送信します。

Iron snowboard in Ice、サイズ156 cmは購入できますか？カートには追加しないでください。

記録された最終プロンプトテストでは、エージェントはIceを$699.95 USDで確認しましたが、そのサイズがオプションとして公開されていないため、156 cmの長さを確認または選択できないと説明しました。

成功した結果は条件付きの回答です。色は利用可能ですが、要求された長さは未確認のままです。

別のHellium / Black / Taperedテストでは、異なるエラーを確認します。両方のオプション値は商品のオプションリストに表示されますが、正確な組み合わせは利用不可でした。エージェントは、「Black」と「Tapered」が個別に存在するという理由だけでそれを提案してはいけません。

評価者が見逃した区別です。バリアントは存在しますが、現在注文できません。

著者のテスト中、実際のカタログレスポンスを会話と一緒に記録しました。検索レスポンスには、これらの実行で使用されたバリアントデータがすでに含まれていたため、追加のproduct-detail呼び出しを成功の必須サインとして扱いませんでした。返されたデータが不完全な場合、エージェントは詳細ルックアップまたは明示的な「確認できません」が必要です。

自分のストアでは、返信をShopifyの商品バリアント設定と比較してください。要求されたすべてのオプション値が同じバリアントに属することを要求し、その在庫状況と価格を確認します。注文可能は既知の倉庫数量を意味せず、おすすめは何も予約しません。

ファインダーを調整したとき何が変わりましたか？

有用な改善は、具体的な失敗をテストし、関連する指示を変更し、同じ依頼を繰り返すことで得られました。

このループを使用します。

1. 保存したテストメッセージで新しい会話を開始します。
2. レスポンスを読み、実際のカードとカタログ事実を調査します。
3. Main Promptで、商品検索をいつ開始するかなど、1つの動作を変更します。
4. そのテストを繰り返し、次にデータセットの残りを再実行してリグレッションを確認します。

最終プロンプトを形作った3つの発見です。

検索は別カテゴリの候補を返しました。エージェントはそれらを適切なブーツとして提示しませんでした。

これらはこのデモカタログで観測された結果であり、精度ベンチマークではありません。プロンプトは不足している仕様を補えません。説明が2つの商品を区別していない場合、アシスタントに意味のある違いを説明させる前にカタログを改善してください。説明、価格、オプション、指示を変更した後はテストを繰り返してください。

Shopifyページにショッピングアシスタントを追加するにはどうしますか？

ページ内の会話にはEmbedを、フローティングチャットバブルにはWidgetを使用します。この手順ではEmbedを使用し、Step 3の比較専用Main Promptを維持します。

Step 6. WebサイトEmbedを設定してコピーする

1. Channels → Your Website → Text Contentを開きます。Header textをQuickboards Guideに、Welcome messageをTell me about your riding and I will help you find a board. Where do you like to ride?に設定します。
2. Appearance → Themeを開き、Lightを選択します。
3. Install → Availability and accessに戻ります。Widget & Embed accessが有効であることを確認します。
4. Install manually with codeを開き、Embedをコピーします。自分のスニペットのエージェント識別子を使用してください。

サイドバーのYour Websiteから始め、Install manually with codeに進みます。そのパネル内で、インラインファインダー用にEmbedをコピーします。Widgetはフローティングバブルを作成します。

ここでは自分のエージェントのスニペットをコピーします。下の公開フラグメントは、ローカルデモ識別子の代わりにプレースホルダーを使用しています。

この最小フラグメントはネイティブローダーを使用します。YOUR_SCENARIO_IDを置き換えてください。

<div id="quickchat-embedded" style="height:680px;overflow:hidden;"></div>
<script>
  window._quickchat = window._quickchat || function () {
    (window._quickchat.q = window._quickchat.q || []).push(arguments);
  };
  _quickchat('containerId', 'quickchat-embedded');
  _quickchat('init', 'YOUR_SCENARIO_ID');
</script>
<script src="https://bubble.quickchat.ai/chat.js" async></script>

コンテナは初期化前に存在し、containerIdはinitの前に設定する必要があります。Quickchat AIは1ページにつき1回初期化します。テーマがすでにウィジェットまたはShopifyアプリ埋め込みを読み込んでいる場合、このページで重複初期化を防ぎつつ、他の場所のチャットを削除しないよう管理者に依頼してください。Webサイトチャネルガイドではアクセス制御を説明しています。

Step 7. ファインダー専用のShopifyテンプレートを用意する

Dawnなど、Custom Liquidを持つテーマを使用します。小さな作業が3つあります。ページを作成し、そのテンプレートを作り、そのテンプレートをファインダーだけに割り当てます。

ページとテンプレートを作成する

1. Shopify adminで、Online Store → Pages → Add pageを開きます。Find your snowboardを入力し、導入文を追加し、Hiddenを選択して保存します。
2. Online Storeで、対象テーマのEdit themeを選択します。Home page → Pages → Create templateを開きます。デフォルトページテンプレートを基に、product-finderという名前を付けます。

テンプレート内に会話を配置する

1. 新しいテンプレートのTemplateエリアで、Add section → Custom Liquidを選択します。フラグメントをLiquid codeに貼り付けて保存します。共有のHeaderおよびFooterセクションには入れないでください。
2. テーマエディターでPreview → Changeを使用してページをプレビューします。Hiddenページもプレビューできます。JavaScript変更を保存した後はプレビューを再読み込みします。

配置図であり、Shopify adminのスクリーンショットではありません。このテンプレートはファインダーページだけに割り当てます。

割り当て、確認、公開する

1. ページ設定に戻り、Theme templateでproduct-finderを選択して保存します。ライブテーマ内のテンプレートだけがここに表示されます。未公開テーマで作業する場合は、通常のリリースプロセスと調整してください。
2. 下のローンチ確認後、ページをVisibleにし、Content → Menusでリンクします。

これらの手順は、Shopifyのテンプレート手順とページ表示制御に従っています。

スタンドアロンサイトでは、前提条件にリンクした完全なHTMLテンプレートを使用します。そのエージェント識別子とデモブランディングを置き換え、静的ホストにアップロードします。その完全なドキュメントはスタンドアロンサイト用です。Custom Liquidには上のフラグメントだけを貼り付けてください。

任意: カートをAI-Assisted Revenueに接続するにはどうしますか？

Quickchat AIは、注文のカート識別子を、その会話中に作成または更新された保存済みカートと照合することで、注文を会話に関連付けます。商品おすすめだけでは、そのリンクは成立しません。購入者が提供する割引コードの適用を含むカートとチェックアウトリンクのフローは、Shopify向けAIショッピングアシスタントページにも要約されています。

検証範囲: 9月14日のテストでは、通常の返信フローを通じて実際のShopifyカートを作成し、そのチェックアウトカードを保存しました。収益スクリーンショットは、別途明示的にシードされたデモ注文を使用しています。これはApp内のアトリビューションを示すものであり、実際の購入完了や本物のShopify注文Webhookの配信ではありません。

マーチャントを接続し、カートモードを有効にする

1. 自分のShopifyストアにQuickchat AI: Chatbot & Salesをインストールし、認可を完了します。手動MCP接続はカタログツールを提供しますが、アプリインストールはアトリビューションに必要なマーチャント接続と注文Webhookを提供します。
2. そのインストール経由で到達したエージェントを開きます。手動で作成したエージェントとは異なる場合があります。このチュートリアルの設定とプロンプトをそこに適用し、Shopifyアクションを確認し、そのエージェントの識別子をWebサイトスニペットで使用してください。
3. Identity → AI Persona → Main Prompt → Editで、This experience is a product finder.で始まる最後の段落だけを下の段落に置き換えます。矛盾するカート禁止指示の下に追加しないでください。

この体験は、購入者が商品を比較した後にカートを作成するのを支援できます。訪問者が識別済みの商品と数量を追加するよう明示的に依頼した場合のみ、カートを作成または更新してください。まず、正確なバリアントとその現在の在庫状況をShopifyで確認してください。要求されたオプションを確認できない場合は、代替品を入れるのではなく確認を求めてください。cartツールが返した商品、数量、合計、チェックアウトリンクを使用してください。チェックアウトURLを作り上げないでください。支払いを受け付けたり、注文を完了したり、商品が予約済みだと主張したりしないでください。訪問者の言語で返信してください。短い段落を使い、em dashやen dashは使わないでください。

デモカタログでは、新しい会話でこの正確なメッセージを送信します。

IceのIron snowboardを1点、新しいカートに追加してください。まずこのバリアントが利用可能か確認してください。長さは選択しません。カートを表示してください。ただし注文の確定や支払いは行わないでください。

実際のツールシーケンスはsearch_catalog → get_product → create_cartでした。返されたカートには、IceのIron snowboardが1点、$699.95 USDで含まれていました。長さは選択されず、注文や支払いは作成されませんでした。自分のストアでは、確認済みの商品、バリアント、数量に置き換えてください。

9月14日のテスト中に、ネイティブチェックアウトカードが自動保存されました。その商品、数量、合計は実際のShopifyレスポンスと一致します。チェックアウトは完了していません。

Inboxで会話を開き、Why AI said thatを調査して実行されたツールを確認します。返された商品、数量、通貨、合計を確認します。ツール呼び出しが成功しただけでは、チェックアウトカードが配信されたことやアトリビューションが保存されたことは証明されません。

注文を会話まで追跡する

ライブストアでは、購入者はShopifyチェックアウトへ進みます。Quickchat AIは、注文のカート識別子を、そのマーチャントの会話内の保存済みカートと照合します。

アトリビューションは一致するカート識別子に従います。チャット後の無関係な購入だけでは不十分です。

1. アプリ接続済みエージェントでInsights → AI-Assisted Revenueを開きます。
2. 注文の発生日を含む日付範囲を選択します。AI-assisted GMV、Avg order value、Daily assisted GMVを調査します。
3. Recent assisted ordersで注文を見つけ、Conversation列のViewをクリックします。Inboxが、そのOrder placedカードを含む会話を開きます。

Insights → AI-Assisted Revenue。このローカルデモには、マーチャントの販売実績ではなく1件の合成注文が含まれます。

合計はアトリビューションされた注文金額です。デモ注文が1件だけなので、平均も合計と等しくなります。

チャットに戻るには、注文番号リンクではなくConversation列のViewを使用します。

Inboxには、シードされたカートに関連付けられた会話上にOrder placedが表示されます。注文自体は合成です。

収益スクリーンショットでは、以前に記録したShopifyレスポンスからカートコンポーネントを明示的に保存し、そのカート識別子を含む合成#DEMO-1001注文イベントをローカルアトリビューションハンドラーに渡しました。重複したcreated/paidイベントは1件のレコードを生成し、一致しないトークンは何も生成しませんでした。これはフィクスチャを使って下流の照合動作を検証するものであり、本物のShopify注文Webhookの配信ではありません。実際の注文や支払いはありませんでした。

指標はアトリビューションされた注文金額（GMV）として読んでください。AIが追加した商品だけでなく、照合された注文全体を含みます。注文作成イベントまたは注文支払いイベントがレコードを成立させることがあります。これは有料販売、純収益、増分リフトのレポートではありません。返金とキャンセルは差し引かれません。日付フィルターは発生した注文を選択します。アトリビューションには固定のチャット後ルックバック期間はありません。

何も表示されない場合は、アプリ接続済みエージェント、実際のcreate/update-cartアクション、一致する注文イベント、選択日付を確認してください。手動のインラインスニペットは、Shopifyアプリ埋め込みのストアフロントカート同期を提供しません。

高度: どのShopifyツールが実行されたかを確認するには？

個々のAI返信でWhy AI said thatを使用し、そのAI Actions Usedを調査します。これは、最終回答が正しく聞こえるが、エージェントがカタログを検索したか、カート変更を試みたかを確認したい場合に特に有用です。

1. Inboxを開き、会話を開きます。Simulation結果のViewコントロールも同じ画面への別ルートです。
2. 調査したいAI返信を見つけます。返信にカーソルを合わせ、その下のWhy AI said thatを選択します。
3. AI Actions Usedを読みます。各エントリには、その返信に対するツール名と短縮された引数要約が表示されます。
4. それらの呼び出しを、訪問者の依頼と返された商品事実と比較します。別の返信を調査して、次のターンで何が変わったかを確認します。

調査はエージェント全体ではなく、特定の返信に属します。ルックアップまたはカート変更を実行した返信を選択してください。

任意のカートテストからの実際のネイティブ呼び出しです。カタログ検索、商品ルックアップ、その後のカート作成です。このリストは永続化されたツール呼び出しレコードから来ており、手作業で書いたトランスクリプトではありません。

期待される呼び出しはタスクによって異なります。

ネイティブShopifyカードは、カスタムアクションのView logsパネルを公開しません。ここでは返信レベルの調査を使用します。これらの引数要約は、完全なHTTPトレース、在庫証明、支払い証明ではありません。当社のカートカード問題は、ユーザーに表示される結果に別確認が必要である理由の具体例です。より広い概念については、AI Agentsがアクションを実行する方法を参照してください。

任意: 同じファインダーはWhatsAppとInstagramで回答できますか？

はい。いずれかのチャネルを設定済みエージェントに接続し、そのチャネルでテストしてください。カタログ接続は同じままで、メッセージの表示方法が変わります。

配信図: Webサイトの商品カード、WhatsAppのネイティブインタラクティブメッセージ、Instagramのテキストとリンクです。

WhatsAppはネイティブの商品メッセージとカートメッセージに対応しています。Instagramは現在、Webサイトのインライン商品カードやカートレイアウトなしで返信テキストを送信します。Instagramでは、おすすめに読みやすい商品名、確認済み価格、商品URLがテキスト内に含まれることを確認してください。必要に応じて、この指示をMain Promptに追加し、実際のDMで再テストします。

商品カードなしでもおすすめが理解できるようにしてください。おすすめする各商品の名前、確認済み価格と通貨、商品URLを返信テキストに含めてください。Shopifyから返された値だけを使用してください。

この指示はテストの出発点であり、記録済みのInstagram結果ではありません。Instagramでは、Step 3の比較専用Main Promptを使用します。WebサイトのチェックアウトボタンがDMに表示されると仮定しないでください。WhatsAppで同時にカートモードが必要な場合は、Main Promptの変更がエージェント上のすべてのチャネルに適用されるため、Instagram用に別エージェントを使用してください。

同じエージェントを接続しても、購入者のWebサイト会話が新しいWhatsAppまたはInstagram会話に引き継がれることはありません。

WhatsAppを接続する

このチャネルには上記の任意のカートモードを使用します。ネイティブ商品メッセージはカートのクイック返信を提供できるため、入力された依頼だけでなく、それらのボタンもテストしてください。

1. SMSまたは音声認証を受けられる専用のビジネス番号、ビジネス詳細、関連するMeta Businessへの管理者アクセスを用意します。既存番号またはプロバイダー移行には、WhatsApp設定ガイドを使用してください。
2. External Apps → WhatsApp → Connect WhatsAppを開きます。
3. Metaのウィンドウで、ビジネス管理者としてサインインし、ビジネスとWhatsApp Business Accountを選択または作成し、要求されたビジネス詳細を入力して番号を確認します。権限画面と確認画面を完了します。
4. Quickchat AIに戻り、Connectedを待ちます。Settingsで、番号のスイッチがEnabledになっていることを確認します。
5. 別のWhatsApp番号から商品質問を送信します。受信した返信とInbox会話の両方を確認します。

ここからMetaの接続フローを開始します。このスクリーンショットは完了済みのWhatsApp接続を示していません。

Instagramを接続する

1. InstagramのProfessionalアカウント、BusinessまたはCreatorを使用します。
2. External Apps → Instagram → Connect to Instagramを開きます。そのアカウントとしてサインインします。ブラウザが誤ったアカウントを選択した場合は、Sign in as a different accountを使用します。
3. 認可中はAccess and manage messagesを有効のままにします。Quickchat AIに戻り、アカウントを確認してEnable Instagramをオンにします。
4. 別のInstagramアカウントからDMを送信します。テキスト、商品リンク、Inboxエントリを確認します。Instagram DM設定チュートリアルでは接続トラブルシューティングを説明しています。

Professionalアカウントを接続し、メッセージアクセスを許可します。このローカルAppにはMeta認証情報がないため、接続コントロールは無効化されています。これはライブDMキャプチャではありません。

両方のチャネルを、新しいインバウンドメッセージでテストしてください。WhatsAppの自由形式返信とInstagramの自動返信は、それぞれの24時間メッセージングウィンドウを使用します。アウトバウンドキャンペーンには別の設定とポリシー確認が必要です。

ローンチ前に何を確認すべきですか？

Step 8. 公開体験を検証する

ストアフロントを確認する

• マーチャント導入前に、商用利用を許可するプランを選択します。
• デスクトップとモバイルでページを開きます。意図したエージェントが1回だけ読み込まれ、入力が使用可能で、商品リンクが機能する必要があります。
• そのページ自身のテーマプレビュー確認が完了するまで、ページは非表示のままにします。

モバイル上の既存の予算変更会話です。どちらのおすすめも$650 USD未満のままです。狭い画面でカルーセルの動き、商品リンク、メッセージ入力を確認してください。

ショッピング動作を確認する

スペイン語のSimulationケースは言語確認であり、マーケット確認ではありません。当社の多言語チャットボットガイドではその広い機能を説明しています。それでも、ストアの地域別カタログデータは独立して検証してください。

レビュールーチンを設定する

新しい会話を誰が監視するかを決めます。難しい依頼をチームメイトが引き継ぐべき場合は、Human Handoffを設定します。これは別のアクションです。

初期の会話を会話分析と並べてレビューします。サポートされていない比較や不足している商品事実を修正し、保存済みテストを再実行します。問題を露出したテストケースを保存し、次のプロンプト変更でもそれらに対して確認できるようにします。

比較専用プロンプトは、このチュートリアルのベースのままです。そのカート禁止ルールは行動上の指示であり、Shopifyのカートツールを技術的に削除するものではありません。任意の経路は、それぞれの確認が完了してから有効化してください。

よくある質問

Shopify AIショッピングアシスタントはどのように作成しますか？

Quickchat AI Agentを作成し、好みの収集方法と商品のおすすめ方法を定義するMain Promptを書き、ストアURLを使ってShopify MCPを接続して有効化します。エージェントをウィジェットまたはインライン埋め込みとしてWebサイトに追加する前に、カタログに対しておすすめをテストします。

AIチャットボットはShopifyストアの商品をおすすめできますか？

はい。接続済みのエージェントはShopifyカタログを検索し、返された商品詳細を使って候補リストを説明し、商品カードを表示できます。一致の品質は、カタログ説明、購入者の好み、エージェントの指示に依存します。テスト時には実際の商品とバリアントを確認してください。

これはShopifyの商品レコメンデーションクイズですか？

これは会話型の商品ファインダーです。チャットを通じて不足している好みを収集でき、同じ会話内で完全な条件指定や予算変更を受け付けられます。固定フォームの作成、クイズスコアの計算、決定論的なおすすめの保証は行いません。

アシスタントはShopifyのサイズと在庫状況を確認できますか？

カタログから返されるオプションと在庫状況を確認できます。説明に記載されたサイズは、そのサイズが選択可能で利用可能なバリアントである証拠にはなりません。エージェントは正確な組み合わせを確認するか、確認できないと伝える必要があります。注文可能であることは、在庫数や予約を意味しません。

このチュートリアルにコードや有料プランは必要ですか？

アプリケーションコードを書かずにエージェントを設定してテストできます。Quickchat AIのFreeプランには、個人の非商用利用向けにMCPアクセスと月50 AIクレジットが含まれます。テストはクレジットを消費します。マーチャントとして導入するには商用利用プランが必要です。インラインページには埋め込みスニペットの貼り付けが必要で、Shopifyの料金は別です。

AI-Assisted Revenueは何を測定しますか？

Quickchat AIのアトリビューションは、Shopify注文のカート識別子を、そのマーチャントの会話内で作成または更新された保存済みカートと照合します。ダッシュボードは、照合された注文金額全体をGMVとして報告します。純収益や証明済みの増分売上ではありません。カタログのおすすめや商品クリックだけでは不十分です。

ショッピングアシスタントはWhatsAppとInstagramで動作しますか？

同じエージェントとShopifyカタログ接続を両方のチャネルで使用できますが、会話と表示方法は異なります。WhatsAppはネイティブの商品メッセージとカートメッセージに対応しています。Instagramは返信テキストを送信するため、おすすめにはテキスト内の商品名、価格、リンクが必要です。WebサイトのインラインチェックアウトカードはDMには表示されません。接続した各チャネルを個別にテストしてください。