Shopify
最終更新日:
このガイドでは、Quickchat AI ウィジェットを Shopify ストアに追加する方法をご紹介します。
- Shopify ストア
- Shopify App Marketplace からインストールされたShopping Agent by Quickchat AIアプリ(インストールしたくない場合や手動で接続したい場合は、チュートリアルの第二部にスクロールしてください)
- テーマを編集するユーザー権限
完了時間:約 2 分
ステップ 1:テーマエディターを開く
Section titled “ステップ 1:テーマエディターを開く”2 つの方法があります:
オプション A(推奨):Quickchat AI アプリから
Section titled “オプション A(推奨):Quickchat AI アプリから”Quickchat AI App → Your website → Installタブ → Embed in your Shopify Storeをクリック。
これにより、アプリの埋め込みを有効にできるページでストアのテーマエディターが直接開きます。
オプション B:Shopify 管理画面から
Section titled “オプション B:Shopify 管理画面から”Shopify Admin → Online Store → Themes → 現在のテーマでCustomizeをクリック。

ステップ 2:アプリの埋め込みを有効にする
Section titled “ステップ 2:アプリの埋め込みを有効にする”テーマエディター内で、左サイドバーを開き、App embedsに移動します。

Quickchat AI Widgetを見つけて、オンに切り替えます。

その後、Save(右上)をクリックします。

ステップ 3:ストアフロントで確認
Section titled “ステップ 3:ストアフロントで確認”ストアフロント(プレビューまたはライブサイト)を開き、ページの右下角にある Quickchat AI チャットバブルを探してください。
それで完了です!
Quickchat AI エージェントが Shopify ストアでライブになりました 🎉
ウィジェットスクリプトを手動で追加する方法
Section titled “ウィジェットスクリプトを手動で追加する方法”Quickchat AI アプリで既に AI エージェントを構築しているため、Shopify アプリをインストールしたくない場合は、Shopify ストアに表示するシンプルなスクリプトを追加できます。
1. テーマコードエディターを開く
Section titled “1. テーマコードエディターを開く”- Shopify 管理パネルに移動します。
- 左メニューでOnline Store → Themesをクリックします。

- 「Current theme」セクションで、Customizeボタンの横の**三点(⋯)**をクリックします。
- ドロップダウンからEdit codeを選択します。

2. theme.liquidを見つける
Section titled “2. theme.liquidを見つける”- コードエディターで、左側のlayoutフォルダーを展開します。
theme.liquidをクリックして、テーマのメインレイアウトファイルを開きます。

3. スクリプトを貼り付ける
Section titled “3. スクリプトを貼り付ける”- Quickchat Appで、Your Website → Installに移動します。
- 生成されたスクリプトをコピーします。
theme.liquidファイルの最後の**</body>タグの直上**に貼り付けます。
<script> window.__quickchat = { host: "app.quickchat.ai", init: "YOUR_AI_ID_HERE", };</script>